sass学习--基本特性（基础篇）

Posted 2020-07-29 马灿发

1.变量：

由变量声明符、变量名称、变量值组成，例如：$width:300px;

1-1：声明普通变量与默认变量

//普通变量
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//默认变量：默认变量的价值在进行组件化开发的时候会非常有用。
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

注意： sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

1-2：变量的调用

$fontSize: 12px;//声明
body{
    font-size:$fontSize;//调用
}

1-3：全局变量与局部变量

全局变量就是定义在元素外面的变量！（在选择器、函数、混合宏…的外面定义的变量为全局变量）；

局部变量：定义在元素内部的变量，内部的局部变量不会影响外部的其他元素，局部变量只会在局部范围内覆盖全局变量。在局部变量的属性值后加上!global关键字可以将变量提升为全局变量!

$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)

.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

那么问题来了：什么时候声明变量？

1. 该值至少重复出现了两次；
2. 该值至少可能会被更新一次；
3. 该值所有的表现都与变量有关（非巧合）。

---

２.嵌套

分为3种：选择器嵌套、属性嵌套、伪类嵌套。

２-1：选择器嵌套：

//html结构：
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

//Sass: 
nav {
  a {
    color: red;
    //&：上一级选择器
    header & {
      color:green;
    }
  }  
}

2-2：属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

//属性嵌套
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

2-3：伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。例如经典的“clearfix”：

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

注意：嵌套不是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深。

选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

---

3.混合

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。

3-1：声明不带参数的混合宏：

//不带参数的混合宏
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
//调用：
.box {
  @include border-radius;
}

3-2.声明一个没有默认值的带参混合宏：

//无默认值的带参混合宏
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//调用：
.box {
  @include border-radius(3px);
}

3-3:声明一个带默认值的带参混合宏：

//带默认值
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
//调用
.box {
  @include border-radius(50%);//或者@include border-radius;
}

3-4：多个参数的混合宏：

//带多个参数（例如经典居中）
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
//调用
.box-center {
  @include center(500px,300px);
}

//参数过多时的复杂混合宏：
@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}
//当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

//调用声明的混合宏：
.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

3-5：不足之处

Sass方便诸多，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

---

4.继承

指继承类中的样式代码块。通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器！

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
//css
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

---

5.占位符

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。可以改变以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。干净整洁。

---

混合宏、继承、占位符的使用时机：

那么，问题又来了，什么时候调用混合宏，什么时候调用继承，什么时候使用占位符？

1.混合宏的使用：

不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码冗余，但它可以传参数，较为灵活。

建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

2.继承的使用：

使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起变为组合选择器。编译后的代码相对于混合宏来说要干净整洁，但是它不能传变量参数。

建议：若代码块不需传任何变量参数，且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

3.占位符的使用：

编译后的 CSS 代码和使用继承基本相同，占位符和继承的主要区别是：

占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；

继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

4.综上所述：(看图)

（ps：图片来源于网络！膜拜大牛）

---

6.插值#{}

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。

//sass
$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}
//css
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

//sasss
@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
//调用：
@include generate-sizes("header-text", 12px, 20px, 40px);

//css
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

#{}语法并不是随处可用，你也不能在 mixin 中调用,但可以在@extend中使用插值#{}。

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

//css
.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

---

7.注释：

Sass中有两种注释方式:
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”，会被编译；
2、类似 javascript 的注释方式，使用“//”，不会被编译

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示。

---

8.数据类型：（6种）

数字、字符串（有无引号字符）、颜色、布尔型、空值、值列表（空格或逗号隔开）

---

9.运算：

加减乘除、变量运算、数字运算、颜色运算、字符运算！

9-1加法：加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。对于携带不同类型的单位时，在 Sass 中计算会报错

.box {
  width: 20px + 1px;
}

9-2减法：不同类型单位，编译报错

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

9-3乘法：同样不同类型单位，也编译出错
能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题

.box {
  width:10px * 2px;  //编译出错
}

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。

.box {
  width: 10px * 2;
}

9-4除法：

不过除法运算比较特殊之。“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。

”/ ”符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
//css
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

注意：

Sass 的除法运算还有一个情况。在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。

.box {
  width: (1000px / 100px);
}
//css
.box {
  width: 10;//两个相同单位值的值会得到不带单位的值
}

9-5变量运算：

//sass
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

9-6数字运算：

.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

9-7颜色运算：

p {
  color: #010203 + #040506;
}
p {
  color: #010203 * 2;
}

9-8字符运算：

在 Sass 中可以通过加法符号“+”来对字符串进行连接。

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

注意：

左有引号字符+右无引号字符–> 有引号字符串！
左无引号字符+右有引号字符–> 无引号字符串！

技巧： 只认左边有无引号，有则输出字符串有引号，无则输出字符串无引号！

//sass
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
//css
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

---

总结：整理sass的基本特性：变量、嵌套、混合、继承、占位符、插值、注释、数据类型、运算等9个知识点！理清各个特性的使用场景和使用技巧！还是那句话，吃一堑长一智！