Sass学习

记录一下从 Sass 官网学习到的 Sass 的一些高级应用。

@mixin

@content 是一个特殊的占位符，可以把 @includes 的 body 中的内容传递进入

语法

特殊函数

CSS 定义了许多函数，一些在 sass 中工作的很好，他们被解析为函数调用，然后转换为普通传递 css 函数。但是有一些例外，他们被解析为 Sass 脚本表达式。所有特殊的函数调用返回 unquoted 字符串

url

他可以接受 quoted 或者 unquoted 的 URL，当他接受一个有效的 unquoted URL 的时候，Sass 按照原样解析它，如果它包含变量或函数调用，它被解析为一个普通的 CSS 函数调用。

at-rules

use 是 scss 模块化语法，未来将代替 import，导入的文件必须以_开头

forward 可以传递模块，但是在本文件中无法使用，要使用还需要额外使用 use 加载，不用担心的是模块只会被加载一次

属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

变量

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明

@extend

用于扩展继承样式

可以继承一个 html 元素的样式，你对于该元素添加的样式都会继承

变量默认值

使用 !default 用于变量

内置函数

普通 CSS 函数

任何不再内置和用户定义函数列表中的函数会被编译为 css 函数，除非它使用了 scss 的参数语法

数值函数

abs, ceil, floor,max,min,percentage,round 顾名思义

comparable($number1,$number2) //=> boolean 返回数值单位是否具有可比较性

1
2
3

@debug comparable(2px, 1px); // true
@debug comparable(100px, 3em); // false
@debug comparable(10cm, 3mm); // true

random($number) 生成随机数，如果 limit 是 null，返回一个 0-1 之间的随机数

unitless($number) //=> boolean 判断 $number 是否具有单位

字符串函数

quote($string) //=> string 加上双引号, unquote 去掉双引号

str-index,str-insert,str-length,str-slice,to-upper-case,to-lower-case 顾名思义

unique-id() //=> string 生成随机字符串

颜色函数

// color 综合调整
adjust-color($color,$red: null, $green: null, $blue: null,$hue: null, $saturation: null, $lightness: null,$alpha: null)
// color 色调调整
adjust-hue($color, $degrees)
alpha($color)
opacity($color)

// blue,red,green,hue,saturation,lightness,aplha 用法类似

//color 调整颜色参数的某一项数值
change-color($color,$red: null, $green: null, $blue: null,$hue: null, $saturation: null, $lightness: null,$alpha: null)
// 返回补色
complement($color)

太多了就不罗列了详见官方文档 sass 颜色函数

列表函数

append,index,length,nth,set-nth 这些函数顾名思义
// 合并两个列表
join($list1, $list2, $separator: auto, $bracketed: auto)
// unquoted string 返回列表的分隔符
list-separator($list)

映射函数

略

选择器函数

实用性不大，略过