学习Sass

Posted 2020-08-09 amy01

前面简单介绍了sass的安装，特点和使用方法等，这里记录下sass的基本语法。

一、变量

变量以$开始，像css属性那样赋值，如：

1 $color: #ccc;
2 div {
3     color: $color;
4 }

若变量定义在的选择器内，则仅在嵌套层级的范围内可用（可理解为块级作用域）。不在任何选择器内定义的变量则在任何地方可用（可理解为全局变量）。

1 $color: #ccc;  /*全局范围内可用*/
2 div {
3     $width: 200px; /*仅在定义的选择器内可用*/
4     width: $width;
5      color: $color;
6 }
7 p {
8     color: $color;
9 }

若在选择器内定义的变量后面加上！global标志，则可“升级”为“全局变量”，在任何地方可用。

 1 $color: #ccc;  /*全局范围内可用*/
 2 div {
 3   $width: 200px; /*仅在定义的选择器内可用*/
 4   width: $width;
 5   color: $color;
 6   $height: 100px !global;/*全局范围内可用*/
 7  }
 8 p {
 9   color: $color;
10   height: $height;
11  }

字符串类型变量，有两种类型：带引号（包括单、双引号）和不使用引号。css文件会保留其字符串形式。特殊情况：在字符串中使用#{}引用字符串变量时会去掉引号，这样主要是为了便于使用，比如mixins中的选择器名称。例如：。

1 $name: "peter";
2 $job: ‘programmer‘;
3 $weight: bold;
4 
5 body.chrome{
6     content:"Hi #{$name},chrome users!My job is #{$job}";
7     //也可写成如下形式content:"Hi "+ $name+",chrome users!The job is "+$job;      
8     font-weight:$weight;
9 }

编译为：

1 body.chrome {
2   content: "Hi peter,chrome users!My job is programmer";
3   font-weight: bold; 
4 }

变量值后面加！default，当变量被赋予其他值时引用新值，没有就使用默认的值，换句话说就是个“备胎”啊！ 

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

#main {
  content: $content;  /* 引用新值 */
}
#main:after{
  content: $new_content; /* 引用默认值 */
}

编译为：
#main {
  content: "First content"; 
}

#main:after {
  content: "First time reference"; 
} 

注：变量中的连字符下划线_和划线-可以互换的，如定义了$body_height，可以使用$body-height访问。 

二、运算

SassScript 支持对数字标准的算术运算（加法+，减法 - ，乘法*，除法/和取模%）。数字支持关系运算符(<, >, <=, >=)，并且所有类型支持相等运算符(==, !=)。这里介绍常用的除法和加法。

2.1 除法

原生CSS允许‘/‘ 出现在属性值之间作为分隔数字的方式，sass是CSS属性语法的扩展，所以也必须支持这一点。那么‘/’何时被作为除法预算符呢？

1. 如果该值，或值的任何部分，存储在一个变量中或通过函数返回。

2. 如果该值被括号括起来，作为列表的外部括号除外。

3. 如果该值被用作算数表达式的一部分。

例如：

 1 p {
 2   font: 10px/8px;             // 原生的CSS，不作为除法
 3   $width: 1000px;
 4   width: $width/2;            // 使用了变量, 作为除法
 5   width: round(1.5)/2;        // 使用了函数, 作为除法
 6   height: (500px/2);          // 使用了括号, 作为除法
 7   margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
 8   font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
 9 }
10 
11 编译为：
12 p {
13   font: 10px/8px;
14   width: 500px;
15   width: 1;
16   height: 250px;
17   margin-left: 9px;
18   font: italic bold 10px/8px; 
19 }

2.2 加法

加法可用于连接字符串

p {
  cursor: e + -resize;
}

编译为：
p {
  cursor: e-resize; 
}

用作运算表达式

1 p {
2   margin: 3px + 4px auto;
3 }
4 
5 编译为：
6 p {
7   margin: 7px auto;
8 }

三、嵌套

