SCSS基本用法

发表于 | 更新于 | 分类于

正如很多人了解到的一样，CSS并不能算是编程语言，而类似于HTML是一类标记语言，所以无论是开发还是维护都相当不友好，但是CSS预处理器（css preprocessor）的出现很好的解决了问题。CSS预处理器定义了新的编程语言来进行网页设计，然后编译为正常的CSS，极大的简化了CSS代码，使其可读性更强，更易于开发与维护。目前最主流的 CSS预处理器有 Less、Sass及Stylus，而 SCSS 是 Sass 3 引入新的语法，完全兼容 CSS3，并且 SCSS 与 CSS 书写语法类似，以大括号及分号替代了 Sass 的严格缩进式语法规格，更加方便掌握。在此简单记录 SCSS 用法，方便需要时参考。

安装

Sass是基于Ruby语言写的，所以需要先安装Ruby，官网下载需要的版本直接安装
然后在cmd中输入
gem install sass
安装Sass

SCSS语法

变量

  • 局部变量：在元素内部声明的变量，只有在元素内部调用
  • 全局变量：在元素外部声明的变量，可以在全局调用

声明变量

1
2
3
/*scss*/
$bg_color: #000; 
$font_color: #999;

引用变量

1
2
3
4
5
/*scss*/
div {
  background: $bg_color;
  color: $font_color;
}

编译后的css：

