Sass是什么
- 一种 css 预处理器和一种语言
- 是一个将脚本解析成CSS的脚本语言，即SassScript
- 通过定义一套新的语法规则和函数，以加强和提升CSS
- 增加了变量，继承，函数等特性
使用@import命令，来引入外部文件
@import "path/filename.scss";
SASS允许使用变量，所有变量以$开头
$blue : #1875e7;
div {
color : $blue;
}
//如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
SASS允许嵌套
//选择器嵌套
div h1 {
color : red;
}
//等价于
div {
h1 {
color:red;
}
}
//属性嵌套，比如border-color属性(border后面必须加上冒号)
p {
border: {
color: red;
}
}
//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
SASS允许继承，使用@extend命令
//选择器继承
比如，class2要继承class1，就要：
.class2 {
@extend .class1;
font-size:120%;
}
SASS允许使用@mixin命令，定义一个代码块（类似于宏定义），使用@include命令，调用这个mixin
@mixin left {
float: left;
}
div {
@include left;
}
//mixin的强大之处，在于可以指定参数和缺省值
@mixin left($value: 10px) {
margin-right: $value;
}
//使用的时候，根据需要传入参数
div {
@include left(20px);
}
下面是一个mixin的实例，用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
SASS允许使用判断
//可以使用@if和@else来判断
@if lightness($color) > 30% {
background-color: #000;
}
@else {
background-color: #fff;
}
SASS允许使用@for，@while，@each进行循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
SASS允许使用算式
body {
margin: (14px/2);
top: 50px + 100px;
}
SASS允许自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
