灏天阁

Scss 基本使用（变量、嵌套）

· Yin灏

1. Scss 简介

Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。

因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 CSS 语法的扩展。

这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句，与原来的语法兼容，只是用 {} 取代了原来的缩进。

传送门：Sass 中文网

传送门：Sass 教程 | 菜鸟教程

传送门：Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）

2. 变量

Sass 变量使用 $ 符号

Sass 变量可以存储以下信息：字符串、数字、颜色值、布尔值、列表、null 值

$sysColor: red;
$sysFontSize: 20px;
$side: left;

.wrap {
  color: $sysColor;
  font-size: $sysFontSize;
  // 如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中
  border-#{$side}: 1px solid pink;
}

默认变量 !default

Scss 的默认变量仅需在值后面加上 !default 即可。

$color: red !default;
.contanier1 {
  color: $color;
}

编译出来的 CSS

.contanier1 {
  color: red;
}

如果分配给变量的值后面加了 !default ，意味着该变量如果已赋值，那么它不会被重新赋值。

但是，如果它尚未赋值，那么它会被赋予新的给定值。

$color: green;
$color: red !default;
.contanier1 {
  color: $color;
}

编译出来的 CSS

.contanier1 {
  color: green;
}

上述例子因为变量 color 已经被赋值为 green，所以再给它赋默认值时不会影响它原来的值，color 的值仍然是 green。

作用域

变量的作用域只能在当前的层级上有效果。

如下所示 contanier2 的样式为它内部定义的 green，contanier1 标签则是为 red。

$sysColor: red;

.contanier1 {
  color: $sysColor;
}
.contanier2 {
  $sysColor: green; // 只在 contanier2 里头有用，局部作用域
  color: $sysColor;
}

!global

Scss 中我们可以使用 !global 关键词来设置变量是全局的。

注意： 所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。

$sysColor: red;

.contanier2 {
  $sysColor: green !global;
  color: $sysColor;
}
.contanier1 {
  color: $sysColor;
}

计算功能

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

$sysWidth: 100px;

.contanier1 {
  margin: (14px / 2);
  width: $sysWidth * 2;
  height: 100px + 50px;
}

除法运算（ / ）

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下情况， / 将被视为除法运算符号：

  • 如果值 或 值的一部分，是变量或者函数的返回值；
  • 如果值被圆括号包裹；
  • 如果值是算数表达式的一部分；
p {
  font: 10px/8px; // Plain CSS, no division
  $width: 1000px;
  width: $width/2; // Uses a variable, does division
  height: (500px/2); // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px;
}

3. 嵌套

Scss 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

$sysWidth: 100px;

.wrap {
  .contanier1 {
    width: $sysWidth * 2;
    height: 100px + 50px;
  }
}

很多 CSS 属性都有同样的前缀，如：font-family, font-size 和 font-weight ，text-align, text-transform 和 text-overflow。

在 Scss 中，可以使用嵌套属性来编写它们：

注意： font、 border 后面必须加上冒号。

.contanier1 {
  font: {
    size: 25px;
    weight: bold;
  }
  border: {
    width: 1px;
    style: solid;
    color: red;
  }
}

在嵌套的代码块内，可以使用 & 引用父元素。

.contanier1 {
  font: {
    size: 25px;
    weight: bold;
  }
  &:hover {
    color: green;
  }
}

4. 注释

Scss 共有两种注释风格。

标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 scss 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
　重要注释！
*/

- Book Lists -