发表于： 2019-10-09 23:51:16
3 1059
- 1. Sass 是一门高于 CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能，Sass能够提供更简洁、更优雅的语法即缩进式风格，同时提供多种功能来创建可维护和管理的样式表。
- 2. sass和scss的区别：
- 3. 安装（https://www.cnblogs.com/sting2me/p/6817909.html）：
- 1. “.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）；
- 2. Sass 编译过程即将预处理语言变为css文件并引用，Sass的编译有多种方法：命令编译、GUI工具编译、自动化编译；
- 3. 命令编译：直接最简便，但编译时显示的参数较多；
- 4. GUI工具编译：
- 5. 自动化编译：不能直接照搬
- 6. 常见的编译错误：
- 7. Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：
- 8. sass调试：只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数：
- 1. 声明变量：声明变量的符号“$”+变量名称+赋予变量的值，如$color：red；
- 2. 变量类型：
- 3. 调用变量：在声明变量下面，在选择器{ }里面来给样式定义变量名称即可，如body { color: $color; }
- 4. 声明变量情况：
- 4. 变量的嵌套：分为选择器嵌套、属性嵌套、伪类嵌套‘
- 5. 混合宏：@mixin，用来声明混合宏的关键词，可以混合多个大段样式，也可以混合条件函数；
- 6. 调用混合宏：@include，调用已声明的混合宏名称，如下：
- 7. 传递参数：
- 8. 继承：@extend，可以给另一个选择器赋予已定义好的选择器的所有样式，编译出来即是合并选择器共用相同的样式，如：.btn-second { @extend .btn; }
- 9. 混合宏、继承、占位符的应用情况：
- 10. 插值：#{ } ，通过$声明一个变量名称为字符串，可以通过#{ 变量名称 }，来提取字符串，并应用在定义样式上，只能获取双引号内的字符串，不能获取其他数值，不能在 mixin 中调用，但可以用于继承和占位符，如下：
- 11. 注释：使用 ”/* ”开头，结属使用 ”*/ ”才能在css编译出来，如是// ，则不会在css编译出来；
- 12. 数据类型：如JavaScript一样，
- 13. 值列表：如数组，
- 1. 加法：在变量或属性中都可以做加法运算，需要左右都要空格隔开，且不能相加不同的单位，如：
- 2. 减法：同加法类似，也不能相减不同的单位，如
- 3. 乘法：如相乘相同单位的数值，只需赋予其中一个数值单位即可，也不能相乘不同的单位，如：
- 4. 除法：由于/ 符号在css为一个符号存在，所以需要符合以下才能作为运算符：
- 5. 变量计算：可以用已声明的变量进行计算，如：width: $content-width + $sidebar-width + $gutter;
- 6. 数字运算：可以直接按四则运算，应数字进行运算，加减要相同单位，乘除只需一个赋予单位；
- 7. 颜色运算：所有算数运算都支持颜色值，也能将数字和颜色值 一起运算，并且都是分段运算的，即每两个数字运算，按十六进制运算，如：
- 8. 字符运算：可以通过加法符号“+”来对任何字符串（有引号和无引号）进行连接，如
- 1. 条件判断指令：@if，可以配合@else增加false条件，根据混合宏的（）里的真假情况编译，如：
- 2.顺序循环指令：@for，可以声明循环数列 i，通过插值来获取 i 的值来给后缀为数列的类应用
- 3. 条件循环指令：@while，判定为true继续执行，直到表达式值为 false 时停止循环，如：
- 4. 列表循环指令：@each，遍历一个值列表即数组中的各个值，如：@each $var in <list>
- 1. 字符串函数：
- 2. 数字函数：
- 基本是对一个值列表中的属性参数进行获取并返回；
- 1. length($list)函数：主要用来返回一个列表中有几个值，（）里的列表参数之间要使用空格隔开：
- 2. nth($list, $n) 函数：用来指定列表中某个位置的值，$n 必须是大于 0 的整数，顺序从1计起：
- 3. join($list1, $list2, [$separator])：把逗号隔开的两个列变为空格隔开的一个列，只能作用两个列，如
- 4. append($list1, $val, [$separator])：将某个值$val放在列表$list1的最后一位，如：
- 5. zip($lists…)：将几个列表结合成一个二维列表，且都要是数值个数一样多，即length值一样，如
- 6. index($list, $value)：返回一个值在列表中的位置值，即返回索引号，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，如：
- 7. Introspection 函数，对数值的类型等判断，方便排错：
- 8. Miscellaneous 函数：if($condition,$if-true,$if-false)，称为三元条件函数，如果当条件成立返回一种值，当条件不成立时返回另一种值，如：
- 9. map函数：如数组，可以赋予同样后缀，不同前缀的类多个数值，可以方便增减和管理该数组，如：
- 10. map函数 自身带了七个函数：
- 1. RGB函数
- 2. HSL函数
- 3. Opacity函数（控制整个元素的透明度）
- 1. 如自定义自动获取颜色值的函数，如没有对应值则会警告
- 1. @import：能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件，如：
- 2. @media：如css的一样，但可以嵌套，置于元素或@media的内部，可以只作用于该元素或该@media，也可以配合插值#{ }来定义屏幕情况，如：
- 3. @extend：用来扩展选择器或占位符，相当于继承，可以继承多个任何选择器，如：
- 4. @at-root：跳出根元素，即将嵌套的子元素编译时删除前面的父元素，变为只有一个类元素，如：
- 5. @debug：用来给排错分类，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug，如：
- 6. @warn：如@debug一样，编译出错时，编译出以设置好的文本，多用于条件函数，如：
- 7. @error：和 @warn、@debug 功能一样，都是出错提示，主要是用于不同的错误情况分别设置不同的文本，如：
SASS基本入门
一、基本了解
参考：
入门篇：https://www.imooc.com/learn/311
进阶篇：https://www.imooc.com/learn/311
① 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
② 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
③ SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。
① 到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本；
② 安装时，记得全点勾，或者要点添加到环境变量path那选项，完成ruby安装；
③ 打开ruby的命令面板，输入gem install sass，即可安装sass；
二、语法
① 单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
② 多文件编译：
sass sass/:css/
③ 自动监控编译：添加--watch，只要保存sass文件即可直接修改已输出的css文件；
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
相比之下，我比较推荐使用以下两个：
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
① Grunt 配置 Sass 编译的示例代码：http://www.imooc.com/learn/30；
② Gulp 配置 Sass 编译的示例代码；
① 字符编译错误：要用utf-8，每次新建都要修改，不用GBK；
② 路径中文字符错误：建议在项目中文件命名或者文件目录命名不要使用中文字符；
① 嵌套输出方式 nested：
a. 编写sass时，可以如此编写：父元素 { 子元素 {样式} }，并在编译时添加--style nested，如：
sass --watch test.scss:test.css --style nested
b. 即可实现编译出的css文件，格式变为后代选择器，末位大括号与样式并列一行；
② 展开输出方式 expanded：编译时添加--style expanded，但与nested不同的是，编译出的css文件，末位大括号另起一行，即常规格式；
③ 紧凑输出方式 compact：编译时添加--style compact，编译出则是所有样式并列一行的单行css样式，而以上两种编译出则是每个样式为一行；
④ 压缩输出方式 compressed：编译时添加--style compressed，编译出则是css样式会去掉标准的 Sass 和 CSS 注释及空格，即min版本的压缩格式，如不需要编写css文件后，可以编译出min版本来方便引用；
sass --watch --scss --sourcemap style.scss:style.css
① 3.3版本以上的版本直接编译即可：
sass --watch style.scss:style.css
② 如是chrome浏览器还需进一步调试，如下：
a. 先找到你的谷歌插件，在网址处输入chrome://flags/，找到Developer Tools experiments工具，中文名是开发者实验，搜索也行，然后开启enabled；
b. 然后F12打开开发者调试面板，点开设置setting，在preferences的面板里面，找到Enable CSS source maps选项，并点开；
c. 再在同样是设置里面的Workspace面板，点击add folder，来把对应的sass文件的文件夹添加到workspace；
d. 由此可以在chrome的source面板选择sass文件打开，进行改动，刷新页面即可联动调试并使本地文件变化，但要保持必须保持ruby命令窗口的状态；
三、基本特性--基础
① 普通变量：直接声明；
② 默认变量：声明之后加个!default，如$baseLineHeight:1.5 !default;，可以根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可，即在默认变量的上面声明；
① 全局变量：在元素外声明的变量为全局变量，也可以增加!global，会应用于所有相同的变量名称；
② 局部变量：在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，该变量为作用于局部范围内的局部变量，会覆盖全局变量，如em值的作用情况；
③ 变量声明时候：
a. 该值至少重复出现了两次；
b. 该值至少可能会被更新一次；
c. 该值所有的表现都与变量有关（非巧合）。
① 选择器嵌套：如是作用于同一个子元素，可以（父元素 &）来放在子元素的{ }里面如下：
nav {
a {
color: red;
header & {
color:green;
}
}
}
② 属性嵌套：如作用的样式前缀一样，后缀不一样，如font-size、font-weight，可以分开后缀定义：
.box {
font: {
size: 12px;
weight: bold;
}
}
③ 伪类嵌套：可以配合父选择器（&）使用，即在{ } 里相当于父选择器，如：
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
④ 尽可能避免选择器嵌套，避免难以阅读和过多冗长；
① 不带参数的混合宏：
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
② 带参数的混合宏：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
③ 复杂的混合宏，如参数括号里要带有条件函数或复杂参数，可以用 … 代替，如下：
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
button {
@include border-radius;
}
① 传递一个不带值的参数：声明时为@mixin color （$color） { }；，调用时，可以
@include color（red），来赋予$color=red；
② 传递一个带值的参数：声明时@mixin color （$color=red） { }；，此时声明的$color为默认值，可以在调用时直接调用，或者在（）里赋予新值来覆盖；
③ 传递多个参数：可以在声明时在括号里用逗号隔开参数，如@mixin center($width,$height){ }；
调用时，@include center(500px,300px);，当混合宏传的参数过多之时，也可以在声明时应用特别的参数“…”替代，调用时一样要按顺序赋值；
④ 混合宏的不足：在多个选择器调用同一个混合宏，但编译出来不会合并选择器来定义样式，出现较多的代码块，不够简洁；
① 占位符：%placeholder，不调用时不会在css编译出来，方便维护，如$一样声明一个占位名称作为一个样式代码块，可以通过@extend来调用该占位名称，如：
%mt5 { margin-top: 5px; }
.btn { @extend %mt5; }
@mixin generate-sizes($class, $small) {
.#{$class}-small { font-size: $small; }
}
@include generate-sizes("header-text", 12px);
① 数字: 如，1、 2、 13、 10px；
② 字符串：有引号字符串或无引号字符串（如其他css属性值），插值会把有引号字符串变为无引号字符串，如，"foo"、 'bar'、 baz、#{".btn"}=.btn；
③ 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
④ 布尔型：如，true、 false；
⑤ 空值：如，null；
⑥ 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
① 空格隔开或者多个（）组合都为一个值列表，里面包含多个值，值列表的（ ）在css不会编译出来，如：10px 15px 0 0 为四个值和 (1px 2px) (5px 6px) 为两个值；
② 如用逗号隔开，则是多个值列表组合，如：1px 2px, 5px 6px ；
③ 如有空值，可以用： 1px 2px () 3px 或 1px 2px null 3px 表示，不能只用一个（）表示；
④ 进阶功能，如数组一样调用：
a. nth函数（nth function） 可以直接访问值列表中的某一项；
b. join函数（join function） 可以将多个值列表连结在一起；
c. append函数（append function） 可以在值列表中添加值；
d. @each规则（@each rule） 则能够给值列表中的每个项目添加样式。
四、基本特性——运算
.box { width: 20px + 8in; }
.content { width: $full-width - $sidebar-width; }
.box { width: 10px * 2; }
① 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
② 如果数值被圆括号包围。
③ 如果数值是另一个数学表达式的一部分
如下：
width: $width / 2; // 使用了变量，是除法运算
width: round(1.5) / 2; // 使用了函数，是除法运算
height: (500px / 2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px / 2px; // 使用了加（+）号，是除法运算
④ 如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值；
p {
color: #010203 + #040506; //计算为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
}
如此编译出来的 CSS 为：
p {
color: #050709;
}
$content: "Hello" + "" + "Sass!";
① 如果相加的左侧为有引号，右侧为无引号，则得出结果为有引号字符串，如：
content: "Foo " + Bar; ==》content: "Foo Bar";
② 如果相加的左侧为无引号，右侧为有引号，则得出结果为无引号字符串，如：
font-family: sans- + "serif"; ==》font-family: sans-serif;
五、条件指令
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
① 函数声明，如：
@for $i from <start> through <end>
@for $i from <start> to <end>
其中through包含end值，to不包含end值
② 函数应用，可以按数列顺序遍历各个类来应用：
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
@for $i from 1 to 13 {
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
}
}
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
$list: adam john wynn mason kuroir;
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
六、字符串和数字函数
① unquote($string) 函数：删除字符串的引号，只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号；
② quote($string )函数：给字符串添加引号，即使自身带有引号都会统一换成双引号 ""；
a.只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起；
b.碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起；
③ To-upper-case() 函数将字符串小写字母转换成大写字母，To-lower-case() 函数将字符串转换成小写字母；
① percentage($value)：将一个不带单位的数转换成百分比值，不能转换有单位的数，如：
.footer{ width : percentage(.2) } ==》.footer { width: 20%; }
② round($value)：将数值四舍五入，转换成一个最接近的整数，小于0.5退一位，大于等于0.5进一位，可以转换带有任何单位的数值，如：
.footer { width:round(12.3px) } ==》.footer { width: 12px; }
③ ceil($value)：将大于自己的小数转换成下一位整数，只有有小数都会进一位，如：
.footer { width:ceil(12.3px); } ==》.footer { width: 13px; }
④ floor($value)：将一个数去除他的小数部分，不做任何进位，如：
.footer { width:floor(12.3px); } ==》.footer { width: 12px; }
⑤ abs($value)：返回一个数的绝对值，可以对有单位的数值返回后带有同样单位，如：
.footer { width:abs(-12.3px); } ==》.footer { width: 12.3px; }
⑥ min($numbers…)：找出几个数值之间的最小值，尤其值数列，但不能同时出现两种不同类型的单位；
⑦ max($numbers…)：找出几个数值之间的最大值，同样不能出现两种不同类型的单位，如：
min(6,50,10%,3,300%) ==》 3
max(10px,23px) ==》 23px
⑧ random(): 获取一个随机数，即0~1之间的带有小数的随机数。（）里无需有数值；
七、列表函数
>> length(10px 20px (border 1px solid) 2em)
4
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)
>> join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
① 如果需要将多个列，多个join函数一起用，则：
>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)
② $separator，用来给列表函数连接列表值时使用的分隔符号，默认值为 auto，可以具体声明为comma（逗号）、space（空格），由于auto的情况比较多，所以一般都要明确声明：
>> join(blue,red,comma)
(#0000ff, #ff0000)
>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))
>> index(1px solid red, solid)
2
① type-of($value)：返回一个值的类型，返回值包括：
number 为数值型
string 为字符串型
bool 为布尔型
color 为颜色型
如：
>> type-of(100)
"number"
② unit($number)：返回一个值的单位，如没有返回""，如遇到多个单位，只有乘除生效，如
>> unit(1em)
"em"
③ unitless($number)：判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false，可以实现使用混合宏时，用条件函数判断是否带有单位，如没有则乘1个单位来加上单位，如：
@mixin adjust-location($x) {
@if unitless($x) {
$x: 1px * $x;
}
}
④ comparable($number-1, $number-2)：判断两个值是否可以做加、减运算，如果可以返回的值为 true，如果不可以返回的值是 false，一般不同单位都是不可以（除了cm和mm），如：
>> comparable(2px,1%)
false
>> if(true,1px,2px)
1px
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
① map为声明好的数组名，key1等为可以遍历的数值名，都可以根据实际情况声明；
② 也可以嵌套，如：
$map: (
key1: value1,
key2: (
key-1: value-1,
key-2: value-2
)
);
① map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值，如果不存在则返回null，如：
.btn-dribble{
color: map-get($social-colors,facebook);
}
② map-merge($map1,$map2)：将两个 map 合并成一个新的 map，如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会覆盖 $map1 中的相同key值，如：
$newmap: map-merge($color,$typo);
③ map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map，如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样，如：
$map:map-remove($social-colors,dribble);
④ map-keys($map)：返回 map 中所有的 key，变为一个数值名key的列表，也可以运用list的列表函数进行处理，如index函数来判断是否存在对应值，如：
@function colors($color){
$names: map-keys($social-colors);
@if not index($names,$color){
@warn "Waring: `#{$color} is not a valid color name.`";
}
@return map-get($social-colors,$color);
}
⑤ map-values($map)：返回 map 中所有的 value，即变为一个value值的列表，同样可以用list的列表函数进行处理，如：
$color: map-values($social-colors)
⑥ map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false，可以结合@if来返回没有对应值时的情况，如
@if map-has-key($social-colors,facebook){
.btn-facebook {
color: map-get($social-colors,facebook);
}
} @else {
@warn "No color found for faceboo in $social-colors map. Property ommitted."
}
⑦ keywords($args)：返回一个函数的参数，这个参数可以混合宏或函数参数来动态的设置 key 和 value，返回的参数成对出现且key值没有$符号，如：
@mixin map($args...){
@debug keywords($args);
}
通过@include map { }，在{ } 里面设置新的$key1：value1等值
八、颜色函数
① rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
② rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
③ red($color)：从一个颜色中获取其中红色值，返回一个十进制的数值（0~255）；
④ green($color)：从一个颜色中获取其中绿色值，返回一个十进制的数值（0~255；
⑤ blue($color)：从一个颜色中获取其中蓝色值，返回一个十进制的数值（0~255；
⑥ mix($color-1,$color-2,[$weight])：把两种颜色混合在一起；
a. $color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
b. $weight 为 合并的比例（选择权重），默认值为 50%，取值为0~1，指第一个颜色的占比；
① hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
② hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
③ hue($color)：从一个颜色中获取色相（hue）值；
④ saturation($color)：从一个颜色中获取饱和度（saturation）值；
⑤ lightness($color)：从一个颜色中获取亮度（lightness）值；
⑥ adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
a. 在基础值相加减，这个度数值是在 -360deg 至 360deg 之间，也可以是百分数，如果两个值（抛弃 deg 和 100%）相同，计算出来的颜色也会一样；
b. 如果超过360deg或-360deg，则会继续顺时针或逆时针旋转；
⑦ lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
⑧ darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
a. 在基础的亮度值相加减新亮度值，可以是 0~1 之间，不过常用的一般都在 3%~20% 之间；
b. 当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色
⑨ saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
⑩desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
a. 在基础的饱和度值相加减新饱和度值，可以是 0~1 之间，不过常用的一般都在 3%~20% 之间；
b. 当颜色的饱和度值大于 100%，按100%计算；反之颜色的饱和度值小于 0 时，按0%计算；
⑩① grayscale($color)：将一个颜色变成灰色，即饱和度值为0，相当于desaturate($color,100%);
⑩② complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
⑩③ invert($color)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
① alpha($color) /opacity($color)：获取颜色透明度值，默认值为1；
② rgba($color, $alpha)：改变颜色的透明度值；
③ opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
④ transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。
a. 在基础值上相加减，其取值范围主要是在 0~1 之间；
b. 当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度；
c. 当计算出来的结果小于 0 时会以 0 计算，表示全透明。
九、自定义函数
@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 "rounded-corners", "text-shadow";
① Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录；
② @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入；
③ 在少数几种情况下，它会被编译成 CSS 的 @import 规则：
如果文件的扩展名是 .css。
如果文件名以 http:// 开头。
如果文件名是 url()。
如果 @import 包含了任何媒体查询（media queries）。
④ 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入；
⑤ 不希望被编译为一个 CSS 文件，可以在文件名前面加一个下划线，就能避免被编译，引入时不用加_线，如：@import "colors";//不用加下划线
⑥ 但在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存；
⑦ 嵌套：一般在顶层文件使用 @import引用，也可以在元素内部引用，相当于混合宏那样的代码块；
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
.sidebar {
width: 500px;
}
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
或者结合占位符来代替子选择器：
#context a%extreme { color: blue; }
.notice { @extend %extreme; }
==》#context a.notice { color: blue; }
.c {
color: yellow;
@at-root .d {
color: green;
}
}
编译后：
.d { color: green; }
@debug 10em + 12em;
编译后：
Line 1 DEBUG: 22em
@warn "Assuming #{$x} to be in pixels";
@error "你需要将#{$x}值设置在10以内的数";
返回列表
评论