sass学习--sass的@规则（进阶篇）

最新推荐文章于 2025-10-30 19:33:10 发布

原创最新推荐文章于 2025-10-30 19:33:10 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#sass

sass 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了SASS的@规则，包括@import的特殊用法，@media的嵌套功能，@extend的选择器拓展，@at-root的跳出根元素作用，以及@debug、@warn和@error的调试工具。特别是@media和@extend在实际开发中的应用较为广泛。

SASS样式指南:http://blog.jobbole.com/40542/

1.@important:引入文件

//示例：
@import "foo.css","foo2.scss";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

若你有一个 SCSS 或 Sass 文件需要引入，但又不希望它被编译为一个 CSS 文件，这时，你就可在文件名前面加一个下划线，就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。然后，照常引入这个文件，省略掉文件名前面的下划线。

例如有一个文件叫做 _colors.scss，引入的时候写为colors.scss。这样就不会生成 _colors.css 文件了，而且你还可以这样做：

//原文件名： _colors.scss
@import "colors";//引入时候不用加下划线

注意：同一个目录不能同时存在带下划线和不带下划线的同名文件。例如， _colors.scss 不能与 colors.scss 并存。

2.@media:嵌套css规则

sass 中的 @media 指令有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。

//sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
//css
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
   width: 500px;
  }
}

@media 也可以嵌套 @media：

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
//css
@media screen and (orientation: landscape) {
  .sidebar {
      width: 500px;
    } 
}

在使用 @media 时，还可以使用插值件#{}:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;//设备像素比
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
//css
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
      width: 500px; 
      } 
}

3.@extend:拓展选择器或占位符

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

扩展选择器：@extend 不止扩展类选择器，还可以扩展任何选择器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]


.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
//css
a:hover, .hoverlink {
  text-decoration: underline; 
}

多个扩展: 所设某个样式要继承多个地方的样式，那么可以使用 @extend 来继承多个选择器或占位符的样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

扩展单一选择器: %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;//此时才会编译产生
}

4.@at-root: 跳出根元素

当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}
//css
.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}