SCSS 調用筆記

標籤：cap   ...   sid   screen   return   link   ref   highlight   png   

/*常用*/$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 這裡就好像一個組件，給個param讓組件賦予樣式*/@mixin firefox-message($selector) {  body.firefox #{$selector}:before {    content: "Hi, Firefox users!";  }}@include firefox-message(".header");/*在p 裡設定變數*/p {  $font-size: 12px;  $line-height: 30px;  font: #{$font-size}/#{$line-height};}/*運算式*/p:before {  content: "I ate #{5 + 10} pies!";}/*這裏可以有包*/.example {  color: red;}#main {  @import "example";}/*不用刻意把media寫在外面，media 會去外面*/.sidebar {  width: 300px;  @media screen and (orientation: landscape) {    width: 500px;  }}/*extend 像是組合*/.error {  border: 1px #f00;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}/*這不好理解*/.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/#{$animal}.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); }/*... like 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 調用筆記