Skip to main content

@ Rule

在原生CSS中，存在一些@开头的规则，例如@import、@media，Sass对这些@规则完全支持，还在原有的基础上做了一些扩展。

@import​

原生的CSS里面，@import是导入其他的CSS文件，Sass再此基础上做了一些增强：

  1. 编译时合并：Sass在编译时将导入的文件内容合并到生成的CSS文件中，这意味着只会生成一个CSS文件，而不是像原生CSS那样需要额外的HTTP请求去加载导入的文件。
  2. 变量、函数和混合体共享：Sass允许在导入的文件之间共享变量、函数和混合体，这有助于组织代码并避免重复。
  3. 部分文件：Sass支持将文件名前缀为_的文件称为部分文件。当使用@import指令导入部分文件时，Sass不会生成一个单独的CSS文件，而是将其内容合并到主文件中，有助于更好地组织项目。
  4. 文件扩展名可选：在Sass中，使用@import指令时可以省略文件扩展名.scss或.sass，Sass会自动识别并导入正确的文件。
  5. 嵌套导入：Sass允许在一个文件中嵌套导入其他文件，嵌套导入的文件将在父级上下文中编译，这可能会导致输出的CSS文件中的选择器层级不符合预期。
@import "variable";
@import "mixins";
@import "header";

body{
  background-color: $primary-color;
  color: $secondary-color;
  @include reset-margin-padding;
}

通常情况下，通过@import导入文件的时候，如果不指定后缀名，会自动的寻找sass文件并将其导入。但是有一些情况下，会编译为普通的CSS语句，并不会导入任何文件：

  • 文件拓展名是.css。
  • 文件名以http开头。
  • 文件名是url()。
  • @import包含media queries。

@media​

@media规则在原生CSS里面是做媒体查询，Sass里面是完全支持的，并且做了一些增强操作：

  • 允许将@media嵌套在选择器内部。
.navigation {
  display: flex;
  justify-content: flex-end;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}
  • 允许使用变量。
$mobile-breakpoint: 768px;

.navigation {
  display: flex;
  justify-content: flex-end;

  @media (max-width: $mobile-breakpoint) {
    flex-direction: column;
  }
}
  • 可以使用混合体。
@mixin respond-to($breakpoint) {
  @if $breakpoint == "mobile" {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == "tablet" {
    @media (min-width: 769px) and (max-width: 1024px) {
      @content;
    }
  } @else if $breakpoint == "desktop" {
    @media (min-width: 1025px) {
      @content;
    }
  }
}

.container{
  width: 80%;
  @include respond-to("mobile"){
    width: 100%;
  }
  @include respond-to("desktop"){
    width: 70%;
  }
}

@extend​

一个元素使用的样式和另外一个元素基本相同，但是又增加了一些额外的样式，此时就可以使用继承。@extend规则来实现继承，让一个选择器能够继承另外一个选择器的样式规则。

.button {
  display: inline-block;
  padding: 20px;
  background-color: red;
  color: white;
}


.primary-button{
  @extend .button;
  background-color: blue;
}

/**
.button, .primary-button {
  display: inline-block;
  padding: 20px;
  background-color: red;
  color: white;
}

.primary-button {
  background-color: blue;
}
*/

@extend和@mixin看似相似，但两者其实是不同的：

  • @mixin支持传递参数，使其更具灵活性；而@extend`不支持参数传递。
  • @extend会将选择器合并，生成更紧凑的CSS，并且所继承的样式在最终生成的CSS样式中也是真实存在的；而@mixin会在每个@include处生成完整的CSS代码，就是一个简单的CSS替换。
  • @extend更适用于继承已有样式的情况，例如UI框架中的通用样式；而@mixin更适用于需要自定义参数的情况，例如为不同组件生成类似的样式。

有些时候，需要定义一套用于继承的样式，而不希望Sass单独编译输出，那么这种情况下可以使用%作为占位符：

%button {
  display: inline-block;
  padding: 20px;
  background-color: red;
  color: white;
}


.primary-button{
  @extend %button;
  background-color: blue;
}

.secondary-button{
  @extend %button;
  background-color: pink;
}

/**
.secondary-button, .primary-button {
  display: inline-block;
  padding: 20px;
  background-color: red;
  color: white;
}

.primary-button {
  background-color: blue;
}

.secondary-button {
  background-color: pink;
}
*/

@at-root​

有些时候，可能会涉及到将嵌套规则移动到根级别(声明的时候并没有写在根级别)，此时可以使用@at-root：

.parent{
  color: red;

  @at-root .child{
    color: blue;
  }
}

/**
.parent {
  color: red;
}
.child {
  color: blue;
}
*/

如果想要移动的是一组规则，则需要在@at-root后面添加一对大括号：

.parent {
  color: red;

  @at-root {
    .child {
      color: blue;
    }
    .test {
      color: pink;
    }
    .test2 {
      color: purple;
    }
  }
}

/**
.parent {
  color: red;
}
.child {
  color: blue;
}

.test {
  color: pink;
}

.test2 {
  color: purple;
}
*/

调试​

@debug、@warn、@error，这三个规则是和调试相关的，可以在编译过程中输出一条信息，有助于调试和诊断代码中的问题。

Last updated on