Sass常用语法

2024-07-26 13:30:25 浏览数 (2)

与Less对比

Sass相对于Less的优点

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

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

导入

导入

代码语言：javascript复制
@import "blue-theme.scss"

嵌套导入

代码语言：javascript复制
.blue-theme {
    @import "blue-theme";
}

变量

代码语言：javascript复制
$nav-color: #F90;

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

编译后

代码语言：javascript复制
nav {
  width: 100px;
  color: #F90;
}

嵌套

代码语言：javascript复制
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后

代码语言：javascript复制
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

选择器

父选择器的标识符&

代码语言：javascript复制
article a {
  color: blue;
  &:hover { color: red }
}

编译后

代码语言：javascript复制
article a { color: blue }
article a:hover { color: red }

同层选择器

同层相邻组合选择器

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

代码语言：javascript复制
header   p { font-size: 1.1em }

同层全体组合选择器~

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

代码语言：javascript复制
article ~ article { border-top: 1px dashed #ccc }

子选择器

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

代码语言：javascript复制
article {
  > section { background: #eee }
}

混合器

基本用法

定义

代码语言：javascript复制
@mixin rounded-corners {
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

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

如果像下边这样写：

代码语言：javascript复制
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

编译后

代码语言：javascript复制
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器传参

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

代码语言：javascript复制
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

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

如果你像下边这样写：

代码语言：javascript复制
a {
  @include link-colors(blue, red, green);
}

编译后

代码语言：javascript复制
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

继承

代码语言：javascript复制
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

代码语言：javascript复制
.seriousError {
  border: 1px solid red;
  background-color: #fdd;
  border-width: 3px;
}
编译 继承 性能优化 语法 sass

0 人点赞