1
2
3
4
**css**
div {
  background: #000;
  color: #999;}

将局部变量转换为全局变量可以添加 !global 来声明：

1
2
3
4
5
6
7
8
/*scss*/
.header {
  $font_color: #999 !global;
  color: $font_color;
}
.main {
  color: $font_color;
}

编译后的css：

1
2
3
4
5
**css**
.header {
    color: #999;}
.main {
    color: #999;}

嵌套

选择器嵌套

1
2
3
<div class="box1">
    <div class="box2"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
/*scss*/
.box1 {
  height: 90px;
  width: 90px;
  background: yellow;
  .box2 {
    height: 60px;
    width: 60px;
    background: green;
  }  
}

编译为css：

1
2
3
4
5
6
7
8
9
**css**
.box1 {
  height: 90px;
  width: 90px;
  background: yellow;}
  .box1 .box2 {
    height: 60px;
    width: 60px;
    background: green;}

属性嵌套

1
2
3
4
5
6
7
/*scss*/
div {
  font:{
    size: 20px;
    weight: bold;
  }
}

编译后的css：

1
2
3
4
**css**
div {
  font-size: 20px;
  font-weight: bold;}

伪类嵌套

1
2
3
4
5
6
7
/*scss*/
p {
  color: #999;
  &:hover {
    text-decoration: underline; 
  }
}

编译后的css：

1
2
3
4
5
**css**
p {
  color: #999;}
p:hover {
  text-decoration: underline; }

插值

1
2
3
4
5
/*scss*/
$d_t: top;
div {
  margin-#{$d_t}: 10px;
}

编译后的css：

1
2
3
**css**
div {
  margin-top: 10px;}

混合宏

不带参混合宏

声明不带参混合宏

1
2
3
4
/*scss*/
@mixin font_w {
  font-weight: bold;
}

调用不带参混合宏

1
2
3
4
/*scss*/
.text {
  @font_w;
}

编译后的css：

1
2
3
**css**
.text {
  font-weight: bold;}

带参混合宏

声明带参混合宏

1
2
3
4
/*scss*/
@mixin font_w($font-weight: blod) {
  font-weight: $font-weight;
}

调用带参混合宏、传值

1
2
3
4
5
6
7
/*scss*/
.text1 {
  @include font_w;
}
.text2 {
  @include font_w(bolder);
}

编译后的css：

1
2
3
4
5
**css**
.text1 {
  font-weight: bold;}
.text2 {
  font-weight: bolder;}

继承

SCSS允许一个选择器继承另一个选择器属性

1
2
3
4
5
6
7
8
/*scss*/
.text1 {
  color: #fff;
  font-weight: bold;
}
.text2 {
  @extend .text1;
}

编译后的css：

1
2
3
4
5
6
7
**css**
.text1 {
  color: #fff;
  font-weight: bold;}
.text2 {
  color: #fff;
  font-weight: bold;}

占位符

用占位符声明代码，然后用@extend调用

1
2
3
4
5
6
7
8
/*scss*/
%text_style {
  color: #fff;
  font-weight: bold;
}
.text1 {
  @extend %text_style; 
}

编译后的css：

1
2
3
4
**css**
.text1 {
  color: #fff;
  font-weight: bold;}

注释

/*注释*/会保留到编译后的文件
//注释只保留在SCSS源文件中，编译后被省略

导入

在 SCSS文件中，导入 main.scss

1
2
3
4
/*scss*/
@import "SCSS文件路径/main.scss";
// 或者
@import "SCSS文件路径/main";

在 SCSS文件中，导入 style.css

1
2
/*scss*/
@import "CSS文件路径/style.css";

运算

1
2
3
4
5
6
7
8
9
/*scss*/
.div1 {
  width: 10px + 10px；
  height： 20px - 10px；
}
.div2 {
  width: 10px * 2;
  height: (20px/2);
}

编译后的css：

1
2
3
4
5
6
7
**css**
.div1 {
  width: 20px;
  height: 10px;}
.div2 {
  width: 20px;
  height: 10px;}

注意：

  • 不同类型的单位做加、减会报错
  • 带单位的值相乘、相除会报错
  • 带相同单位的值相除不会报错，但会产生一个无单位的数

其他

如果需要在SCSS中正确显示中文注释，必须加入

1
2
/*scss*/
@charset= "UTF-8";

编译

普通编译

假设 SCSS文件为 main.scss，需要输出的 CSS文件为 style.css
在cmd中输入
sass SCSS文件路径/main.scss:CSS输出文件路径/style.css
SASS提供四个编译方法（输出样式）

  • nested：嵌套输出，默认值
  • expanded：展开输出
  • compact：紧凑输出
  • compressed：压缩输出

main.scss：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*main.scss*/
.box1 {
  height: 90px;
  width: 90px;
  background: yellow;
  .box2 {
    height: 60px;
    width: 60px;
    background: green;
    .box3 {
      height: 30px;
      width: 30px;
      background: greenyellow;
    }
  }
}

nested

在cmd中输入
sass main.scss:style.css --style nested
编译后的css：

1
2
3
4
5
6
7
8
9
10
11
12
13
//style.css
.box1 {
  height: 90px;
  width: 90px;
  background: yellow;}
  .box1 .box2 {
    height: 60px;
    width: 60px;
    background: green;}
    .box1 .box2 .box3 {
      height: 30px;
      width: 30px;
      background: greenyellow;}

expanded

在cmd中输入
sass main.scss:style.css --style expanded
编译后的css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
style.css
.box1 {
  height: 90px;
  width: 90px;
  background: yellow;
}
.box1 .box2 {
  height: 60px;
  width: 60px;
  background: green;
}
.box1 .box2 .box3 {
  height: 30px;
  width: 30px;
  background: greenyellow;
}

compact

在cmd中输入
sass main.scss:style.css --style compact
编译后的css：

1
2
3
4
//style.css
.box1 { height: 90px; width: 90px; background: yellow; }
.box1 .box2 { height: 60px; width: 60px; background: green; }
.box1 .box2 .box3 { height: 30px; width: 30px; background: greenyellow;}

compressed

在cmd中输入
sass main.scss:style.css --style compressed
编译后的css：
.box1{height:90px;width:90px;background:yellow}.box1 .box2 {height:60px;width:60px;background:green}.box1 .box2 .box3 {height:30px;width:30px;background:greenyellow}

自动编译

让SCSS监听某个文件或目录，自动编译。如修改style.scss会自动编译生成style.css
sass --watch Sass文件路径/style.scss:CSS输出文件路径/style.css