<beginfold id='3'>/*</beginfold id='3'>
 * SCSS Syntax Highlight Sample File (Standard)
 *
 * This file contains most SCSS syntax, CSS3 properties, advanced code structure.
 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-15
 <endfold id='3'>*/</endfold id='3'>

<beginfold id='3'>/*</beginfold id='3'>
 * Block comment
 *
 * Alert keywords:
 * TODO BUG FIXME
 <endfold id='3'>*/</endfold id='3'>

@charset "UTF-8";

@import "mixins/button";

<beginfold id='4'>//</beginfold id='4'> Variable define

$image-path:            "../../static/images";
$default-text-color:    #333 !default; <beginfold id='4'>//</beginfold id='4'> Default can be overrided
$default-font-size:     16px !default;
$default-font-family:   Roboto, "Droid Sans", sans-serif;
$default-font-weight:   400;
$default-line-height:   $default-font-size * 1.8;
$shadow-transparence:   0.25;
$box-shadow:            0 0 3px rgba(0,0,0,$shadow-transparence);
$page-width:            100rem; <beginfold id='4'>//</beginfold id='4'> kabab-case
$gapOfArticle:          20px;   <beginfold id='4'>//</beginfold id='4'> camelCase
$body_background_color: white;  <beginfold id='4'>//</beginfold id='4'> snake_case

<beginfold id='4'>//</beginfold id='4'> Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box <beginfold id='1'>{</beginfold id='1'> @include border-radius(10px); <endfold id='1'>}</endfold id='1'>

<beginfold id='4'>//</beginfold id='4'> Nesting

#home-page <beginfold id='1'>{</beginfold id='1'>

    header <beginfold id='1'>{</beginfold id='1'>
        width: 80%;
        margin: 0 auto;

        .cover <beginfold id='1'>{</beginfold id='1'>
            @include border-radius(20px);
            max-width: 100%;

            &:hover <beginfold id='1'>{</beginfold id='1'>
                background: #ffffff;
            <endfold id='1'>}</endfold id='1'>

            .like-button <beginfold id='1'>{</beginfold id='1'>
                font-size: $default-font-size * 0.8;

                @media (max-width: 300px) and (min-width: 200px) <beginfold id='5'>{</beginfold id='5'>
                    font-size: $default-font-size * 0.8;

                    .icon <beginfold id='1'>{</beginfold id='1'>
                        width: 20px;
                        height: 20px;
                    <endfold id='1'>}</endfold id='1'>
                <endfold id='5'>}</endfold id='5'>

                @media print <beginfold id='5'>{</beginfold id='5'>
                    display: none;
                <endfold id='5'>}</endfold id='5'>
            <endfold id='1'>}</endfold id='1'>
        <endfold id='1'>}</endfold id='1'>
    <endfold id='1'>}</endfold id='1'>
<endfold id='1'>}</endfold id='1'>

<beginfold id='4'>//</beginfold id='4'> Extend and inheritance

.message <beginfold id='1'>{</beginfold id='1'>
    border: $border-light;
    background-color: #f0f0f0;
<endfold id='1'>}</endfold id='1'>

.message-danger <beginfold id='1'>{</beginfold id='1'>
    @extend .message;
<endfold id='1'>}</endfold id='1'>


<beginfold id='4'>//</beginfold id='4'> Control structures

@mixin does-parent-exist <beginfold id='1'>{</beginfold id='1'>
    @if & <beginfold id='1'>{</beginfold id='1'>
        &:hover <beginfold id='1'>{</beginfold id='1'>
            color: red;
        <endfold id='1'>}</endfold id='1'>
    <endfold id='1'>}</endfold id='1'> @else <beginfold id='1'>{</beginfold id='1'>
        a <beginfold id='1'>{</beginfold id='1'>
            color: red;
        <endfold id='1'>}</endfold id='1'>
    <endfold id='1'>}</endfold id='1'>
<endfold id='1'>}</endfold id='1'>


<beginfold id='4'>//</beginfold id='4'> Operators

.container <beginfold id='1'>{</beginfold id='1'> width: 100%; <endfold id='1'>}</endfold id='1'>

article[role="main"] <beginfold id='1'>{</beginfold id='1'>
  float: left;
  width: 600px / 960px * 100%;
<endfold id='1'>}</endfold id='1'>

aside[role="complementary"] <beginfold id='1'>{</beginfold id='1'>
  float: right;
  width: 300px / 960px * 100%;
<endfold id='1'>}</endfold id='1'>


<beginfold id='4'>//</beginfold id='4'> Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html

$color1: hsl(120deg, 100%, 50%);
$color2: rgb($red, $green, blue($color1));
$color3: mix($color1, $color2, [$weight]);


<beginfold id='4'>//</beginfold id='4'> Properties

html, body <beginfold id='1'>{</beginfold id='1'>
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    max-width: 300px + $page-width - $gap / 2;
    background: $bg_color;
    text-shadow: 0 0 2px rgba(0,0,0, $transparence);
    box-sizing: border-box;
<endfold id='1'>}</endfold id='1'>


<beginfold id='4'>//</beginfold id='4'> Selectors

blockquote <beginfold id='1'>{</beginfold id='1'>
    margin: 0;
<endfold id='1'>}</endfold id='1'>

header #logo <beginfold id='1'>{</beginfold id='1'>
    width: 100px;
<endfold id='1'>}</endfold id='1'>

div#footer .link <beginfold id='1'>{</beginfold id='1'>
    color: blue;
<endfold id='1'>}</endfold id='1'>

sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='1'>{</beginfold id='1'>
    font-size: 20px;
<endfold id='1'>}</endfold id='1'>

sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='1'>{</beginfold id='1'>
    font-weight: bold;
<endfold id='1'>}</endfold id='1'>


<beginfold id='4'>//</beginfold id='4'> Media Queries

@media print <beginfold id='5'>{</beginfold id='5'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 100%;
    <endfold id='1'>}</endfold id='1'>
<endfold id='5'>}</endfold id='5'>

@media screen and (min-width: 768px) <beginfold id='5'>{</beginfold id='5'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 600px;
    <endfold id='1'>}</endfold id='1'>
<endfold id='5'>}</endfold id='5'>

@media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='5'>{</beginfold id='5'>
    .container <beginfold id='1'>{</beginfold id='1'>
        width: 720px;
    <endfold id='1'>}</endfold id='1'>
<endfold id='5'>}</endfold id='5'>


<beginfold id='4'>//</beginfold id='4'> Fontface

@font-face <beginfold id='1'>{</beginfold id='1'>
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
<endfold id='1'>}</endfold id='1'>

<beginfold id='4'>//</beginfold id='4'> Animation (Keyframes)

@keyframes slidein <beginfold id='1'>{</beginfold id='1'>
    from <beginfold id='1'>{</beginfold id='1'>
        margin-left: 100%;
        width: 300%;
    <endfold id='1'>}</endfold id='1'>

    to <beginfold id='1'>{</beginfold id='1'>
        margin-left: 0%;
        width: 100%;
    <endfold id='1'>}</endfold id='1'>
<endfold id='1'>}</endfold id='1'>
