Sass变量、数据类型、函数随笔（二）

Sass变量

Sass也有变量的概念，变量是以美元 $ 符号开头，为变量赋值的方式如下:

$variable: 750;

与css中属性赋值的方式相同。

命名规则：

必须以 $ 字符开始。
变量名称以 _ 或英文字母开头。
建议变量名称具有可读性的意义。

Sass变量支持块级作用域，嵌套规则之内定义的变量只能在嵌套规则内使用（局部变量），在嵌套规则之外定义的变量则可在任何地方使用（全局变量），如果想局部变量转换为全局变量，则可以采用添加 !global 声明为全局变量，如下：

// 全局变量
$layout-height: 750px;
$color: #353535 !global;
.frame {

  // 局部变量
  $header-height: 80px;

  margin: 0 auto;

  .header {
    $color: #f00 !global;
    height: $header-height;
    color: $color;
  }

  .wrapper {
    color: $color
  }
}

.main {
  color: $color;
}

编译生成为：


.frame {
  margin: 0 auto;
}
.frame .header {
  height: 80px;
  color: #f00;
}
.frame .wrapper {
  color: #f00;
}
.main {
  color: #f00;
}

总结
1. 变量支持块级作用域，通过这种方式更好封装局部样式模块。
2. 提高Sass变量的可维护扩展性，尽可能少或不采用！global 关键字将局部变量声明为全局变量。
3. 全局变量与文档流渲染顺序有关（自上而下）

数据类型

Sass目前支持六种主要的数据类型：

数字，例如：1，20，750px
字符串，有引号或无引号，例如："menu", 'menu', menu
颜色，例如： #ff0000, #aaa, rgba(0, 0, 0, .5), red
布尔型， true， false
数组，用空格或逗号作为分隔符，例如：15px 20px 30px, Arial, sans-serif
maps，与JavaScript的Object相似，例如：（key1: value1，key2: value2）

Sass对于一些特殊的属性值，基本都是按无引号字符串处理，例如：!important。

字符串在@mixin中可以使用 #{} 将带引号字符串编译时转化为无引号字符串这样可以引用选择器名
称，例如：

@mixin use-selector($selector) {
  #{$selector} {
    margin: 0 auto;
    color: #aaa;
  }
}

@include use-selector('.layout')

编译生成为：

.layout {
  margin: 0 auto;
  color: #aaa;
}

总结
项目开发中，掌握Css属性值与Sass中哪种类型对应，能够清楚理解Sass如何编译成css文件。

运算

数字运算
Sass支持数字类型的加减乘除、取整等运算 (+, -, *, /, %)，在编译时可以在不同单位间转换值。

.change  {
  height: 10px + 2pt;
}

编译生成为：

.change {
  height: 12.66667px;
}

总结
在进行数字运算时，注意像素单位是否能够正常转换值，目前项目中遇到不能转换多情况，px，em，rem运算时，不能转换，因为在浏览器渲染中，em、rem等单位会渲染为px像素，在项目开发过程中，基本采用相同等像素单位进行运算处理。

数字运算中的除法运算符 / 在Css中通常起到分隔数字的作用，在Sass中扩展了 / 的功能，同时拥有分割及运算符两种功能，以下三种情况 / 将被视为除法运算符号：

如果值或值的一部分，是变量或者函数的返回值。
如果值被圆括号包裹。
如果值是算数表达式的一部分。

.main {
  $width: 300px;
  font: 14px/18px;
  width: $width/2;
}

编译生成为：

.main {
  font: 14px/18px;
  width: 150px;
}

可以通过 #{} 来改变上下文运行环境

.main {
  $font-size: 14px;
  $line-height: 18px;
  font: #{$font-size}/#{$line-height}
}

编译生成为：

.main {
  font: 14px/18px;
}

上下文运行环境决定 / 履行相应的功能。

颜色值运算
颜色值的运算是分段计算，分别计算红色，绿色，蓝色的值：

.main {
  color: #020405 + #030102;
}

计算过程：02 + 03 = 05 04 + 01 = 05 05 + 02 = 07

.main {
  color: #050507;
}

十六进制的颜色值进行其他运算时，以此类推。

颜色值为rgba 或 hsla 两种颜色值时，必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

.main {
   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译生成为：

.main {
   color: rgba(255, 255, 0, 0.75);
}

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

$red: rgba(255, 0, 0, 0.5);
.main {
  color: opacify($red, 0.2);
  background-color: transparentize($red, 0.2);
}

编译生成为：

.main {
  color: rgba(255, 0, 0, 0.7);
  background-color: rgba(255, 0, 0, 0.3);
}

字符串运算
+ 符号用于连接字符串

.main:before {
   content: "Foo " + Bar;
   font-family: sans- + "serif";
}

编译生成为：

.main:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

无引号与带引号字符串链接时，以前面的字符串形式为主。
在字符串中使用 #{} 动态传值。

$value: 50px;
.main:before {
  content: "I am value: #{$value}"
}

编译生成为：

.main:before {
  content: "I am value: 50px";
}

总结
在字符串进行一些运算时，尽量使带引号字符串进行相关操作。

圆括号 ()
圆括号可以用来影响运算的顺序。

.main {
  width: (2em + 2em) * 3;
}

编译生成为：

.main {
  width: 12em;
}

函数

内置函数
Sass内置了一些通用函数，更好提高开发效率。

.main {
  color: hsl(0, 100%, 50%);
}

编译生成为：

.main {
  color: #ff0000;
}

通过 Sass::Functions 查看完整的 Sass 函数列表及参数名，更好的掌握。

自定义函数
使用@function 自定义函数，格式为：@function <name>(<arguments...>) { ... }，
函数的name可以是任何Sass标识符（建议名称有意义）。函数体只能包含通用语句，以及指示要作为函数调用结果使用的值的`@return。

@function test($base,  $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.main {
  float: left;
  margin-left: test(4, 3) * 1px;
}

@return
@return在规则中表示作为调用函数的结果返回的使用值。@return只允许在一个@function体内，每个@function 必须以 @return在函数体内结束。

有一些经验总结，仅代表鄙人个人观点，如哪位大神有疑惑可以留言一起讨论。