摘要
本文主要讲述了：
- 注释
- 变量
- 选择器嵌套
- 局部文件
@import- mixin
- 占位符选择器
@extend
正文
注释
Sass 支持 2 种注释风格：
变量
Sass 使用$创建变量。
Sass
示例
源文件：
1
2
3
4
5
6
| $font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
|
输出：
1
2
3
4
| body {
font: 100% Helvetica, sans-serif;
color: #333;
}
|
SCSS
示例
源文件：
1
2
3
4
5
6
7
| $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
|
输出：
1
2
3
4
| body {
font: 100% Helvetica, sans-serif;
color: #333;
}
|
选择器嵌套
Sass
示例
源文件：
1
2
3
4
5
6
7
8
9
10
11
| nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
|
输出：
1
2
3
4
5
6
7
8
9
10
11
12
13
| nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
|
SCSS
示例
源文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
|
输出：
1
2
3
4
5
6
7
8
9
10
11
12
13
| nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
|
局部文件
局部文件相当于一组独立的样式模块，用于被其他 Sass 文件通过@import引入并合并。
局部文件的文件名以_开头。
Sass
示例
_reset.sass
1
2
3
4
5
6
| html,
body,
ul,
ol
margin: 0
padding: 0
|
SCSS
示例
_reset.scss
1
2
3
4
5
6
7
| html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
|
@import
CSS 中的@import通过在浏览器中创建额外的网络请求来引入新的 CSS 文件。
Sass 中的@import在本地编译时直接将多个文件合并成一个以节省网络请求。
注意：
- 在 Sass 中使用
@import时，文件扩展名是可选的。
@import局部文件时，局部文件名中的_可以不写。
Sass
示例
源文件：
base.sass
1
2
3
| @import reset
body
margin: 0
|
_reset.sass
1
2
3
4
5
6
| html,
body,
ul,
ol
margin: 0
padding: 0
|
输出：
1
2
3
4
5
6
7
8
9
10
| html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
|
SCSS
示例
源文件：
base.scss
1
2
3
4
| @import 'reset';
body {
margin: 0;
}
|
_reset.scss
1
2
3
4
5
6
7
| html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
|
输出：
1
2
3
4
5
6
7
8
9
10
| html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
margin: 0;
}
|
mixin
Sass 中的 mixin 支持传入参数
Sass
Sass 使用=创建 mixin，使用+使用 mixin
示例
源文件：
1
2
3
4
5
6
7
| =transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
|
输出：
1
2
3
4
5
| .box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
|
SCSS
SCSS 使用@mixin创建 mixin，使用@include使用 mixin
示例
源文件：
1
2
3
4
5
6
7
8
9
| @mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}
|
输出：
1
2
3
4
5
| .box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
|
占位符选择器
占位符选择器长得很像 class 选择器，但它以%作为开头且它不包含在 CSS 输出里。
占位符选择器用于被@extend扩展。
Sass
示例
1
2
3
4
| %message-shared
border: 1px solid #ccc
padding: 10px
color: #333
|
SCSS
示例
1
2
3
4
5
| %message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
|
@extend
@extend用于扩展占位符选择器。
Sass
示例
源文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| %message-shared
border: 1px solid #ccc
padding: 10px
color: #333
%equal-heights
display: flex
flex-wrap: wrap
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
.error
@extend %message-shared
border-color: red
.warning
@extend %message-shared
border-color: yellow
|
输出：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .message,
.success,
.error,
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
|
SCSS
示例
源文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| %message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
|
输出：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .message,
.success,
.error,
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
|
参考资料
本文对你有帮助？请支持我
支付宝
微信