码云笔记前端博客
Home > HTML/CSS > [Sass进阶]Sass 的 @ 规则

[Sass进阶]Sass 的 @ 规则

2019-02-01 分类:HTML/CSS 作者:管理员 阅读(1021)

本文共计5084个字,阅读时间预计13分钟,干货满满,记得点赞加收藏哦

@import

Sass 支持所有 CSS3 的 @ 规则, 以及一些 Sass 专属的规则,也被称为“指令(directives)”。 这些规则在 Sass 中具有不同的功效,详细解释如下。

@import

Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件, 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:

  • 如果文件的扩展名是 .css;
  • 如果文件名以 http:// 开头;
  • 如果文件名是 url();
  • 如果 @import 包含了任何媒体查询(media queries)。

如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

例如:

1
@import "foo.scss";

或:

1
@import "foo";

两者都将引入 foo.scss 文件, 而

1
2
3
4
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

将被编译为:

1
2
3
4
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以通过一个 @import 引入多个文件。例如:

1
@import "rounded-corners", "text-shadow";

将引入 rounded-corners 和 text-shadow 两个文件。

如果你有一个 SCSS 或 Sass 文件需要引入, 但是你又不希望它被编译为一个 CSS 文件, 这时,你就可以在文件名前面加一个下划线,就能避免被编译。 这将告诉 Sass 不要把它编译成 CSS 文件。 然后,你就可以像往常一样引入这个文件了,而且还可以省略掉文件名前面的下划线。

例如,你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了, 而且你还可以这样做:

1
@import "colors";//不用加下划线

来引入 _colors.scss 文件。

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

嵌套 @import

虽然大部分时间只需在顶层文件使用 @import 就行了, 但是,你还可以把他们包含在 CSS 规则 和 @media 规则中。

来看官网提供的一个简单示例:

假设要引入的样式文件

1
example.scss
文件中包含这样的代码:

1
2
3
.example {
  color: red;
}

然后这样引用:

1
2
3
#main {
  @import "example";
}

编译出来的 CSS:

1
2
3
#main .example {
  color: red;
}

@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例:

1
2
3
4
5
6
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译出来:

1
2
3
4
5
.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 也可以嵌套 @media:

1
2
3
4
5
6
7
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

此时编译出来:

1
2
3
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

在使用 @media 时,还可以使用插件“#{}”:

1
2
3
4
5
6
7
8
9
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译出来的 CSS:

1
2
3
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

@extend

Sass 中的 @extend 是用来扩展选择器或占位符。比如:

1
2
3
4
5
6
7
8
9
10
11
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

被编译为:

1
2
3
4
5
6
7
8
9
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

详细的可以回顾前面介绍的继承样式部分。

扩展选择器:

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

1
2
3
4
5
6
.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译出来:

1
2
a:hover, .hoverlink {
  text-decoration: underline; }

再来看一个复杂点的:

1
2
3
4
5
6
.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译出来的CSS:

1
2
.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多个扩展

[Sass进阶]Sass 的 @ 规则

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译出来的CSS:

1
2
3
4
5
6
7
8
9
10
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

扩展单一选择器

前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码:

1
2
3
4
5
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码:

1
2
3
.notice {
  @extend %extreme;
}

编译出来的CSS:

1
2
3
4
5
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

@at-root

@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个简单的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}

编译出来的CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a {
  color: red;
}

.a .b {
  color: orange;
}

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

.d {
  color: green;
}

@debug

@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:

1
@debug 10em + 12em;

会输出:

1
Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:

1
2
3
4
5
6
7
8
9
10
11
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

具体代码例子,请看下面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin adjust-location($x, $y) {
  @if unitless($x) {//unitless是内置函数,判断数值是否有“单位”
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

@error

@error 和 @warn、@debug 功能是如出一辙。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}

.test {
  @include error(15);
}

编译的时候:

1
你需要将15值设置在10以内的数 on line 7 at column 5

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(2) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
2

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - [Sass进阶]Sass 的 @ 规则

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 476 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1050 个
  • 建站时间: 525 天
  • 访问总量: 8648299 次
  • 最近更新: 2019年11月21日