SCSS学习 #14

Vxee · 2018-09-06T07:21:21Z

嵌套属性

在同一个命名空间中设置属性

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

// 编译后
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

命名空间也可以有自己的属性值

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

/* 编译后 */
.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}

注释

SASS支持标准的多行注释/* */和 //
多行注释会被保留在输出的css中，而单行注释会被删除。

使用插值语句,可以将变量输出到多行注释中。如：

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

SassScript

交互式shell

在命令行中输入sass -i可以进行测试

变量 $

$width: 5em;

/* 使用 */
#main {
  width: $width;
}

变量仅在它定义的选择嵌套层级的范围内可用
定义变量的时候可以后面带上!global标志，在这种情况下，变量在任何地方可见

#main {
  $width: 5em !global;
      width: $width;
}

#sidebar {
  width: $width;
}

/* 编译为 */
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

数据类型

支持7种主要的数据类型：

数字
文本字符串
颜色
布尔值
空值
值列表（list）
maps

变量默认 `!default`

如果分配给变量的值后面加了!default标志意味着该变量如果已经赋值，那么它不会被重新赋值。如果尚未赋值，那么会被赋予新的给定值。
如果变量是null,将视为未赋值。

@规则和指令

@import

用于导入扩展名是.scss或.sass的样式文件。
以下情况不会导入Sass文件

如果文件的扩展名是.css
如果文件以http:// 开始
如果文件名是url()
如果@import中包含任何的媒体查询

@extend

@extend告诉一个选择器的样式应该继承另一选择器

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

@at-root

可以使一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下。

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

/* 输出 */
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@Degug

用来调试Sass文件

@debug 10em + 12em;

输出

Line 1 DEBUG: 22em

@warn

可以跟踪错误，也可以使用--quiet或者:quiet关闭警告
用法示例：

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

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译为：

p {
  border: 1px solid; }

@for

用于重复输出一组样式。
@for $var from <start> through <end>
@for $var from <start> to <end>
两者的区别是through能取到end,而to取不到。

@each

@each $var in <list or map>

@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
  }
}

输出

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

多重赋值

@each $animal, $color, $cursor in (puma, black, default),
                                      (sea-slug, blue, pointer),
                                      (egret, white, move) {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
}

编译为：

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

同时也支持键值对的列表

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
        font-size: $size;
  }
}

编译为：

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

@while

$i: 6;
    @while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
}

编译为：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

混入指令（Mixin Directives）

定一个large-text

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引入混合样式@include

.page-title { @include large-text; padding: 4px; margin-top: 10px; }

编译为

.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

SCSS学习 #14

SCSS学习 #14

SCSS学习 #14

SCSS学习 #14

Comments

嵌套属性

命名空间也可以有自己的属性值

注释

SassScript

交互式shell

变量 $

数据类型

变量默认 !default

@规则和指令

多重赋值

混入指令（Mixin Directives）

变量默认 `!default`