<Comment>/*</Comment><br/>
<Comment> * SCSS Syntax Highlight Sample File (Standard)</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</Comment><br/>
<Comment> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
<Comment> * @date    2016-09-15</Comment><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>/*</Comment><br/>
<Comment> * Block comment</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * Alert keywords:</Comment><br/>
<Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> </Comment><Alert Level 2>FIXME</Alert Level 2><br/>
<Comment> */</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@charset</At Rule><Normal Text> </Normal Text><String>"UTF-8"</String><Normal Text>;</Normal Text><br/>
<dsNormal></dsNormal><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"mixins/button"</String><At Rule>;</At Rule><br/>
<dsNormal></dsNormal><br/>
<Comment>// Variable define</Comment><br/>
<dsNormal></dsNormal><br/>
<Variable>$image-path</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>            </Normal Text><String>"../../static/images"</String><Normal Text>;</Normal Text><br/>
<Variable>$default-text-color</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>    #333 !default; </Normal Text><Comment>// Default can be overrided</Comment><br/>
<Variable>$default-font-size</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>     16px !default;</Normal Text><br/>
<Variable>$default-font-family</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>   Roboto, </Normal Text><String>"Droid Sans"</String><Normal Text>, sans-serif;</Normal Text><br/>
<Variable>$default-font-weight</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>   400;</Normal Text><br/>
<Variable>$default-line-height</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>   </Normal Text><Variable>$default-font-size * 1.8;</Variable><br/>
<Variable>$shadow-transparence</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>   0</Normal Text><Selector Class>.25</Selector Class><Normal Text>;</Normal Text><br/>
<Variable>$box-shadow</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>            0 0 3px rgba(0,0,0,</Normal Text><Variable>$shadow-transparence);</Variable><br/>
<Variable>$page-width</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>            100rem; </Normal Text><Comment>// kabab-case</Comment><br/>
<Variable>$gapOfArticle</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text>          20px;   </Normal Text><Comment>// camelCase</Comment><br/>
<Variable>$body_background_color</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> white;  </Normal Text><Comment>// snake_case</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>// Mixins</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>@mixin border-radius(</Normal Text><Variable>$radius) {</Variable><br/>
<Normal Text>  -webkit-border-radius</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> </Normal Text><Variable>$radius;</Variable><br/>
<Normal Text>     -moz-border-radius</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> </Normal Text><Variable>$radius;</Variable><br/>
<Normal Text>      -ms-border-radius</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> </Normal Text><Variable>$radius;</Variable><br/>
<Normal Text>          border-radius</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> </Normal Text><Variable>$radius;</Variable><br/>
<Normal Text>}</Normal Text><br/>
<dsNormal></dsNormal><br/>
<Selector Class>.box</Selector Class><Normal Text> </Normal Text><Property>{</Property><Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> border-radius(</Normal Text><Value>10px</Value><Normal Text>)</Normal Text><At Rule>;</At Rule><Normal Text> </Normal Text><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Comment>// Nesting</Comment><br/>
<dsNormal></dsNormal><br/>
<Selector Id>#home-page</Selector Id><Normal Text> </Normal Text><Property>{</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>    header </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>80%</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>margin:</Property><Normal Text> </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>auto</Value><Property>;</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>        </Normal Text><Selector Class>.cover</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>            </Normal Text><At Rule>@include</At Rule><Normal Text> border-radius(</Normal Text><Value>20px</Value><Normal Text>)</Normal Text><At Rule>;</At Rule><br/>
<Normal Text>            </Normal Text><Property>max-width:</Property><Normal Text> </Normal Text><Value>100%</Value><Property>;</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>            &</Normal Text><Selector Pseudo>:hover</Selector Pseudo><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>                </Normal Text><Property>background:</Property><Normal Text> </Normal Text><Value>#ffffff</Value><Property>;</Property><br/>
<Normal Text>            </Normal Text><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>            </Normal Text><Selector Class>.like-button</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>                </Normal Text><Property>font-size:</Property><Normal Text> </Normal Text><Variable>$default-font-size * 0.8</Variable><Property>;</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>                </Normal Text><Media>@media</Media><Normal Text> </Normal Text><Media>(max-width: </Media><Value>300px</Value><Media>) and (min-width: </Media><Value>200px</Value><Media>)</Media><Normal Text> </Normal Text><Media>{</Media><br/>
<Normal Text>                    font-size</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> </Normal Text><Variable>$default-font-size * 0.8;</Variable><br/>
<dsNormal></dsNormal><br/>
<Normal Text>                    </Normal Text><Selector Class>.icon</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>                        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>20px</Value><Property>;</Property><br/>
<Normal Text>                        </Normal Text><Property>height:</Property><Normal Text> </Normal Text><Value>20px</Value><Property>;</Property><br/>
<Normal Text>                    </Normal Text><Property>}</Property><br/>
<Normal Text>                </Normal Text><Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<Normal Text>                </Normal Text><Media>@media</Media><Normal Text> </Normal Text><Media>print {</Media><br/>
<Normal Text>                    display</Normal Text><Selector Pseudo>:</Selector Pseudo><Normal Text> none;</Normal Text><br/>
<Normal Text>                </Normal Text><Media>}</Media><br/>
<Normal Text>            </Normal Text><Property>}</Property><br/>
<Normal Text>        </Normal Text><Property>}</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Comment>// Extend and inheritance</Comment><br/>
<dsNormal></dsNormal><br/>
<Selector Class>.message</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>border:</Property><Normal Text> </Normal Text><Variable>$border-light</Variable><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>background-color:</Property><Normal Text> </Normal Text><Value>#f0f0f0</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Selector Class>.message-danger</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    @extend </Normal Text><Selector Class>.message</Selector Class><Normal Text>;</Normal Text><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Control structures</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>@mixin does-parent-exist </Normal Text><Property>{</Property><br/>
<Normal Text>    @if & </Normal Text><Property>{</Property><br/>
<Normal Text>        &</Normal Text><Selector Pseudo>:hover</Selector Pseudo><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>            </Normal Text><Property>color:</Property><Normal Text> </Normal Text><Value>red</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>}</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><Normal Text> @else </Normal Text><Property>{</Property><br/>
<Normal Text>        a </Normal Text><Property>{</Property><br/>
<Normal Text>            </Normal Text><Property>color:</Property><Normal Text> </Normal Text><Value>red</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>}</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Operators</Comment><br/>
<dsNormal></dsNormal><br/>
<Selector Class>.container</Selector Class><Normal Text> </Normal Text><Property>{</Property><Normal Text> </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>100%</Value><Property>;</Property><Normal Text> </Normal Text><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>article</Normal Text><Selector Attr>[role=</Selector Attr><String>"main"</String><Selector Attr>]</Selector Attr><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>  </Normal Text><Property>float:</Property><Normal Text> </Normal Text><Value>left</Value><Property>;</Property><br/>
<Normal Text>  </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>600px</Value><Normal Text> / </Normal Text><Value>960px</Value><Normal Text> * </Normal Text><Value>100%</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>aside</Normal Text><Selector Attr>[role=</Selector Attr><String>"complementary"</String><Selector Attr>]</Selector Attr><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>  </Normal Text><Property>float:</Property><Normal Text> </Normal Text><Value>right</Value><Property>;</Property><br/>
<Normal Text>  </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>300px</Value><Normal Text> / </Normal Text><Value>960px</Value><Normal Text> * </Normal Text><Value>100%</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</Comment><br/>
<dsNormal></dsNormal><br/>
<Variable>$color1</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> hsl(120deg, 100%, 50%);</Normal Text><br/>
<Variable>$color2</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> rgb(</Normal Text><Variable>$red, $green, blue($color1));</Variable><br/>
<Variable>$color3</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> mix(</Normal Text><Variable>$color1, $color2, [$weight]);</Variable><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Properties</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>html, body </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>font-family:</Property><Normal Text> </Normal Text><String>"Droid Sans"</String><Normal Text>, Arial, </Normal Text><Value>sans-serif</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>font-size:</Property><Normal Text> </Normal Text><Value>11pt</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>line-height:</Property><Normal Text> </Normal Text><Value>1.5em</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>max-width:</Property><Normal Text> </Normal Text><Value>300px</Value><Normal Text> + </Normal Text><Variable>$page-width - $gap / 2</Variable><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>background:</Property><Normal Text> </Normal Text><Variable>$bg_color</Variable><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>text-shadow:</Property><Normal Text> </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>2px</Value><Normal Text> </Normal Text><Value>rgba(0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>, $transparence</Normal Text><Value>)</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>box-sizing:</Property><Normal Text> </Normal Text><Value>border-box</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Selectors</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>blockquote </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>margin:</Property><Normal Text> </Normal Text><Value>0</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>header </Normal Text><Selector Id>#logo</Selector Id><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>100px</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>div</Normal Text><Selector Id>#footer</Selector Id><Normal Text> </Normal Text><Selector Class>.link</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>color:</Property><Normal Text> </Normal Text><Value>blue</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>sidebar </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Normal Text> input</Normal Text><Selector Attr>[type=</Selector Attr><String>"text"</String><Selector Attr>]</Selector Attr><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>font-size:</Property><Normal Text> </Normal Text><Value>20px</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>sidebar </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Selector Pseudo>:nth-child</Selector Pseudo><Normal Text>(2n + 1)</Normal Text><Selector Pseudo>:hover</Selector Pseudo><Normal Text> input</Normal Text><Selector Attr>[class*=</Selector Attr><String>"small-"</String><Selector Attr>]</Selector Attr><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>font-weight:</Property><Normal Text> </Normal Text><Value>bold</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Media Queries</Comment><br/>
<dsNormal></dsNormal><br/>
<Media>@media</Media><Normal Text> </Normal Text><Media>print {</Media><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>100%</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<Media>@media</Media><Normal Text> </Normal Text><Media>screen and (min-width: </Media><Value>768px</Value><Media>) {</Media><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>600px</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<Media>@media</Media><Normal Text> </Normal Text><Media>screen and (min-width: </Media><Value>768px</Value><Media>) and (max-width: </Media><Value>960px</Value><Media>) {</Media><br/>
<Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>720px</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Fontface</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@font-face</At Rule><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>font-family:</Property><Normal Text> MyHelvetica</Normal Text><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>src:</Property><Normal Text> </Normal Text><Value>local(</Value><String>"Helvetica Neue Bold"</String><Value>)</Value><Normal Text>,</Normal Text><br/>
<Normal Text>        </Normal Text><Value>local(</Value><String>"HelveticaNeue-Bold"</String><Value>)</Value><Normal Text>,</Normal Text><br/>
<Normal Text>        </Normal Text><Value>url(</Value><Normal Text>MgOpenModernaBold</Normal Text><Value>.</Value><Normal Text>ttf</Normal Text><Value>)</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>font-weight:</Property><Normal Text> </Normal Text><Value>bold</Value><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Comment>// Animation (Keyframes)</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>@keyframes slidein </Normal Text><Property>{</Property><br/>
<Normal Text>    from </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>margin-left:</Property><Normal Text> </Normal Text><Value>100%</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>300%</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>    to </Normal Text><Property>{</Property><br/>
<Normal Text>        </Normal Text><Property>margin-left:</Property><Normal Text> </Normal Text><Value>0%</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>100%</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Property>}</Property><br/>
