快速上手sass

注释

sass 支持两种注释方法：

• 单行注释：编译的时候会直接被忽略，不会编译到 CSS 中，所以也叫做“隐式注释”（silent comments）。

  // 注释文字
  

• 多行注释：编译时会将注释编译到 CSS 中，所以也叫做“显式注释”（loud comment），CSS 原生的注释也是这样的。

  /* 
  注释文字 
  注释文字 
  */
  

  强制输出的多行注释：当使用压缩模式进行输出css的时候，我们的注释都不会保留，但如果希望保留一些样式，可以使用下面的方法：

  /*！ 
  注释文字 
  注释文字 
  */
  

嵌套

选择器嵌套

Sass 允许 CSS 规则的嵌套，这可以让我们很轻松的写出含有层级关系的样式。

div {
    height: 100px;
    width: 300px;

    span {
        color: red;
    }

    .c1 {
        border: 1px solid orange;

        .c2 {
            text-align: center;
        }
    }

    // &表示直接连接
    &:hover {
        color: green;
    }

    &::after {
        content: '';
        display: block;
    }

    // 子代选择器
    >div {
        background-color: pink;
    }
    // 兄弟选择器
    +p {
        text-align: center;
    }
}

生成后的代码：

div {
  height: 100px;
  width: 300px;
}
div span {
  color: red;
}
div .c1 {
  border: 1px solid orange;
}
div .c1 .c2 {
  text-align: center;
}
div:hover {
  color: green;
}
div::after {
  content: "";
  display: block;
}
div > div {
  background-color: pink;
}
div + p {
  text-align: center;
}

属性嵌套

div {
    // 属性嵌套
    border: {
        color: red;
        width: 1px;
    }
    color: orange;
}

生成后的代码：

div {
  border-color: red;
  border-width: 1px;
  color: orange;
}

选择器

父选择器 &

前面的代码中我们使用了一个父选择器 & ，用于嵌套选择器中引用外部选择器。我们除了上面代码中的用法，还可以用它添加后缀：

.c1 {
    color: red;
    &_header {
        color: green;
    }
    &_body {
        color: yellow;
    }
}

生成的css代码：

.c1 {
  color: red;
}
.c1_header {
  color: green;
}
.c1_body {
  color: yellow;
}

@at-root

@at-root 允许我们在嵌套结构中跳出并将样式规则提升至根级别。

.c1 {
    font-size: 15px;
    .c2 {
        // .c3 会被提高到css声明的最高级
        @at-root .c3 {
            color: red;
        }
    }
}

生成的代码：

.c1 {
  font-size: 15px;
}
.c3 {
  color: red;
}

合并编写：

.c1 {
    font-size: 15px;
    .c2 {
        // .c3 .c4 都会被提高到css声明的最高级
        @at-root {
            .c3 { color: red; }
            .c4 { color: green; }
        }
    }
}

占位符选择器

顾名思义，它的主要作用是占位置的。它的外观和行为很像真实选择器，但它只是一个标识符，选择器以%开头，他后面的属性信息不会输出到我们的css文件中。

%x1 {
    color: red;
}

它的主要作用是用来被继承，后面会讲到。

变量

在 Sass 中，声明变量需要以 $ 开头。同时将连字符 - 和下划线 _ 视为相同的字符。这意味着 $font-size 和 $font_size 都指向同一个变量。

// 声明变量
$textColor: red;
$radius-width: 40px;
$radius_width: 60px;

div {
    // 使用变量
    color: $textColor;
    background-color: green;
    border-radius: $radius-width;
}

编译后的css内容是：

div {
  color: red;
  background-color: green;
  border-radius: 60px;
}

注意：变量声明的时候也可以使用其它变量：

$textColor: red;
// 变量声明的时候使用其它变量
$border: 1px solid $textColor;

变量作用域

**全局变量：**在scss文件的最外层声明的变量就是全局变量，它们可以全局生效。
**局部变量：**在某个选择器内部声明的变量，就是局部变量，它只能在其内部以及后辈区域中生效。

// 声明全局变量
$color: red;

div {
    // 声明局部变量
    $color: orange;
    // 使用变量
    color: $color;

    p {
        // 使用变量
        color: $color;
    }
}

span {
    // 使用变量
    color: $color;
}

局部变量覆盖全局变量：

如果想用一个局部变量去覆盖全局变量，可以使用 !global 来完成：

$color: red;

div {
    // 覆盖全局变量
    $color: orange !global;
    p { color: $color; }
}

span { color: $color; }

生成的代码：

div p {
  color: orange;
}

span {
  color: orange;
}

混入（mixin）

mixin 是一组 CSS 属性声明，方便在样式表中重复使用它们。有点像函数。

// 定义mixin
@mixin commonStyle {
    color: red;
    font-size: 14px;
}

div {
    border: 1px solid orange;
    // 使用mixin
    @include commonStyle();
}

