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