sass笔记

基础

变量

• 默认变量：!default

$baseLineHeight: 1.5 !default;

• 局部变量：定义在元素内部
  • 局部变量只会在局部范围内覆盖全局变量

参数

• 函数或者混合宏带有多个参数时，可使用...来代替，作用同于rest运算符

  @mixin box-shadow($shadow...) {}
  

函数功能

字符串函数

• unquote()：删除字符串中引号
• quote()：给字符串添加引号
  • 字符串中间存在单引号或者空格时，需要用单引号或者双引号括起
• to-upper-case()：将字符串字母转成大写
• to-lower-case()：转成小写

数字函数

• percentage($value)：将一个不带单位的数转换成百分比值；
• round($value)：将数值四舍五入，转换成一个最接近的整数；
• ceil($value)：将大于自己的小数转换成下一位整数；
• floor($value)：将一个数去除他的小数部分；
• abs($value)：返回一个数的绝对值；
• min($numbers…)：找出几个数值之间的最小值；
• max($numbers…)：找出几个数值之间的最大值；
• random(): 获取随机数

列表函数

• length($list)：返回一个列表的长度值，值与值之间用空格隔开；
• nth($list, $n)：返回一个列表中指定的某个标签值
• join($list1, $list2, [$separator])：将两个列表连接在一起，合并成一个列表；
• append($list1, $val, [$separator])：将某个值放在列表的最后；
• zip($lists…)：将几个列表结合成一个多维的列表；
• index($list, $value)：返回一个值在列表中的位置值，第一个索引从1开始。

Introspection 函数

该函数包括了几个判断型函数，主要用来对值做一个判断的作用；

• type-of($value)：返回一个值的类型，类型有如下
  • number：数值型
  • string：字符串型
  • bool：布尔型
  • color：颜色型
• unit($number)：返回一个值的单位
• unitless($number)：判断一个值是否带有单位
  • 不带单位的值返回true，反之为false
• comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并
  这几个函数

Miscellaneous函数 (三元条件函数)

$bool: false;
// 当$bool条件成立时，返回的值为20px,否则返回30px
if($bool, 20px, 30px); // --> 30px

maps函数

• 声明：

  $color: (
    default: #fff,
    primary: #22ae39,
    negative: #d9534f
  );

• map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
• map-merge($map1,$map2)：将两个 map 合并成一个新的 map（赋值新变量）。
• map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map（赋值新变量）。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
• keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
• map-has-key，@warn，@return混合使用

@function colors($color){
  @if not map-has-key($social-colors,$color){
      @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
  }
  @return map-get($social-colors,$color);
}

@规则

• @import
  • 当引入的文件不希望被编译成对应的css时，可在引入文件前加_，例如：_colors.scss。引入时书写成@import "colors"
  • 注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件
• @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
• @warn与@debug功能类似，用于调试scss，发出警告
• @error 抛出错误

混合宏 vs 继承 vs 占位符

混合宏

• 特性：当调用同一个混合宏时，会产生多个对应的css代码，不会合并，从而造成代码冗余
• 使用场景：当如果代码块中涉及到变量，建议使用混合宏来创建相同的代码块

继承

• 特性：编译后代码会将继承的代码合并到一起，通过组合选择器展现。但是它不能传参
• 使用场景：代码块不需要任何变量参数，而且有一个基类已在文件中存在，此时可以用继承

占位符 与 继承的区别

• 占位符是独立定义，不使用的时候是不会在css中产生任何代码。而继承是首先有一个基类存在，不管调用与否，积累的样式都将会出现在编译后的css文件中

编译

--watch自动监测代码变化，进行实时编译

• 比如对css目录的test.scss监测编译
• sass --watch css/test.scss:css/test.css

其他

• sass编译过程中是不支持GBK编码的，因此在创建sass文件时，就需将文件编码设置为UTF-8
• 在混合宏中不能使用插值(#{})。
• 在继承或者占位符中，可以用@extend使用插值

  .selected-status {
    font-weight: bold;
  }
  $flag: "status";
  .navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
  }
  

• length()方法或者值列表长度 --> length($list)
• @for through遍历

  $list: twitter,facebook,github,weibo;
  
  @for $i from 1 through length($list){
    .icon-#{nth($list,$i)}{
      background-postion: 0 - 20px * $i;
    }
  }
  

• sass中除法运算，当运算数据没有变量时，需套一个() --> width: (100px / 2);