Sass 入门篇 —— 学习笔记（二）

一、Sass 的基本特性 - 基础

变量

声明变量
Sass 的变量包括三个部分：
- 声明变量的符号 “$”
- 变量名称（如：width）
- 赋予变量的值（如：200px）
如：
```
$width: 200px;  
```

普通变量与默认变量

普通变量

$fontWeight: bold;  

body {  
   font-weight: $fontWeight;  
}

默认变量
sass 的默认变量仅需要在值后面加上 !default 即可

$fontWeight: bold !default;  

body {  
   font-weight: $fontWeight;  
}

覆盖默认变量只需要在默认变量之前重新声明下变量即可

$fontWeight: normal; // 在默认变量之前重新声明变量
$fontWeight: bold !default;  

body {  
   font-weight: $fontWeight;  
}

变量的调用

$fontWeight: bold;  

body {  
   font-weight: $fontWeight; // 调用变量
}

局部变量和全局变量
局部变量：局部变量是拥有局部作用域的变量。只能由声明它的函数或块中访问。

  $color: orange; // 定义全局变量

  span {
    color: $color; // 调用全局变量
  }

全局变量：全局变量是在所有作用域都可访问的变量。

  .global {
    $color: orange; // 定义局部变量

    p {
      color: $color; // 调用局部变量
    }
  }

嵌套

选择器嵌套

比如有这样一段 HTML 结构代码：

  
    
      Home
      About

想选中 header 中的 a 标签，在 CSS 会这样写：

  nav a {
    color: red;
  }

  header nav a {
    color: green;
  }

在 Sass 中使用选择器嵌套：

  nav {
    a {
      color: red;

      header & {
        color: green;
      }
    }
  }

属性嵌套
CSS 有一些属性是前缀相同，后缀不同的，比如：
border-top/border-bottom。

  .boder {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
  }

而 Sass 可以这样写：

  .border {
    border: { // 注意此处有 ":"
      top: 1px solid red;
      bottom: 1px solid green;
    }
  }

伪类嵌套
伪类嵌套需要借助 "&" 符号一起配合使用，比如我们编译下面的 CSS：

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

Sass 可以这样写：

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

混合宏

声明混合宏

不带参数的混合宏：
在 Sass 中，使用 @mixin 声明混合宏。如：

  @mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

带参数的混合宏：

  @mixin border-radius($redius: 5px) {
    -webkit-border-radius: $redius;
    border-radius: $redius;
  }

调用混合宏
在实际调用中，使用 @include 调用混合宏。以上面声明的混合宏为例子：
```
button {
  @include border-radius;
}
```
编译好的 CSS：
```
button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
```

混合宏的参数

不带值的参数：

  @mixin border-radius($redius) {
    -webkit-border-radius: $redius;
    border-radius: $redius;
  }

调用时传入参数值：

.box {
  @include border-radius(3px);
}

带值的参数：

  @mixin border-radius($redius:3px) {
    -webkit-border-radius: $redius;
    border-radius: $redius;
  }

多个参数

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

当传入参数过多时，可以使用参数"..."来替代。

继承
在 Sass 中通过 @extend 来继承已存在的类样式块，如：

.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 { /* 编译出来的 CSS 会将选择器合并在一起，形成组合选择器 */
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

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

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

占位符 %placeholder
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码，如：

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

以下才会产生代码：

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

Sass 运算

加法
在变量和属性中都可以做加法运算。如：
```
.box {
  height: 20px + 8in;
}
```
编译好的 CSS ：
```
.box {
  height: 788px;
}
```

注：携带不同类型的单位时，在 Sass 中计算会报错

减法

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

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

编译好的 CSS ：

.content {
  width: 760px;
}

乘法
乘法运算能够支持多种单位（em, px, %），但两个值单位相同时，只需要为一个数值提供单位即可：
```
.box {
  width: 10px / 2;
}
```
编译好的 CSS ：
```
.box {
  width: 5px;
}
```

变量计算

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

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

编译好的 CSS ：

.container {
  width: 960px;
  margin: 0 auto;
}

颜色运算
颜色运算是分段运算的，也就是红、绿、蓝各颜色分段单独运算。如：
```
p {
  color: #010203 + #040506;
}
```
计算公式为: 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
编译好的 CSS ：
```
.container {
  width: 960px;
  margin: 0 auto;
}
```
字符运算
字符运算通过加法符号 "+"对字符串进行连接。如：
```
$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}
```
编译好的 CSS ：
```
.box:before {
  content: " Hello Sass! ";
}
```
只有强者才懂得斗争；弱者甚至失败都不够资格，而是生来就是被征服的。
希望此文章能够帮助你。

欢迎关注我的博客网站。

Sass 入门篇 —— 学习笔记（二）

一、Sass 的基本特性 - 基础

你可能感兴趣的:(Sass 入门篇 —— 学习笔记（二）)