Bootstrap_3.SCSS、Bootstrap定制

Bootstrap重点：媒体查询技术+栅格布局+SCSS

1 SCSS

1.1 动态语言概述

CSS缺点：

1. 语法不够强大，没有变量和合理的样式复用机制；
2. 逻辑上相关的属性值必须以字面的形式重复输出，难以维护；
3. 动态样式语言为css赋予动态语言的特性，极大的提高了样式语言的可维护性

动态样式语言需要使用预处理器(用一种专门的编程语言进行web页面设计，通过编译器转化为css文件供项目使用)
常见动态语言：

1. SCSS(Bootstrap4)/Sass：scss兼容sass；更接近css的写法；
2. stylus
3. Less(Bootstrap3)

1.2 SCSS定义

SCSS是动态的样式语言，在CSS语法基础上增加变量、嵌套、混合、导入、函数等高级功能，是强化CSS的辅助工具。
SCSS的作用：更好地管理样式文件以及更高效地开发项目

boot的SCSS文件夹中有很多_*.scss文件，这些文件会被引入进不带_开头的scss文件中，来生成css样式表；浏览器不认识scss，只能解析css文件。

1.3 SCSS的使用

在服务器端使用：

1. 安装nodejs解释器(版本在8.11以上)
2. 安装scss编译程序npm install -g node-sass；node-sass -v检测版本
3. 在命令行运行sass转换程序
   单文件转换命令：
   node-sass scss文件路径 生成的css文件路径
   多文件转换命令：
   node-sass scss文件夹路径 -o css文件夹路径
   单文件监听：
   node-sass -w scss文件路径 生成的css文件路径
   多文件监听：
   node-sass -w scss文件夹路径 -o css文件夹路径

1.4 SCSS语法

1. 注释
   多行注释/* */会被转换到css文件中
   单行注释(静默注释)//不会被转换到css文件中(CSS不支持单行注释)

2. 变量
   使用$符号来标识变量，用于将多次使用的数据声明为一个反复使用的变量，遵循css选择器命名规范$name: value;。
   颜色变量、数值变量、字符串变量、样式变量；
   在样式内部声明变量时可以引用其他变量，但需要在该变量的作用域内；
   重复声明变量，后声明的变量会覆盖前面变量，不存在js变量声明提前的情况；
   !default规则，如果变量已经声明赋值，使用之前声明的值，否则使用现在声明的值；

3. 嵌套规则(后代选择器)
   CSS重写选择器不便，sass提供嵌套简化样式的编写，使样式可读性更高(明确表现出层次关系，无代码冗余)；
   伪类嵌套：在标签内部嵌套写hover，使用&符号代替标签本身；
   群组选择器嵌套：
   nav, aside, footer {a{color:#444p;}}
   属性嵌套：
   div {border:{style:solid;width:2px; color:red;}}

4. 导入SCSS文件
   在SCSS中，局部文件名以下划线开头；sass编译时不会编译以下划线开头的文件，而是用作导入。
   引用局部文件，使用关键字@import “局部文件名”，局部文件省略下划线和后缀，并且可以同时被多个SCSS文件引用。

5. 混合器
   把需要在多个样式中出现的相同部分封装到混合器中；
   关键字@mixin 混合器名称{重用的样式}，关键字@include 混合器名称可以使用封装好的样式；

6. 带参混合器

   @mixin 混合器名称(形参1， 形参2， 形参3) {
   	属性1：形参1；属性2：形参2；属性3：形参3；
   }
   

   使用@include 混合器名称(实参1，实参2， 实参3);传参调用

7. 继承
   选择器可以继承另一个选择器定义的所有样式；
   @extend 选择器，实现继承。
   在css中表现形式是两个选择器共有的部分变成群组选择器

8. 运算
   1）数字
   Scss支持数值的四则运算和取余，支持不同单位间的转换，但相对单位rem和em转换不了；
   加法： +可以做加法运算也可以做字符串连接，结果有没有引号和第一个字符串一致；
   减法： 减号会被优先解析为变量名的一部分，所以使用变量和减法，需要在-前后添加空格；
   除法： 在scss斜杠/通常起分割数字的作用，同时具备除法运算功能：
   如果值或者值的部分是变量或者函数返回值；如果值被圆括号包裹；如果值是算术表达式的一部分；
   运算表达式与其它值连用用空格连接；
   有引号的字符串中，使用#{}插值语句添加动态的值；
   2）颜色
   rgb三原色分开计算各自的值；
   rgba必须具有相同的alpha才能进行计算

9. 函数
   SCSS定义了多种函数，有些可以直接被css语句调用。
   1）颜色函数：hsl(hue, saturation, lightness);
   hue：色调 取值0~360 3个色段，每120一个；
   saturation：饱和度 取值0.0%~100.0%
   lightness：亮度 取值0.0%~100.0%
   用法同rgba，会被自动编译成rgb格式；
   2）数字函数
   round($ value) ceil floor min max random
   3）字符串函数
   unquote($ string)删除字符串的引号
   quote($ string)给字符串添加引号
   To-upper-case
   To-lower-case
   4）自定义函数
   @function 函数名(形参) {@return 结果}
   调用：函数名(实参);
   5）控制指令
   大体同js中if-else语句，只需要在if 和else-if和else前加@字符，唯一不同的是条件表达式可以不加括号。

2 Bootstrap定制