Sass 基本使用方法

这几天自己闲来无事就一直都在研究 Sass/Scss，这次就把 Sass/Scss 的使用方法整理了一下，感兴趣的就和我一起来看看吧。

# 1、Sass 简单介绍

Sass实际上就是一种 CSS 的开发工具，有人就叫做"CSS预处理器"（css preprocessor）。它的基本思想就是用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass 有两种后缀名文件：一种后缀名为 .sass，不使用大括号和分号；另一种就是我们这里使用的 Scss 文件，这种和我们平时写的 CSS 文件格式差不多，使用大括号和分号。

注意

注意：本文中所说的所有 Sass 文件都指后缀名为 .scss 的文件。

# 2、Sass 的基本使用

# 2.1、变量声明使用

/* 变量的声明 */
$highlight-color: #999;
/* 变量引用 */
nav {
  $width: 100px;
  width: $width;
  color: $highlight-color;
}

/* 编译后 */
nav {
  width: 100px;
  color: #09C;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.2、嵌套使用

选择器嵌套

.content {
  p {
    width: 100px;
  }
  .article {
    h1 { 
      color: #333 
    }
  }
}

/* 编译后 */
.content p {width: 100px;}
.content .article h1 {color: #333 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

属性嵌套

p{
    border:{
        color:red;
    }
}

/* 编译后 */
p{
    border-color:red;
}

1
2
3
4
5
6
7
8
9
10

# 2.3、代码注释

Sass共有两种注释方式。一种是标准的 CSS 注释，会保留到编译后的文件。另一种是单行注释只保留在SASS源文件中，编译后被省略。

/* p { width: 100px; } */    //标准注释
// p { width: 100px; }        //单行注释

1
2

另外，在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，例：

/*! p { width: 100px; } */   重要注释

# 2.4、代码继承

选择器继承可以通过@extend语法实现。

.class {
  border: 3px solid blue;
  background-color: #09C;
}
#content .inner {
  @extend .class;
  border-width: 6px;
}

/* 编译后 */
.class, #content .inner {
  border: 3px solid blue;
  background-color: #09C;
}
#content .inner {
  border-width: 6px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.5、Mixin

Mixin是可以重用的代码块。sass 样式：

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity{
  @include opacity;      //参数使用默认值  50/100 = 0.5
}
.opacity-80{
  @include opacity(80); //传递参数  80/100 = 0.8
}

/* 编译后 */
.opacity{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

多参数

@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}
div {
    @include center(200px, 100px);
}

/* 编译后 */
div {
    position: absolute;
    left:50%;
    top:50%;
    width:200px;
    height:100px;
    margin:-50px 0 0 -100px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

多组值

@mixin box-shadow($shadow...) {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
div {
    @include box-shadow(0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4));
}

/* 编译后 */
div {
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 -1px 1px rgba(0,0,0,.4);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.6、插入文件

@import命令用来插入外部文件

@import 'path/filename.scss';

如果插入的是.css文件则等同于 css 的 import 命令。

# 2.7、条件语句

@if可以用来判断，配套的还有@else命令。sass样式：

$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}

/* 编译后 */
div {
    color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.8、循环语句

for循环

@for $i from 1 to 4 {
    .item-#{$i} {width: 2em * $i;}
}

/* 编译后 */
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

while循环

$i: 2;
@while $i > 0 {
  .item-#{$i} {width: 2em * $i;}
  $i: $i - 1;
}

/* 编译后 */
.item-2 {
 width: 4em;
}
.item-1 {
 width: 2em;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

each循环

$animal-list: puma, sea-slug, egret;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

/* 编译后 */
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2.9、自定义函数

@function double($n){
    @return $n * 2;    
}
#side{
    width: double(5px)  
}

1
2
3
4
5
6

# 3、参考资料

官方参考文档地址：https://www.sass.hk (opens new window)
sass在线转换工具地址：https://www.sassmeister.com (opens new window)

#CSS

上次更新: 2024/01/30, 00:35:17

← flex布局语法「css技巧」使用hover和attr()定制悬浮提示→