关闭

10天精通Sass 之 Sass的@规则

标签: importincludeextendSass的-规则debug
1136人阅读 评论(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网站的观点或立场

10天精通Sass 之 Sass运算

CSS中目前只有calc()能做运算,但是在Sass中,可以做各种数学运算。加法.box{ width: 20px + 8in; }编译出来的CSS:.box { width: 788px; }1in = 96px;当em,rem等相对当前字体,于px在一起不能运算,会报错,如:.box...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-15 09:57
  • 2239

10天精通Sass 之 Sass基本语法二

混合宏——声明混合宏当样式变得越来越复杂,需要重复大段的样式,声明一个个变量已经不能满足我们的需求时,这时Sass中的混合宏就会变得非常有意义。Less中同样有这部分类容,有带参数的混合和不带参数的混合。1、声明混合宏不带参数混合宏在Sass中,使用”@mixin”来声明一个混合宏,如:@mixin...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-12 15:38
  • 1089

10天精通Sass 之 Sass基本语法

声明变量:$width: 200px;sass声明变量以”$”开头普通变量$fontSize: 12px; body{ font-size: $fontSize; }默认变量 sass的默认变量仅需要在值后面加上!default即可。$baseLineHeight: 1.5 !defaul...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-11 17:06
  • 902

10天精通Sass 之 Sass颜色函数

Sass中颜色函数主要分为RGB、HSL和Opacity三大函数。RGB颜色函数 [ ] rgb(red,red, green, $blue)将RGB颜色转换成十六进制颜色 [ ] rgba(color,color, alpha)将十六进制颜色和透明度值转换成RGBA颜色 [ ] red($colo...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-24 11:37
  • 1656

10天精通Sass 之 Sass列表函数

列表函数主要有: length($list):返回一个列表的长度值; nth(list,list, n):返回一个列表中指定的某个标签值 join(list1,list1, list2, [$separator]):将两个列给连接在一起,变成一个列表; append(list1,list1, val...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-22 17:00
  • 1326

10天精通Sass 之 Sass控制命令

@if@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。@mixin blockOrHidden($boolean:...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-16 15:11
  • 1064

sass学习--sass的@规则(进阶篇)

主要整理了@import、@media、@extend、@at-root、@debug、@warn、@error等@规则。
  • macanfa
  • macanfa
  • 2016-06-23 15:57
  • 2262

10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数。字符串函数* unquote($string...
  • liuyan19891230
  • liuyan19891230
  • 2016-08-20 22:46
  • 1967

理解Iass Pass SasS三种云服务区别

其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼、中间、低层三大块。那么我们就可以把Iass(基础设施)、Pass(平台)、Sass(软件)理解成这栋楼的三部分。基础设施在最下端,平台在中间,软件在顶端。别的一些“软”的层可以在这些层上面添加。接下来我们再分别用实例给大...
  • caojianwei1992
  • caojianwei1992
  • 2017-10-31 09:54
  • 324

最详细的 Sass 基础教程指南

这几天一直都在研究 Sass/Scss,这次就把 Sass 基础使用方法整理发表出来。让想学习这方面知识的朋友可以多一份参考资料。毕竟现在这方面的资料特别的稀缺。
  • chase_sky
  • chase_sky
  • 2017-06-28 08:32
  • 441
    个人资料
    • 访问:643534次
    • 积分:46848
    • 等级:
    • 排名:第75名
    • 原创:113篇
    • 转载:0篇
    • 译文:0篇
    • 评论:195条
    博客专栏
    最新评论