變量聲明 `$color:#FFFFFF;` `$fancybox-width: 400px !default;` 嵌套 ~~~ #id { h1{color:#000000;} .red{background: #8F8F94;font-size: 14px;} } #id h1{color:#000} #id .red{background:#8f8f94;font-size:14px} ~~~ 父選擇器標識符 & ~~~ article a { color: blue; &:hover { color: red } } article a{color:#00f} article a:hover{color:red} ~~~ 群組嵌套 ~~~ .container { h1, h2, h3 {margin-bottom: .8em} } .container h1, .container h2, .container h3 { margin-bottom: .8em; } ~~~ 屬性嵌套 ~~~ nav { border: 1px solid #ccc { left: 0px; right: 0px; } } nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; } ~~~ 導入style.scss文件 `@import "style"` 混合器 ~~~ @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } @mixin test($b:0){ .margin#{$b}-t{margin-top:#{$b}px;} .margin#{$b}-r{margin-right:#{$b}px;} .margin#{$b}-b{margin-bottom:#{$b}px;} .margin#{$b}-l{margin-left:#{$b}px;} .margin#{$b}{margin:#{$b}px;} .padding#{$b}-t{padding-top:#{$b}px;} .padding#{$b}-r{padding-right:#{$b}px;} .padding#{$b}-b{padding-bottom:#{$b}px;} .padding#{$b}-l{padding-left:#{$b}px;} .padding#{$b}{padding:#{$b}px;} } .notice { @include rounded-corners; } @mixin qq($a:1,$b){ //支持默認值或外部變量 } ~~~ 繼承 ~~~ .error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } ~~~ 插值語句 ~~~ #{$name} ~~~ ~~~ @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } .item-1{width:2em}.item-2{width:4em}.item-3{width:6em} ~~~ ~~~ @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background:#008000; } } .puma-icon{background:green}.sea-slug-icon{background:green}.egret-icon{background:green}.salamander-icon{background:green} ~~~