[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; } ```