Sass 入门知识

Akirako
514 阅读3分钟

什么是 Sass ？

前往 Sass中文网 了解更多。

Sass，英文全称 “ Syntactically Awesome StyleSheets ”，是对 CSS 的扩展。它添加了一些 CSS 语法不具有的新特性。Sass 让开发者维护样式表变得更简单。

Sass 完全兼容 CSS，因为它是一个预处理器。它用 Sass 语法写代码，然后转换成标准的 CSS。它允许你使用变量、嵌套规则、导入等众多功能。有助于保持大型样式表解构良好，让 CSS 语言更强大，优雅。

Sass 有两种语法。第一种被称为 SCSS（Sassy CSS），它是 CSS 语法的扩充版本。也就是说，CSS 样式表也是合法的 SCSS 文件。这种语法的样式表文件以 .scss 为扩展名。

第二种比较古老的语法，就是所说的缩排语法（或者直接就称为“Sass”），它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，它也不使用分号，而是用换行符来分隔属性。此种语法的样式表文件需要以 .sass 作为扩展名。

Sass 中的变量

可以申明变量，当需要把多个元素设置成相同颜色时，使用变量可以变得很便捷。

变量以 $ 开头，后跟变量名：

$heading-color: #333;
$main-fonts: Arial, sans-serif;

使用变量：

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

嵌套编写使解构更清晰

Sass 允许 CSS 规则的嵌套，比如：

.container {
  background-color: #81d5e3;
  border: 1px solid #0c5460;
  
  h1 {
    font: 14px Arial;
    color: #1d2124;
    
    span {
      color: #0f6674;
    }
  }
}

Mixins 创建可重用的 CSS

mixin 是一组 CSS 声明，可以在整个样式表中重复使用。

比如说在定义某些样式时，需要使用到厂商前缀，但每次都去编写厂商前缀就变得很麻烦了，也不方便我们修改。

Mixins 就像 CSS 的函数：

/* 定义 */
@mixin box-shadow($x, $y, $blur, $c){
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -o-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}
/* 使用 */
div {
  @include box-shadow(0, 0, 4px, #ffffff);
}

定义以 @mixin 开头，后跟自定义名称，() 中是参数。 使用时用 @include 调用上面定义的 mixin 。

@if 和 @else

@if 和 @else 类似 JavaScript 中的 if 和 else，可以在 Sass 中添加更多条件：

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

Sass 中的循环？- @for

和 JavaScript 中的 for 循环类似，Sass 中的 @for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

这个指令包含两种格式：

  1. @for $var from <start> through <end>，当使用 through 时，条件范围包含 <start> 与 <end> 的值。
  2. @for $var from <start> to <end>，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

以上例子转换为 CSS 时，它是这样的：

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

......

.col-12 {
  width: 100%;
}

这是创建格栅布局的有效方法。

@each 遍历列表中的项目

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，或者是映射中的每个项目，然后输出结果，例如：

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

map 的语法略有不同，以下是一个例子：

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

请注意，需要 $key 变量来引用 map 中的键。否则，编译后的 CSS 将包含 color1，color2......

以上两个代码示例都转换为以下 CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

使用 @while 当条件满足时样式生效

Sass 中的 @while 指令与 JavaScript 中的 while 类似。只要满足条件，它就会一直创建 CSS 代码。

@for 挑战提供了一个创建简单网格系统的示例。这也适用于@while。

$x: 1;
@while $x< 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

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

转换为 CSS：

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

Partials（分音）将样式分成小块

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

使用 @import 指令来导入：

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件。

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

extend 将一组 CSS 样式扩展到另一个元素

Sass 有一个名为 extend 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。

例如，下面的 CSS 规则块设置了 .panelclass 的样式。它有background-color，height 和 border。

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

现在你需要另一个名为 .big-panel 的面板。它具有与 .panel 相同的基本属性，但还需要 width 和 font-size。

可以从 .panel 复制并粘贴初始 CSS 规则，但是当你添加更多类型的面板时，代码会变得重复。

extend 指令是一种重用为一个元素编写的规则的简单方法，然后为另一个元素添加更多：

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

除了新样式之外，.big-panel 将具有与 .panel 相同的属性。

avatar
文章
阅读
粉丝