span {
    // 使用mixin
    @include commonStyle();
    background-color: green;
}

生成的样式代码：

div {
  border: 1px solid orange;
  color: red;
  font-size: 14px;
}

span {
  color: red;
  font-size: 14px;
  background-color: green;
}

有参数的mixin

// 定义mixin时可以有参数
@mixin commonStyle($color, $fs) {
    color: $color;
    font-size: $fs;
    border-radius: 50%;
}

div {
    border: 1px solid orange;
    // 使用mixin时传入参数
  	// 按照位置顺序传递参数，顺序很重要
    @include commonStyle(pink, 18px);
  	// 按照指定变量名传值，位置顺序不重要
  	// @include commonStyle($fs: 12px, $color: gold)
}

生成的样式代码：

div {
  border: 1px solid orange;
  color: pink;
  font-size: 18px;
  border-radius: 50%;
}

mixin定义时支持嵌套

@mixin commonStyle {
    color: red;
    font-size: 14px;
    // 在定义混入的时候，使用嵌套
    span {
        border: 1px solid pink;
    }
}

div {
    // 使用混入
    @include commonStyle();
}

生成的代码：

div {
  color: red;
  font-size: 14px;
}
/* 混入的部分会被单独生成 */
div span {
  border: 1px solid pink;
}

继承

指一个选择器继承另一个选择器的所有样式，包括与其相关的样式。使用 @extend 可以处理。

.c1 {
    background-color: red;
    border: 1px solid orange;
}
// 相关的样式
.c1:hover {
    background-color: green;
}

.c2 {
    // 继承过来的样式
    @extend .c1;
    // 自己的样式
    font-size: 15px;
}

生成的样式代码：

.c1, .c2 {
  background-color: red;
  border: 1px solid orange;
}

.c1:hover, .c2:hover {
  background-color: green;
}

.c2 {
  font-size: 15px;
}

无输出继承

我们前面写的.c1 的样式，会被 .c2 继承，同时 .c1 和 .c2 的内容都输出到生成的css文件中，但是有时候我们并不想被继承的样式输出出来，这时候可以使用 占位符，占位符以% 开头。

// 定义一个占位符 %c1
%c1 {
    background-color: red;
    border: 1px solid orange;
}


.c2 {
    // 继承过来的样式(根据占位符继承)
    @extend %c1;
    // 自己的样式
    font-size: 15px;
}

生成的样式代码：

.c2 {
  background-color: red;
  border: 1px solid orange;
}

.c2 {
  font-size: 15px;
}

可选继承

默认情况下，@extend 是强制继承，也就是说要继承的选择器必须存在，如果不存在则会抛出错误。如果想要一个继承是可选的，即：如果要继承的选择器或者占位符存在就继承，不存在的话，就什么也不做，那就在 @extend 语句后加一个 !optional 表示是可选的。

.c2 {
    // 继承过来的样式
    @extend %c1!optional;
}

Partials

它是一种用来存储可重用样式片段的文件。它们以_开头命名，例如_partial.scss。这种命名约定告诉Sass编译器不单独生成该文件，而是被其他Sass文件引用。

它可以帮助我们组织和模块化样式表。允许我们将样式分割成多个文件，每个文件包含特定部分的样式，比如网格系统、按钮样式、颜色变量等。然后，就可以在主样式表中通过@use或@import引入这些partials，从而将它们的样式合并到主文件中。

举例来说，假设你有一个名为_test.scss的partial文件，里面定义了颜色、字体等变量：

// _test.scss
$primary-color: #3498db;

body {
    margin: 0;
    padding: 0;
}

然后，在另一个Sass文件中，你可以通过@use或@import引入这个partial，并使用它定义的变量：

使用 @import：

// 引入_test.scss 文件
@import 'test';

div {
  	// 使用变量
    color: $primary-color;
}

生成的css代码：

body {
  margin: 0;
  padding: 0;
}

div {
  color: #3498db;
}

@import是Sass的旧版本特性，用于引入样式文件。@import会将导入的样式文件中的所有变量、混入(mixin)、函数和样式规则都放到一个全局作用域中，可能导致命名冲突和意外的样式覆盖。同时，使用@import 多次引入同一个文件的时候，会重复输出内容。因此，不是特别推荐使用。

使用 @use：

@use是Sass 3.10版本引入的模块化特性，它支持更好的命名空间和模块管理。推荐使用。它有以下两个优点：

• 私有命名空间：@use 会创建了一个私有的命名空间，导入的变量、混入、函数以及其它样式只能通过命名空间访问。
• 单次加载：@use只会加载一次被引入的文件，不会重复加载，这有助于提高性能。

// 引入_test.scss 文件
@use 'test';

div {
  	// 使用的时候需要通过命名空间访问
    color: test.$primary-color;
}

别名

@use 导入的模块，支持别名操作；

// 导入模块的时候支持起别名
@use 'test' as A;
div {
  	// 使用别名
    color: A.$primary-color;
}