【前端】Sass的学习

曾经写的Sass学习笔记，一共两部分的合集

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

为什么使用Sass？

• 可以使得整个项目的CSS的维护和修改变得容易且风格统一（使用变量来进行前端的赋值）
• 减少了多余的CSS的写法，提高整体的开发效率
• 增加了语句的嵌套
• SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

Sass的基本原理:

• 将.scss 编译成CSS文件进行加载

Sass的安装：

1. ruby环境
2. 使用ruby包管理gem install sass安装成功
   3.（有可能碰见镜像问题）

SCSS语法格式：

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

---
- ```
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

SCSS文件编译过程：

1. 单文件编译：

• sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

2. 多文件批量编译：

• sass sass/:css/

3. 常用参数：

• --watch自动检测代码，自动重新编译

4. 几种常见的输出方式：
5. 嵌套输出方式 -- style nested
6. **展开输出方式 -- style expanded **
7. **紧凑输出方式 -- style compact **
8. 压缩输出方式 -- style compressed

这几种不同的输出方式可以让有不同习惯的程序员可以用起来更爽~

Sass的常用知识：

变量：

1. 普通变量：
   - $temp: value;
   - 可以在全局范围内使用（存在作用域）

2. 默认变量：
   - $temp: value ！default;
   - 在值的后边加上！default只要在使用它之前存在一个变量的赋值即不会使用这个变量的默认值。

3. Sass提供了嵌套功能：

• Sass 中还提供了选择器嵌套功能
• 但是对于选择器的嵌套一般不要多层嵌套\
• 提供属性的嵌套：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

---

对于上面的代码，可以使用下面这种写法来代替：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

• 伪类嵌套：
  使用&符号配合使用：.clearfix{&:before}=>clearfix:before

宏：

1. 声明混合宏：
   - @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样，但是它可以进行传参，通过函数化得调用，设置宏中的样式不同。实现复用。
   - @include用于调用宏
2. 继承和扩展

• 在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
• 占位符 %placeholder 功能是一个很强大，很实用的一个功能。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

注释：

• CSS注释方式：使用 ”/* ”开头，结尾使用 ”*/ ”会保存在CSS中
• JS的注释方式：使用“//”，这种注释方式是不会被编译出来的

数据类型：

• 数字
• 字符串（有引号或者是无引号字符串）
• 颜色（blue,#000000,rgba(255,255,255,0)）
• 布尔：true，false
• 空值：null
• 值列表：
  1. nth函数（nth function） 可以直接访问值列表中的某一项；
  2. join函数（join function） 可以将多个值列表连结在一起；
  3. append函数（append function） 可以在值列表中添加值；
  4. @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

对于CSS 四则运算：

• 对于基本的CSS运算系统会根据单位进行自动转换。
• 但是对于乘除法不同的单位会报xxxx isn't a valid CSS value.错误
• 除法操作时需要将width: 100px/2=>width: (100px / 2);第一种写法不会出现错误，但是也不会出现你想要的效果。
• 颜色运算，会自动的进行RGB和Alpha各个通道的自动加和。color: #010203 + #040506;
• 字符串的加和，对于存在“”的加和，会自动的加上“”

---

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

---

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)使颜色更不透明；
4. transparentize($color, $amount) / fade-out($color, $amount)使颜色更加透明。

---