参考
SCSS快速入门
SCSS与Sass异同
安装
SASS基于Ruby语言,因此需先安装Ruby
windows下建议使用rubyinstaller安装Ruby
安装SASS
其他命令
1
2
3
4
5
6
| // 升级sass
gem update sass
// 版本
sass -v
// 帮助
sass -h
|
SCSS/SASS的区别
SCSS是SASS 3的语法升级,最大的区别为SASS使用缩进表示层级关系,SCSS则是使用大括号表示层级关系
SCSS完全兼容CSS3语法,因此建议使用SCSS
常用语法(SCSS)
变量
SCSS以$开头表示一个变量,与CSS属性不同,SASS变量可以定义在声明块外
SASS变量有作用域.在声明块内定义的SASS不能在声明块外使用
1
2
3
4
5
6
7
| $heighlight-color: #ff0;
div {
$border-width: 1px;
background-color: $heighlight-color;
// 变量可以作为属性值的一部分
border: $border-width solid black;
}
|
编译后
1
2
3
4
| div {
background-color: #ff0;
border: 1px solid black;
}
|
嵌套
SCSS样式可以用嵌套的形式表示层级关系
1
2
3
4
5
6
| body {
div {
background: #ff0;
}
}
|
编译后
1
2
3
| body div {
background: #ff0;
}
|
如果想使用子元素/同层元素等选择器(> + ~),只需把选择器写在内部元素前
1
2
3
4
5
6
| body {
> div {
background: #ff0;
}
}
|
编译后
1
2
3
| body > div {
background: #ff0;
}
|
父选择器
父选择器常用于设置伪类/伪元素样式
1
2
3
4
5
6
7
8
| body {
&:hover{
background: #ff0;
}
&[class|="en"] {
background: #f00;
}
}
|
编译后
1
2
3
4
5
6
7
| body:hover {
background: #ff0;
}
body[class|="en"] {
background: #f00;
}
|
导入SCSS/SASS文件
和css类似,直接使用@import导入.SCSS/SASS文件.被导入文件名建议以下划线开头(_)
1
2
3
| @import "_header.scss"
// 也可以省略后缀
@import "_header"
|
@import 可以在声明块内使用,sass会自动生成嵌套样式
假设有文件_test.scss,其内容为
将_test.scss导入到其他样式规则内
1
2
3
| div {
@import "_test.scss"
}
|
编译后
1
2
3
| div p{
backround: #ff0;
}
|
混合器
混合器的作用是复用常用样式
使用@mixin定义,用@include调用
1
2
3
4
5
6
7
8
9
| @mixin title {
text-align: center;
a {
color: #ff0;
}
}
span {
@include title;
}
|
编译后
1
2
3
4
5
6
| span {
text-align: center;
}
span a {
color: #ff0;
}
|
也可以向混合器传入参数
1
2
3
4
5
6
7
8
9
| @mixin heighlight-text($link-color) {
color: #ff0;
a {
color: $link-color;
}
}
div {
@include heighlight-text($link-color: #f00);
}
|
编译后
1
2
3
4
5
6
| div {
color: #ff0;
}
div a {
color: #f00;
}
|
继承
使用@extend继承另一个选择器的所有样式
1
2
3
4
5
6
7
8
| .guide {
border:1xp solid black;
background: #ff0;
}
.selected {
@extend .guide;
background: #f00;
}
|
编译后
1
2
3
4
5
6
7
| div, .selected {
border: 1xp solid black;
background: #ff0;
}
.selected {
background: #f00;
}
|