sass允许选择器嵌套 

 1 div {
 2   h1 {
 3     color: red;
 4   }
 5 }
 6 
 7 编译为：
 8 div h1 {
 9   color: red;
10 } 

属性嵌套

div {
  border: {    
    width: 1px;
    color: #ccc;
    style: solid;
  }
}

编译为：
div {
  border-width: 1px;
  border-color: #ccc;
  border-style: solid; 
}

注意：border必须加上后面的冒号。

在嵌套的代码块内，使用&引用父元素。

 1 a {
 2   color: #000;
 3   &:hover{
 4     color: blue;
 5   }
 6 }
 7 
 8 编译为：
 9 a {
10   color: #000;
11 }
12 a:hover {
13   color: blue;
14 }

如果没有父选择器，&的值将是空。这意味着你可以在一个mixin中使用它来检测父选择是否存在：

 1 @mixin does-parent-exist {
 2   @if & {
 3     &:hover {
 4       color: red;
 5     }
 6   } @else {
 7     a {
 8       color: red;
 9     }
10   }
11 } 

四、代码复用

4.1 @import

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

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

1 //以下代码导入的是css文件
2 @import "foo.css";
3 @import "foo" screen;
4 @import "http://foo.com/bar";
5 @import url(foo);

@import可同时导入多个文件

1 @import  “reset.css”, "style";

@import导入的css文件在编译后不会被合并，但sass会被编译合并到css文件中。如果你有一个 SCSS 或 Sass 文件要导入，但不希望将其编译到一个CSS文件中，你可以在文件名的开头添加一个下划线，告诉Sass不要将其编译到一个正常的CSS文件中。但注意，在导入语句中不要添加下划线。例如：要导入的文件为"_main.scss"，导入语句要写成：@import "main.scss";。另外注意，请不要将带下划线与不带下划线的同名文件放置在同一个目录下，因为带下划线的文件将会被忽略。

4.2 @extend

sass允许一个选择器继承另一选择器的样式，这也是工作中常遇到的需求。例如现在有class1 

.class1 {
  border: 1px solid #ccc;
  background-color: #fff;
} 

class2要继承class1的样式，可以使用@extend

 1 .class1 {
 2   border: 1px solid #ccc;
 3   background-color: #fff;
 4 }
 5 .class2 {
 6   @extend .class1;
 7   font-size: 16px;
 8 }
 9 
10 编译为：
11 .class1, .class2 {
12   border: 1px solid #ccc;
13   background-color: #fff;
14 }
15 
16 .class2 {
17   font-size: 16px;
18 }

4.3 @mixin

 混入(mixin)允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的选择器。通过@mixin 加名称 就可以定义一个Mixins模块，在模块内你可以添加任何你想重复使用的样式。 

@mixin btn {  
  height: 40px;
  padding: 5px 10px;
  text-decoration: none;
}
.btn-block{
  @include btn;
  display: block;
}

编译为：
.btn-block {
  height: 40px;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
} 

@mixin也可以包含在任何规则的外部（即，在文档的根），但注意不能被其他父选择器引用。

 1 @mixin silly-links {
 2   a {
 3     color: blue;
 4     background-color: red;
 5   }
 6 }
 7 
 8 @include silly-links;
 9 /*以下p选择器会报错*/
10 p{
11   font-size: 14px;
12   @include still-links;
13 } 
14 
15 编译为：
16 a {
17   color: blue;
18   background-color: red;
19 }

@mixin另一个重要用处是可以指定参数和缺省值。

@mixin left($value: 10px) {
  float: left;
　margin-left: $value;
}
div {
  @include left(20px);
}

编译为：
div {
  float: left;
  margin-left: 20px;
}

利用混入，生成浏览器前缀的实例：

 1 @mixin rounded($vert, $horz,$radius: 10px){
 2     border-#{$vert}-#{$horx}-radius: $radius;
 3     -moz-border-#{$vert}-#{$horx}radius: $radius;
 4     -webkit- border-#{$vert}-#{$horx}-radius: $radius;
 5 }
 6 #navbar li { @include rounded(top, left); }
 7 
 8 编译为：
 9 #navbar li {
