1

前戏:下面这些玩意还是比较实用的,好像是进阶Sass必备的,以后写起 CSS 要溜得飞起啊!

规则(Rules)

1. @import

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

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

  • 如果文件的扩展名是 .css

  • 如果文件名以 http:// 开头。

  • 如果文件名是 url()。

  • @import 包含了任何媒体查询(media queries)

1.1 @import 几种用法
@import "icon.scss"; //带.scss,.sass扩展名

@import "icon"; //不带扩展名,Sass会自动寻找带有 .scss或 .sass 扩展名的同名文件并将其引入。

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

@import "_icons", "mixin"; //引入多个文件;

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

2. @media

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

SCSS:

.box{
    font-size: 18px;
    @media screen and (max-width: 768px) and (min-width: 320px){
        width: 300px;
    }
    @media screen and (max-width:1024px) and (min-width: 768px){
        width: 600px;
    }
}

编译为:

.box {
  font-size: 18px;
}
@media screen and (max-width: 768px) and (min-width: 320px) {
  .box {
    width: 300px;
  }
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .box {
    width: 600px;
  }
}

3. @extend

SCSS:

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

编译为:

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

4. @at-root

主要解决编译出来的 css 选择器嵌套过于严重问题;

SCSS:

.view{
    %public{ //使用了%placeholder,只有使用了@extend调用,才会生成代码;
        content: '';
        display: block;
    }
    background-color: #e0e0e0;
    .view-head{
        &:after{
            @extend %public;
            border-bottom: 1px solid #e0e0e0;
        }
        @at-root .view-head-before{ //.view-head-before会被单独提到一行;
            float: left;
        }
        @at-root .view-head-after{ //.view-head-after会被单独提到一行;
            float: right;
        }
    }
    .view-footer{
        &:before{
            @extend %public;
        }
        color: #f00;
    }
}

编译为:

.view { background-color: #e0e0e0; }
.view .view-head:after,
.view .view-footer:before { content: ''; display: block; }
.view .view-head:after { border-bottom: 1px solid #e0e0e0; }
.view-head-before { float: left; }
.view-head-after { float: right; }
.view .view-footer { color: #f00; }

5. @debug, @warn, @error

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

@warn and @debug功能类似,在这不举栗子了,浪费高度。

SCSS:

@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block {
  @include blockOrHidden; //默认是true;
}
.hidden{
  @include blockOrHidden(false);
}

命令行输出:

3 DEBUG: $boolean is true.
7 DEBUG: $boolean is false.

指令(Directives)

1. @if @else

@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用。下面直接看栗子:

1.1 控制伪元素的content值

SCSS:

@mixin elseif($selector, $value){
    #{$selector}{
        $text: $value;        
        @if $text == google {
            content: '#{$text}';
            @debug "$text is #{$text}"; //在命令行会显示:DEBUG: $text is google.
        }@else if $text == facebook{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }@else if $text == wechat{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }@else if $text == twitter{
            content: '#{$text}';
            @debug "$text is #{$text}";
        }
    }
}
@include elseif('div:before','google');
//(别嫌SCSS写得这么多,而最后输出就一行代码)
// 在实际项目中玩起来是很愉快的!

编译输出:

.box:before { content: "google"; }

1.2 控制元素显示隐藏的栗子

SCSS:

@mixin showOrhide($Boolean: true){
    @if $Boolean{
        display: block;
    }@else{
        display: none;
    }
}
.db{ @include showOrhide(); } //默认true;
.dn{ @include showOrhide(false); }

编译输出:

.db { display: block; }
.dn { display: none; }

2. @for 两种用法

$i => 变量,s => 起始值,e => 结束值;

2.1 @for $i from [s] through [e]


SCSS:

@for $i from 1 through 2{ //through循环出来的值包括end值
    .box-#{$i}{
        width: 20px * $i;
    }
}

编译为:

.box-1 { width: 20px; }
.box-2 { width: 40px; }

2.2 @for $i from [s] to [e]


SCSS:

@for $i from 1 to 2{ //to循环出来的值不包括end值
    .icon-#{$i}{
        font-size: 16px * $i;
    }
}

编译为:

.icon-1 { font-size: 16px; }

2.3 和Interpolation#{}一起玩


SCSS:

$bgc: blue, green, red, yellow;
@for $i from 1 to length($bgc){
    .bgc-#{nth($bgc, $i)}{
        background-color: #{nth($bgc, $i)};
    }
}
//上面说过to循环不包括end值,所以编译后只有3个class;

编译为:

.bgc-blue {
  background-color: blue;
}
.bgc-green {
  background-color: green;
}
.bgc-red {
  background-color: red;
}

2.4 @for生成个网格


SCSS:

$elem: div;
$grid-width: 60px;
$grid-clear: 20px;
%grid{
    float: left;
    margin:0 $grid-clear/2 0 $grid-clear/2;
    //margin:0 ($grid-clear/2) 0 ($grid-clear/2); //觉得看得有点乱也可以加上括号;
}
@for $i from 1 through 6{ //through
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

to编译出来的也是一样的css,主要区别于[e]的取值不同;下面这段代码的[e]值是7,而to方式的结束值是不包括最后一位的,所以to方式生成出来的css也是一样。

@for $i from 1 to 7{ //to
    .#{$elem}-#{$i}{
        @extend %grid;
        width: $grid-width * $i + $grid-clear * ($i - 1);
    }
}

编译为:

.div-1, .div-2, .div-3, .div-4, .div-5, .div-6 { float: left;  margin: 0 10px 0 10px; }
.div-1 { width: 60px; }
.div-2 { width: 140px; }
.div-3 { width: 220px; }
.div-4 { width: 300px; }
.div-5 { width: 380px; }
.div-6 { width: 460px; }

3. @while

@while 指令也需要 SassScript 表达式,并会生成不同的样式块,直到表达式值为 false 时停止循环。这和 @for 指令非常相似,只要 @while 后面的条件为 true 就会执行。

SCSS:

$s: 12;
@while $s > 0{
    .fs-#{$s + 12}{
        font-size: $s + 12px;
    }
    $s: $s - 2;
}

被编译为:

.fs-24 { font-size: 24px; }
.fs-22 { font-size: 22px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }

4. @each

@each 循环指令的形式 @each $var in <list>$var 是个变量名,<list> 是一个 SassScript 表达式,他将返回一个列表值。

SCSS:

$list: checked, user, login, note, down, more;
@mixin icon-list{
    @each $i in $list{
        .icon-#{$i}{
            background-image: url('../images/#{$i}.png');
        }
    }
}
.icon{
    background-repeat: no-repeat;
    @include icon-list;
}

被编译为:

.icon { background-repeat: no-repeat; }
.icon .icon-checked { background-image: url("../images/checked.png"); }
.icon .icon-user { background-image: url("../images/user.png"); }
.icon .icon-login { background-image: url("../images/login.png"); }
.icon .icon-note { background-image: url("../images/note.png"); }
.icon .icon-down { background-image: url("../images/down.png"); }
.icon .icon-more { background-image: url("../images/more.png"); }

Reference API

SASS_REFERENCE — Sass Documentation #Directives

学完了回过头来整理也真是麻烦,算是总结吧。


电波马达
1.9k 声望125 粉丝