SASS
-
配置环境
sass是基于Ruby;
安装Ruby，在命令行输入以下命令
gem install sass - 编译
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
- 基本语法
- 变量
//sass允许使用变量，所有变量以$开头。
$operator : #1875e7;
div {
color : $operator;
}
$side : left;
//如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.rounded {
border-#{$side}-radius: 5px;
}
- 计算功能
$var : 1;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
- 嵌套
//SASS允许选择器嵌套。比如，下面的CSS代码：
div h1 {
color : red;
}
//可以写成：
div {
hi {
color:red;
}
}
//属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
//注意，border后面必须加上冒号。
//在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
- 注释
同javascript - 代码的重用
- 继承
.exception{
border:1px #000 solid;
}
.operator{
@extend .exception;
}