10   border-top-left-radius: 10px;
11   -moz-border-radius-topleft: 10px;
12   -webkit-border-top-left-radius: 10px;
13 } 

五、高级语法

sass支持基本的控制语句和表达式。

5.1 @[email protected] 

$type: monster;
 p {
   @if $type == ocean {
      color: blue;
    } @else if $type == matador {
      color: red;
    } @else if $type == monster {
      color: green;
    } @else {
      color: black;
    }
  }

编译为：
p {
  color: green;
} 

5.2 @for语句

该指令有两种形式：@for $var from <start> through <end> 和 @for $var from <start> to <end>。

　　@for $var from <start> through <end>：范围包括<start>和<end>的值。

　　@for $var from <start> to <end>：从<start>开始运行，但不包括<end>的值。

当<start>比<end>大的时候，计数器将递减，而不是增量。$var可以是任何变量名，比如$i。 

@for $i from 1 through 3 {
    .item-#{$i} {
      border: #{$i}px solid #ccc;
    }
  }
  @for $i from 3 to 1 {
    .list-#{$i} {
      border: #{$i}px solid #ccc;
    }
  }

编译为：
.item-1 {
  border: 1px solid #ccc;
}

.item-2 {
  border: 2px solid #ccc;
}

.item-3 {
  border: 3px solid #ccc;
}

.list-3 {
  border: 3px solid #ccc;
}

.list-2 {
  border: 2px solid #ccc;
}

 5.3 @while语句

 1 $i:6;
 2   @while $i > 0{
 3     .item-#{$i} {
 4      width: #{$i}em;
 5     }
 6     $i: $i - 2;
 7   }
 8 
 9 编译为:
10 .item-6 {
11   width: 6em;
12 }
13 
14 .item-4 {
15   width: 4em;
16 }
17 
18 .item-2 {
19   width: 2em;
20 }

5.4 @each

@each指令通常格式是@each $var in <list or map>。$var 可以是任何变量名，<list or map>是一个返回列表或map 的 SassScript 表达式。


 1 @each $animal in puma, sea-slug, egret, salamander {
 2   .#{$animal}-icon {
 3     background-image: url(‘/images/#{$animal}.png‘);
 4   }
 5 }
 6 
 7 编译为：
 8 .puma-icon {
 9   background-image: url("/images/puma.png");
10 }
11 
12 .sea-slug-icon {
13   background-image: url("/images/sea-slug.png");
14 }
15 
16 .egret-icon {
17   background-image: url("/images/egret.png");
18 }
19 
20 .salamander-icon {
21   background-image: url("/images/salamander.png");
22 }

还可以多重赋值

 1 @each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {
 2   .#{$animal}-icon {
 3     background-image: url(‘/images/#{$animal}.png‘);
 4     border: 2px solid $color;
 5     cursor: $cursor;
 6   }
 7 }
 8 
 9 编译为：
10 .puma-icon {
11   background-image: url("/images/puma.png");
12   border: 2px solid black;
13   cursor: default;
14 }
15 
16 .sea-slug-icon {
17   background-image: url("/images/sea-slug.png");
18   border: 2px solid blue;
19   cursor: pointer;
20 }
21 
22 .egret-icon {
23   background-image: url("/images/egret.png");
24   border: 2px solid white;
25   cursor: move;
26 }

@each 用在maps键值对中。注意maps用圆括号括起来，而不是大括号。

 1 @each $key, $value in (h1:6em, h2:4em, h3:2em){
 2   #{$key}{
 3     height: $value;
 4   }
 5 }
 6 
 7 编译为：
 8 h1 {
 9   height: 6em;
10 }
11 
12 h2 {
13   height: 4em;
14 }
15 
16 h3 {
17   height: 2em;
18 } 

六、自定义函数