[TOC] ## 安裝 Windows 系統需要先安裝 Ruby ##使用 `sass input.scss output.css` ### 監聽整個目錄 `sass --watch app/sass:public/stylesheets` ## CSS 功能拓展 ### 嵌套規則 ``` #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ``` ### 父選擇器 & ``` a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } //or #main { color: black; &-sidebar { border: 1px solid; } } ``` ### 屬性嵌套 font-family, font-size, font-weight 都以 font 作為屬性的命名空間 ``` .funky { font: { family: fantasy; size: 30em; weight: bold; } } ``` ### 互動命令行 ``` $ sass -i >> "Hello, Sassy World!" "Hello, Sassy World!" >> 1px + 1px + 1px 3px >> #777 + #777 #eeeeee >> #777 + #888 white ``` ### 變量 $ **變量支持塊級作用域**，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加`!global`聲明 ``` $width: 5em; #main { width: $width; } //聲明全局 #main { $width: 5em !global; width: $width; } #sidebar { width: $width; } ``` ### 數據類型 * 數字，`1, 2, 13, 10px` * 字符串，有引號字符串與無引號字符串，`"foo", 'bar', baz` * 顏色，`blue, #04a3f9, rgba(255,0,0,0.5)` * 布爾型，`true, false` * 空值，`null` * 數組 (list)，用空格或逗號作分隔符，`1.5em 1em 0 2em, Helvetica, Arial, sans-serif` * maps, 相當于 JavaScript 的 object，`(key1: value1, key2: value2)` #### 字符串 (Strings) ``` @mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; } } @include firefox-message(".header"); ``` ### 運算 #### 數字運算 ``` p { width: 1in + 8pt; } //轉為 p { width: 1.111in; } ``` #### 除法運算 / ``` p { font: 10px/8px; // Plain CSS, no division $width: 1000px; width: $width/2; // Uses a variable, does division width: round(1.5)/2; // Uses a function, does division height: (500px/2); // Uses parentheses, does division margin-left: 5px + 8px/2px; // Uses +, does division } ``` #### 顏色值運算 ``` p { color: #010203 + #040506; } //計算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09 p { color: #050709; } ``` #### 圓括號 圓括號可以用來影響運算的順序： ``` p { width: 1em + (2em * 3); } ``` ### 函數 SassScript 定義了多種函數，有些甚至可以通過普通的 CSS 語句調用： ``` p { color: hsl(0, 100%, 50%); } //轉 p { color: #ff0000; } ``` ### 插值語句 #{} ``` $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } //轉 p.foo { border-color: blue; } ``` ### @import ``` @import "foo.scss"; //或 @import "foo"; ``` ### @extend ``` .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } ``` #### 多重 ``` .error { border: 1px #f00; background-color: #fdd; } .attention { font-size: 3em; background-color: #ff0; } .seriousError { @extend .error; @extend .attention; border-width: 3px; } ``` #### 繼續延伸 ``` .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } .criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } ``` ### @if ``` p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } ``` ``` $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //轉 p { color: green; } ``` ### @for ``` @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //轉 .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } ``` ### @mixin #### 定義混合指令 ``` @mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; } //混合也需要包含選擇器和屬性，甚至可以用 & 引用父選擇器： @mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } } ``` #### 引用混合樣式 @include ``` .page-title { @include large-text; padding: 4px; margin-top: 10px; } // 編譯為 .page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; } ``` #### 參數(可賦默認值) ``` @mixin sexy-border($color, $width:1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); } //轉 p { border-color: blue; border-width: 1in; border-style: dashed; } ``` ##### 參數數課變 如 box-shadow ``` @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); } //轉 .shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; } ``` ### 函數指令 ``` $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } // 轉 #sidebar { width: 240px; } ```