Sass的学习（二）

很长时间没有去写一些简单的前端JS之类的甚至是基础的SQL部分，这次找工作的时候说实话碰到了很多基础方面的问题。

---

这次趁着自己找工作的时间去重新系统化的学习Web开发~
重新撸一遍代码~(^_) 嘻嘻……
这个文集主要是一些Web开发向的笔记和学习记录，一些库和工具框架的学习。
大部分都是入门级的。
文集地址

---

Sass学习的第二部分(同样也是imooc上的第二部分)，如果想看第一部分，可以翻看我的文集。

这部分主要是一些常用函数和流程控制语句。

逻辑与流程控制语句

1. @if:

• @if语句用于条件判断。还可以配合@else和@else if进行条件判断
• 配合函数式的参数进行true||false的判断。

2. @for：

• 循环语句，构建类似于col1-col12这样的栅格系统非常方便。
• @for through不包含最终的数，但是@for to包含区间数。

@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}

3. @while:

• @while循环模式，当条件为true时，一直进行循环

4. @each

• @each 循环就是去遍历一个列表，然后从列表中取出对应的值
• $list: adam john wynn mason kuroir;//$list 就是一个列表=>@each $var in <list>

---

@规则

1. @import

• 它能够引入 SCSS 和 Sass 文件
• @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：
  1. 如果文件的扩展名是 .css。
  2. 如果文件名以 http:// 开头。
  3. 如果文件名是 url()。
  4. 如果 @import 包含了任何媒体查询（media queries）。

2. @media

• min-width等不同的设备上的不同CSS，坐适配。
• 同样对应CSS的使用方式

3. @extend

• @extend 是用来扩展选择器或占位符
• @extend 不止扩展类选择器，还可以扩展任何选择器

4. @at-root

• 就是跳出根元素，对于某些元素需要跳出其上层元素时使用此标签。

5. @debug

• @debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:

6. @warn、@error

• @warn 和 @error,@debug 功能类似，用来帮助我们更好的调试 Sass

---

常用函数

字符串

1. unquote($string)：删除字符串中的引号，不能删除文字中的引号；
2. quote($string)：给字符串添加引号，自身带有引号会统一换成双引号。
3. To-upper-case($string) 函数将字符串小写字母转换成大写字母。
4. To-lower-case($string)将字符串转换成小写字母。

数字

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

列表

1. length($list)返回一个列表的长度值。
2. nth($list, $n)返回一个列表中指定的某个标签值。
3. join($list1, $list2, [$separator])将两个列给连接在一起，变成一个列表。
4. append($list1, $val, [$separator])将某个值放在列表的最后。
5. zip($lists…)将几个列表结合成一个多维的列表。
6. index($list, $value)返回一个值在列表中的位置值。

内省函数

1. type-of($value)返回一个值的类型

• number 为数值型
• string 为字符串型
• bool 为布尔型
• color 为颜色型

2. unit($number)返回一个值的单位，碰到了复杂的运算，如果是* or /会返回一个“多单位的组合”，但是对于加减则会报错（除 px 与 cm、mm 运算之外）。
3. unitless($number)判断一个值是否带有单位，返回值为bool
4. comparable($number-1, $number-2)判断两个值是否可以做加、减和合并，返回一个bool

三元函数

if($condition,$if-true,$if-false)函数即当$condition成立时，返回值为第二个参数，为false时返回第三个参数

Map函数

//基本的$map 写法
$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

1.map-get($map,$key)根据给定的 key 值，返回 map 中相关的值，相当于map中取值。
2.map-merge($map1,$map2)将两个 map 合并成一个新的 map。
3.map-remove($map,$key)从 map 中删除一个 key，返回一个新 map。
4.map-keys($map)返回 map 中所有的 key。
5.map-values($map)返回 map 中所有的 value。
6.map-has-key($map,$key)根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
7.keywords($args)返回一个函数的参数，这个参数可以动态的设置 key 和 value。

颜色函数

1. rgb($red,$green,$blue)，根据红、绿、蓝三个值创建一个颜色
2. rgba($red,$green,$blue,$alpha)根据红、绿、蓝和透明度值创建一个颜色
3. red($color)从一个颜色中获取其中红色值；
4. green($color)从一个颜色中获取其中绿色值；
5. blue($color)从一个颜色中获取其中蓝色值；
6. mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

---

HSL、Opacity函数:

HSL

1. hsl($hue,$saturation,$lightness)通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
   2.hsla($hue,$saturation,$lightness,$alpha)通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色
2. hue($color)从一个颜色中获取色相（hue）值；
3. saturation($color)从一个颜色中获取饱和度（saturation）值；
4. lighten($color,$amount)通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色
5. darken($color,$amount)通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
6. saturate($color,$amount)通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
7. desaturate($color,$amount)通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
8. grayscale($color)将一个颜色变成灰色，相当于desaturate($color,100%);
9. complement($color)返回一个补充色，相当于adjust-hue($color,180deg);
10. invert($color)反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

Opacity

1.alpha($color) /opacity($color)获取颜色透明度值；

2. rgba($color, $alpha)改变颜色的透明度值；
   3.opacify($color, $amount) / fade-in($color, $amount)使颜色更不透明；
3. transparentize($color, $amount) / fade-out($color, $amount)使颜色更加透明。

---