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

一、Sass 的基本特性 - 基础

变量

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

$width: 200px;
普通变量与默认变量
- 普通变量
  
  $fontWeight: bold; body { font-weight: $fontWeight; }
- 【Sass|Sass 入门篇 —— 学习笔记（二）】默认变量
  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! "; }

只有强者才懂得斗争；弱者甚至失败都不够资格，而是生来就是被征服的。
希望此文章能够帮助你。
欢迎关注我的博客网站。