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