sass使用参考文档

Posted 2020-10-31 adoctors

内容提要

• 变量
• 嵌套
• 占位符选择器 %
• @mixin
• 运算
• @if
• @for
• @each
• @extend
• @import

正文

1、变量

//定义变量：声明变量以$开
$baseColor:#ff9000;
//使用变量
.box{
    font-size:12px;
    color:$baseColor;
}

//若变量需要镶嵌在字符串中，变量写在#{$el}中
//如：margin-#{$el}:10px;  //.box#{$el} {...}

$bgURL:‘../../../img/work/‘;
.box {
    background-image: url(#{$bgURL}crumbs.png);
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global 声明：

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

#sidebar {
    width: $width;     //5em
}

可以在变量的结尾添加!default给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

//编译为

#main {
  content: "First content";
  new-content: "First time reference"; }

2、嵌套

• 选择器嵌套

使用嵌套增强了结构性和可读性，可以用&表示父选择器（临近的最外层）。嵌套建议不超过3层以上；

.box{
    color:red;
    &:hover{          //相当于.box:hover{}
        color:blue;
    }
}

//& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
#main {
    color: black;
    &-sidebar {                   //相当于 #main-sidebar {}
       border: 1px solid; 
    }   
}

• 属性嵌套

有些属性拥有同一个开始的单词，如：

.box{
  border:{
    color:red;
    width:1px;
    style:solid;
  }
}

//编译为
.box{
    border-color:red;
    border-width:1px;
    border-style:solid;
}

3、占位符选择器 %

与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。

优势：不调用时不会有多余的css文件。

%fl{
    float:left;
}
.box{
    @extend %fl;
}

4、@mixin

//定义
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
//使用
p { @include sexy-border(blue, 1px); }

//编译为
p {
  border-color: blue;
  border-width: 1px;
  border-style: dashed; }

//也可使用参数个默认值

@mixin sexy-border($color, $width: 1px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
  

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

5、运算

• 数字运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

• 字符串运算

+ 可用于连接字符串

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//编译为
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

6、@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

$type: 3;
p {
  @if $type == 1 {
    color: blue;
  } @else if $type == 2 {
    color: red;
  } @else if $type == 3 {
    color: green;
  } @else {
    color: black;
  }
}
//结果
p { color: green; }

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。

7、@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者@for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；。

@for $i from 1 through 3 {                  //1-3
  .item-#{$i} { width: 2em * $i; }
}


@for $i from 1 to 3 {                  //1-2
  .item-#{$i} { width: 2em * $i; }
}

8、@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而

//数组   list类型
@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‘); }



//对象   maps类型
@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; }

nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；

9、@extend

功能：将一个选择器下的所有样式继承给另一个选择器。

.fl{
    float:left;
}
.box{
    width:200px;
    @extend .fl;
}
//编译为
.box{
    width:200px;
}
.fl,.box{
    float:left;
}

10、@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

Sass 允许同时导入多个文件，例如同时导入base1 与 base2 两个文件：

@import "base1", "base2";

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

以上是对开发中常用sass的一些总结，更详细内容可移步 sass中文文档。