scss
scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，使用scss可以很方便的提高开发效率
scss语法以.scss文件后缀结尾，其中语法格式有两种sass,scss,两种语法在书写风格有差异，如下代码所示
scss
|
1 2 3 4 5 6 7 |
.container { width: 100px; height: 100%; .nav { width: 100px; } } |
sass
|
1 2 3 4 5 |
.container width: 100px; height: 100%; .nav width: 100px; |
语法
嵌套规则 (常用)
scss允许将一套css样式嵌入另一套样式中，外层的容器将作为内层容器的父选择器，如下代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.container { width: 500px; height: 100px; header { width: 100%; height: 20%; } main { width: 100%; height: 20%; } footer { width: 100%; height: 20%; } } |
编译后
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.container { width: 500px; height: 100px; } .container header { width: 100%; height: 20%; } .container main { width: 100%; height: 20%; } .container footer { width: 100%; height: 20%; } |
父选择器 (常用)
有时需要在内层样式内选择外层的父元素，那么就可以使用&符号，如下代码所示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.container { width: 500px; height: 100px; &_header { width: 100%; height: 20%; &:hover { color: red($color: #000000); } } &_main { width: 100%; height: 20%; &:disabled { color: red; } } &_footer { width: 100%; height: 20%; &::after { position: absolute; content: ''; } } } |
编译后
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.container { width: 500px; height: 100px; } .container_header { width: 100%; height: 20%; } .container_header:hover { color: 0; } .container_main { width: 100%; height: 20%; } .container_main:disabled { color: red; } .container_footer { width: 100%; height: 20%; } .container_footer::after { position: absolute; content: ''; } |
属性简写 (不常用)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.container { width: 500px; height: 100px; font: { family: fantasy; size: 30em; weight: bold; } background: { image: url('xxx'); size: 100%; } } |
编译后
|
1 2 3 4 5 6 7 8 9 |
.container { width: 500px; height: 100px; font-family: fantasy; font-size: 30em; font-weight: bold; background-image: url('xxx'); background-size: 100%; } |
变量 (常用)
scss中使用$符号定义变量
- 全局变量
在scss文件顶部定义的变量，为全局变量
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$font-color: red; $font-size: 18px; $font-size-base: $font-size;
.text { color: $font-color; font-size: $font-size; }
span { font-size: $font-size-base; } |
编译后
|
1 2 3 4 5 6 7 8 |
.text { color: red; font-size: 18px; }
span { font-size: 18px; } |
- 局部变量
在属性内定义的变量为块级变量
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.text { $font-color: red; $font-size: 18px; $font-size-base: $font-size; h1 { color: $font-color; font-size: $font-size; span { color: $font-color; font-size: $font-size; } } } |
编译后
|
1 2 3 4 5 6 7 8 |
.text h1 { color: red; font-size: 18px; } .text h1 span { color: red; font-size: 18px; } |
运算 (常用)
scss中支持+ - * /运算
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$base-width: 10; $small-width: 30; $large-width: $base-width + $small-width;
.div { width: $large-width + px; }
.div1 { width: $small-width - $base-width + px; }
.div2 { width: $small-width * $base-width + px; }
.div2 { width: calc($small-width / $base-width) + px; } |
编译后
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.div { width: 40px; }
.div1 { width: 20px; }
.div2 { width: 300px; }
.div2 { width: 3px; } |
@extend
scss允许使用@extend集成其他样式规则
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.item { width: 100%; height: 20%; background-color: red; }
.item-1 { @extend .item; border: 1px solid blue; }
.item-2 { @extend .item; border: 2px solid blue; } |
编译后
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.item, .item-2, .item-1 { width: 100%; height: 20%; background-color: red; }
.item-1 { border: 1px solid blue; }
.item-2 { border: 2px solid blue; } |
@if
当条件满足时，输入对应的样式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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; } } |
编译后
|
1 2 3 4 5 6 7 |
p { border: 1px solid; }
p { color: green; } |
@for
- 语法一：@for $var from <start> through <end>从start开始，包含end
|
1 2 3 4 5 |
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } |
编译后
|
1 2 3 4 5 6 7 8 9 10 11 |
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; } |
- 语法二：@for $var from <start> to <end>从start开始，不包含end
|
1 2 3 4 5 |
@for $i from 1 to 3 { .item-#{$i} { width: 2em * $i; } } |
编译后
|
1 2 3 4 5 6 7 |
.item-1 { width: 2em; }
.item-2 { width: 4em; } |
