1. 参考
  2. 安装
  3. SCSS/SASS的区别
  4. 常用语法(SCSS)
    1. 变量
    2. 嵌套
    3. 父选择器
    4. 导入SCSS/SASS文件
    5. 混合器
    6. 继承

SASS

参考

SCSS快速入门
SCSS与Sass异同

安装

SASS基于Ruby语言,因此需先安装Ruby
windows下建议使用rubyinstaller安装Ruby

安装SASS

1
gem install 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
body {
div {
background: #ff0;
}
}

编译后

1
2
3
body div {
background: #ff0;
}

如果想使用子元素/同层元素等选择器(> + ~),只需把选择器写在内部元素前

1
2
3
4
5
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
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,其内容为

1
2
3
p {
backround: #ff0;
}

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