关闭

10天精通Sass 之 Sass的@规则

标签: importincludeextendSass的-规则debug
931人阅读 评论(0) 收藏 举报
分类:

@import

Sass支持所有CSS3的@规则,此外还有一些Sass专属的规则。

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

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

  1. 文件名扩展名是.css
  2. 文件名以http://开头
  3. 文件名是url()
  4. @import中包含了媒介查询(media query)

如果不是以上几种情况,扩展名是.scss或者是.sass.该名称的sass或者scss文件就会被引入。如果没有扩展名,Sass会试着找出具有scss或sass扩展名的同名文件并将其引入。

@import "base.scss"
@import "base"

上面的效果是一样的,都是引入base.scss文件

@import "base.css";
@import "base" screen;
@import "http://base.com/bar";
@import url(base);

编译出来的CSS:

@import url(base.css);
@import "base" screen;
@import "http://base.com/bar";
@import url(base);

可以通过一个import引入多个文件。

@import "base", "extend"

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

例如,文件名叫 _base.scss。

@import "base"

这样不会生成base.css文件。

注意 在同一个目录下,不能同时存在带下划线和不带下划线的同名文件。

media

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

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

编译出来的CSS为:

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

@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;
  }
}

@extend

@extend 用来扩展选择器或占位符

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

编译出来的CSS为:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

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

.seriousError {
  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;
}

更复杂的是:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译出来的CSS为:

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

使用.hoverlink去替换a:hover

多个扩展

可以使用 @extend 来继承多个选择器或占位符的样式

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

编译出来的CSS为:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

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

.seriousError {
  border-width: 3px;
}

扩展单一选择器

%placeholder 不使用@extend显示调用是不会生成任何样式代码

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

.notice {
  @extend %extreme;
}

编译出来的CSS为:

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

.notice替换 %extreme

@root

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

div {
  color: red;
  ul {
    color: orange;
    li {
      color: yellow;
      @at-root img {
        color: green;
      }
    }
  }  
}

编译出来的CSS为:

div {
  color: red;
}
div ul {
  color: orange;
}
div ul li {
  color: yellow;
}
img {
  color: green;
}

@at-root直接跳到最外层。

@debug

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

用法:

@debug "error"

@warn

@warn和@debug用法相同,都是帮助我们更好的调试Sass.

@error

@error于@warn、@debug用法相同,都是帮助我们更好的调试Sass.

graph LR
A-->B
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:512325次
    • 积分:46329
    • 等级:
    • 排名:第71名
    • 原创:112篇
    • 转载:0篇
    • 译文:0篇
    • 评论:115条
    博客专栏
    最新评论