SCSS Adjustment Notebook

/* Common */$family: unquote ("Droid+sans"), @import url ("http://fonts.googleapis.com/css?family=#{$family}"); $family: Unquote ("droid+sans+2"); @import url ("http://fonts.googleapis.com/css?family=#{$family}");/*mixin here is like a component,   Give a param the component to style */@mixin firefox-message ($selector) {Body.firefox #{$selector}:before {content: "Hi, Firefox users!";  }} @include Firefox-message (". Header");/* Set Variable */p {$font-size:12px in P;  $line-height:30px; Font: #{$font-size}/#{$line-height};} /* Expression */p:before {content: "I ate #{5 + ten} pies!";} /* This can have a package */.example {color:red;} #main {@import "example";}  /* Do not deliberately write media outside, media will go outside */.sidebar {width:300px;  @media screen and (Orientation:landscape) {width:500px;  }}/*extend like a */.error {border:1px #f00; Background-color: #fdd;}.  Seriouserror {@extend. Error; border-width:3px;} /* This does not understand */.hoverlink {@extend a:hover;}. Comment A.user:hover {font-weight:bold;}  /* @if, @else if */$type: monster;p {@if $type = = Ocean {color:blue; } @else If $type = = Matador {color:red;  } @else If $type = = Monster {color:green;  } @else {color:black; }}/* @for */@for $i from 1 through 3 {. item-#{$i} {width:2em * $i;}} /* @each */@each $animal in Puma, Sea-slug, Egret, salamander {. #{$animal}-icon {background-image:url ('/images/#{$ani  Mal}.png ');  }}/* @while */$i: 6; @while $i > 0 {. item-#{$i} {width:2em * $i;} $i: $i-2;}    /* @mixin pass param, defaut value is 1px*/@mixin sexy-border ($color, $width: 1px) {border: {color: $color;    Width: $width;  style:dashed; }}p {@include Sexy-border (blue, 2px);} /* ecma*/@mixin Box-shadow ($shadows ...)  {-moz-box-shadow: $shadows;  -webkit-box-shadow: $shadows; Box-shadow: $shadows;}. Shadows {@include Box-shadow (0px 4px 5px #666, 2px 6px 10px #999);}  /*2nd example*/@mixin Colors ($text, $background, $border) {color: $text;  Background-color: $background; Border-color: $border;} $values: #ff0000, #00ff00, #0000ff;. Primary {@include colors ($values ...);}/*function & return */$grid-width:40px; $gutter-width:10px; @function grid-width ($n) {@return $n * $grid-width + ($ n-1) * $gutter-width;} #sidebar {width:grid-width (5);}

　　

SCSS Adjustment Notebook