sass入门初体验

接上文less入门初体验,接下来讲讲sasssass有两种文件后缀名,一种是.sass,另一种是.scss。前者类似于ruby的语法规则,没有花括号,没有分号,具有严格的缩进;而后者更贴近于css的语法规则,易于阅读,更具语义性,所以本文采用.scss后缀名来编写sass代码

编译


1、Ruby:
sass是由Ruby语言编写的,所以我们可以通过Ruby来编辑sass代码,首先需要安装ruby,然后再安装sass,之后通过sass命令编译文件

1
2
3
sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四个编译风格的选项:

nested:嵌套缩进的css代码,默认值
expanded:没有缩进的、扩展的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码

生产环境中一般使用最后一个

1
sass --style compressed style.scss style.css

变量


变量使用以$开头(这也是我喜爱sass多于less的原因,谁不喜欢money呢?O(∩_∩)O哈哈~,开个玩笑),如果变量需要在字符串中使用,只需要写在#{}中即可

1
2
3
4
5
6
7
$color:#999;
$side:left;
$bw:2px;
div {
background-color: $color;
border-#{$side}-width: $bw;
}

编译后:

1
2
3
4
div {
background-color: #999;
border-left-width: 2px;
}

Mixin(混合)


实现代码块的重用,使用@mixin定义一个代码块,通过@include就可以调用此代码块

1
2
3
4
5
6
7
8
9
10
11
@mixin b_r($radius:5px){
-webkit-border-radius:$radius;
-mz-border-radius:$radius;
border-radius:$radius;
}
div1{
@include b_r();
}
div2{
@include b_r(10px);
}

编译后:

1
2
3
4
5
6
7
8
9
10
11
div1 {
-webkit-border-radius: 5px;
-mz-border-radius: 5px;
border-radius: 5px;
}
div2 {
-webkit-border-radius: 10px;
-mz-border-radius: 10px;
border-radius: 10px;
}

嵌套


less类似,不多介绍

1
2
3
4
5
6
7
8
9
div {
background-color: #333;
a {
text-decoration: none;
&:hover {
color: red;
}
}
}

编译后:

1
2
3
4
5
6
7
8
9
div {
background-color: #333;
}
div a {
text-decoration: none;
}
div a:hover {
color: red;
}

运算


less类似,不多介绍

1
2
3
4
5
6
7
$w:1000px;
body {
width: $w/2;
div {
height: 100px*5;
}
}

编译后:

1
2
3
4
5
6
body {
width: 500px;
}
body div {
height: 500px;
}

颜色函数


1
2
3
4
div {
color: lighten(#ccc, 10%);
background-color: darken(#999, 10%);
}

编译后:

1
2
3
4
div {
color: #e6e6e6;
background-color: gray;
}

注释


1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Hello Sass 我依然在这里 */
div1 {
color: red;
}
// Hello Sass 我不见了
div2 {
color: green;
}
/*! Hello Sass 即使压缩了,我依然还在 */
div3 {
color: blue;
}

编译后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@charset "UTF-8";
/* Hello Sass 我依然在这里 */
div1 {
color: red;
}
div2 {
color: green;
}
/*! Hello Sass 即使压缩了,我依然还在 */
div3 {
color: blue;
}

如果您觉得我的文章对您有用,请随意打赏。

您的支持将鼓励我继续创作!

¥ 打赏支持

文章导航

目录

×
  1. 1. 编译
  2. 2. 变量
  3. 3. Mixin(混合)
  4. 4. 嵌套
  5. 5. 运算
  6. 6. 颜色函数
  7. 7. 注释