Sass常用语法

发表于 | 分类于
Sass常用语法

与Less对比

Sass相对于Less的优点

  • 功能强大：Sass 提供了更多的功能，比如嵌套规则、变量、混合宏、继承等。
  • SCSS 语法：Sass 提供了两种语法，一种是原始的 Sass 语法（缩进），另一种是 SCSS 语法（类似 CSS），大多数开发者更喜欢 SCSS 语法。
  • 成熟稳定：Sass 自 2006 年发布以来，已经被广泛使用，并且有大量的支持和社区资源。
  • 性能优化：Sass 支持更高效的编译和性能优化。

总体来说，如果你需要更高级的功能和更广泛的社区支持，Sass 可能是更好的选择。

测试语法可以VSCode安装Live Sass Compiler

image-20240802105442967

创建scss文件后，在右下角点击Watch Sass，就会自动编译了，目录下的所有scss文件都会在同一目录生成css文件。

导入

导入

1
@import "blue-theme.scss"

嵌套导入

1
2
3
.blue-theme {
    @import "blue-theme";
}

变量

1
2
3
4
5
6
7
$nav-color: #F90;

nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

编译后

1
2
3
4
nav {
  width: 100px;
  color: #F90;
}

嵌套

1
2
3
4
5
6
7
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后

1
2
3
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

选择器

父选择器的标识符&

1
2
3
4
article a {
  color: blue;
  &:hover { color: red }
}

编译后

1
2
article a { color: blue }
article a:hover { color: red }

同层选择器

这其实是css本身的语法。

同层相邻组合选择器+

选择header元素后紧跟的p元素：

1
header + p { font-size: 1.1em }

同层全体组合选择器~

选择所有跟在.user_item后的同层.user_item元素，不管它们之间隔了多少其他元素：

1
2
3
.user_item ~ .user_item {
  margin-top: 20px;
}

子选择器

这其实是css本身的语法。

子组合选择器>选择一个元素的直接子元素

1
2
3
article {
  > section { background: #eee }
}

混合器

通过@mixin定义混合器，通过@include使用。

基本用法

定义

1
2
3
4
5
6
7
8
9
@mixin rounded-corners {
  border-radius: 16px;
}

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

编译后

1
2
3
4
5
notice {
  background-color: green;
  border: 2px solid #00aa00;
  border-radius: 16px;
}

混合器传参

个人不太推荐使用这种方式。

通过@mixin定义混合器。

当混合器被@include时，你可以把它当作一个css函数来传参。

1
2
3
4
5
6
7
8
9
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

编译后

1
2
3
4
5
6
7
8
9
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}

继承

1
2
3
4
5
6
7
8
9
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

1
2
3
4
5
6
7
8
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}