一、CSS预处理器（程序）语言

CSS的语法虽然简单，但它同时也带来一些问题，比如CSS需要书写大量看似没有逻辑的代码，不方便维护及扩展，也不利于复用，造成这些原因的本质源于CSS是一门非程序式的语言，没有变量、函数、和作用域等概念，那么，为CSS增加一些动态语言特性（如变量、函数、继承等）的语言，就叫做CSS预处理器（程序）语言，CSS预处理器（程序）语言就是升级版的CSS，可以让你的CSS更加简洁，适应性更强，代码更直观等，但此语言无法直接运行，必须先编译（预处理）为CSS再运行，常见的有less、sass、和stylus语言

二、less语言

less语言（Leaner Style Sheets）是CSS预处理器（程序）语言中的一种，为CSS赋予了动态语言的特征，它扩展了CSS语言，增加了变量、混合（Mixin）、嵌套、函数、和运算等特性，使CSS更易维护和扩展，并且可以用类似JS的语法去写CSS，less语言既可以在web浏览器中运行也可以在web服务器中运行，在web浏览器中运行需要将less代码写在html文件中的一对<style>内，但是必须给这个<style>添加一个type=“text/less”属性，在这对<style>之后，还需要引入进来一个less.js文件（可在less中文网下载此文件），less.js文件的作用是将less语言编译为CSS语言，也可以安装“考拉客户端”软件，安装时不要修改它的默认安装路径，否则运行时可能会报错，利用此软件将.less文件编译为.css文件，但是只有原.less文件中的多行注释可以参与编译，单行注释不可以（即不会出现在编译后的文件中），或者利用网页上的在线小工具直接将less代码编译为CSS代码即可，在web服务器中运行需要先新建一个.less文件，将less代码写到此文件中，然后再将此.less文件引入进html文件，但是需要将<link>的rel=“stylesheet”属性改为rel=“stylesheet/less”，然后再引入进来一个less.js文件即可，经由webstorm再通过浏览器打开是有效的，因为webstorm默认就是web服务器的环境，而直接鼠标双击html文件打开则是无效的，less中定义变量的格式为“@变量名称: 取值;”，当此变量的取值是CSS属性值时，访问此变量的格式为“@变量名称”，当此变量的取值是CSS属性/选择器名称时，访问此变量时一定要使用变量插值的方式，格式为“@{变量名称}”，当想要把变量1赋值给变量2时，无论变量1的取值是啥，格式都为“@变量2: @变量1;”，定义在“{}”外面的叫做全局变量，可以在全局访问，定义在“{}”里面的叫做局部变量，只能在“{}”中访问，只有定义在相同作用域的同名变量，后定义的才会覆盖先定义的，由于less中的变量是延迟加载的，所以可以先访问后定义，访问变量会依据作用域链原则，less中的运算跟CSS3中新增的calc函数一样，都支持简单的加减乘除运算，但需要用小括号括起来，例如“margin-left: (-200px * 0.5);”，为了减少冗余代码而定义的含有一系列CSS属性和取值的类选择器就叫做混合（Mix in），在需要执行的地方调用此混合即可，在预处理的时候，会自动将此混合中所封装的CSS代码复制粘贴过来，在定义混合时，当混合的名称后面没有“()”时，在预处理之后会保留原混合的CSS代码，当混合的名称后面有“()”时，则不会保留，并且调用的时候也可以加上“()”，在定义混合的时候，可以在“()”中定义形参，例如“.whc (@w, @h, @c) {width: @w;  height: @h;  background: @c;}”，也可以给所定义的形参设置默认值，例如“.whc (@w: 100px, @h: 100px, @c: pink) {width: @w;  height: @h;  background: @c;}”，而且在调用的时候，也可以手动给指定的参数重新赋值，例如“.whc (@c: red);”，less中的@arguments跟JS中的arguments类似，可以接收所有传入的实参，但是在“()”中必须同时写上“...”，“...”和形参列表可以同时出现，形参列表中形参的个数决定了最少传入几个实参，但“...”必须写在形参列表的最后，例如“.animate (@name, @time, ...) {transition: @arguments;}”，当有多个同名混合同时存在时，为了不将之前所定义的同名混合覆盖掉，而在每个同名混合形参列表的最前面所新增的不同自定义名称就叫做同名混合的不同匹配模式，例如“.triangle (Down, @width, @color) {width: 0;  height: 0;  border-width: @width;  border-style: solid;  border-color: @color transparent transparent transparent;}(//调用时也必须带着此自定义名称)”，当同名混合的不同匹配模式中有相同的CSS代码时，为了减少冗余代码，而将相同的CSS代码所提取到的一个同名混合就叫做同名混合的通用匹配模式，无论调用同名混合的哪一个匹配模式，都会先自动调用通用匹配模式，只需将形参列表最前面的自定义名称改为“@_”即可，而其余的形参也必须要有，不能省略，例如“.triangle (@_, @width, @color) {width: 0;  height: 0;  border-style: solid;}”，当想要在当前的less文件中导入其它的less文件时，格式为“@import “triangle.less”;(//不写扩展名也可以)”，由于less的底层就是用JS实现的，所以JS中常用的一些函数在less中都支持，可以参考这个网址www.w3cschool.cn/less，调用image-size函数可以返回传入URL字符串所代表的图片尺寸（带单位名称），调用image-width/height函数可以返回传入URL字符串所代表的图片宽/高度（带单位名称），调用convert函数可以返回参数1的单位名称被转成参数2之后的带单位名称的新数据，例如“convert (14cm, mm);(//140mm)”，调用length函数可以返回传入列表的长度值，例如“@list: “A”, “B”, C, “D”;  length (@list);(//4)”，调用extract函数可以返回参数1列表中的第参数2个数据，例如“extract (@list, 3);(//C)”，调用ceil/floor/sqrt/abs/pi/max/min函数的用法跟JS中的一样，只不过传入的参数可以带单位名称，调用percentage函数可以返回传入小数被转为的百分数，调用round函数既可以返回传入数值的小数位被四舍五入之后的整数值，也可以返回参数1被保留参数2位小数之后的新数值，例如“round (1.67, 1);(//1.7)”，调用replace函数可以返回参数1中的参数2部分被替换为参数3之后的新数据，例如“replace (“Hi Tom”, “Tom”, “Jack”);(//“Hi Jack”)”，调用isnumber/isstring/iscolor/iskeyword/isurl/ispercentage/isunit/isruleset函数可以判断所传入的参数是否是数字（56px不带引号为数字，px只是单位名称而已）/字符串/颜色/keyword/URL/百分数/变量，返回值是true/false，调用ispixel/isem函数可以判断所传入的参数是否带有px/em单位名称，返回值是true/false，调用isunit函数可以判断所传入的参数1是否为参数2这个单位名称，返回值是true/false，例如“isunit (4rem, rem);(//true)”，调用saturate/desaturate函数可以给所传入的参数1颜色增加/减少参数2百分比的饱和度，例如“saturate (red, 20%);”，调用lighten/darken函数可以给所传入的参数1颜色增加/减少参数2百分比的亮度，调用fadeout/fadein函数可以给所传入的参数1颜色增加/减少参数2百分比的透明度，在less中，写在某个选择器“{}”内部的选择器，就会默认编译成它的后代选择器，即编译后两个选择器中间会出现空格，但当在“{}”内部的选择器前面加一个“&”符号时，就会消除这个空格，所以适合伪类、伪元素、和序/交集选择器使用，在less中为了进一步减少冗余代码，除了直接调用混合外，还可以采用继承混合的方式，调用混合的实质是复制粘贴，有多少个地方调用就会粘贴多少份，而继承混合的实质是放到并集选择器中，不会复制粘贴，只会保留一份，例如“.center {position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}  .father: extend (.center) {width: 300px;  height: 300px;  background: red;  .son: extend (.center) {width: 200px;  height: 200px;  background: blue;} }(//编译之后，所定义的.center混合中的代码（即公共代码）就放到了.center、.father、和.son的并集选择器中了)”，在less中可以使用when语句来给所定义的混合添加执行的限定条件，在调用此混合时，只有此限定条件是true时，混合中的CSS代码才会执行，在when语句的条件表达式中，可以使用比较运算符/逻辑运算符/检查函数来进行条件判断，less中的“=”相当于JS中的“等等于”，“(), ()”格式相当于JS中的“逻辑或”，“() and ()”格式相当于JS中的“逻辑与”，例如“.size (@width, @height) when (@width = 100px), (@height = 100px) {width: @width;  height: @height;}”，“.size (@width, @height) when (ispixel (@width) ) {width: @width;  height: @height;}”

三、fullPage.js插件

fullPage.js是一个基于jQuery.js（用JS封装的类库）的插件，它能够很方便很轻松的制作出全屏滚动网站，由于编程开发属于一门“做中学”的学科，所以无论是什么编程语言，我们都不可能等到所有内容都学会才开始编写程序，虽然fullPage.js是一个基于jQuery.js的插件，但是无论jQuery.js还是fullPage.js都是用JS编写的，所以会JS即可，在企业开发中由于开发时间、企业成本、和惰性等因素，所以并不是所有的功能都需要我们自己实现，大部分情况下一些常用的功能都有现成的插件/框架，我们只需要找到合适的插件/框架，快速学习套用即可（俗称搬砖），插件/框架的来源有个人/团队的自行封装、百度/谷歌/GitHub、行业交流/技术峰会等，学习和使用插件/框架的步骤为下载插件/框架、查看插件/框架的示例程序、阅读插件/框架的文档、编写demo，先上“alvarotrigo.com/fullPage/”网址，将页面语言改为中文，然后点击“下载”，将fullPage压缩包下载下来并解压缩，回到页面，点击“在GitHub上查看”，然后向下拖动，将页面语言改为中文，此页面就包含fullPage.js插件的全部使用说明，进入解压后的fullPage.js-master文件夹内部的dist文件夹，里面有fullpage.css和fullpage.min.css文件，前者是格式化之后的css文件，是没有压缩的，后者是压缩之后的，体积更小，传输会更快，开发阶段用未压缩的，在项目上线的时候用压缩的，文件引入顺序是fullpage.css、jquery-3.1.1.js（由于fullPage.js是一个基于jQuery的插件，所以需要先引入jQuery.js）、easings.js、scrolloverflow.js、fullpage.js，然后在页面上找到“要求HTML结构”标题，将结构代码复制粘贴过来，然后在页面上找到“初始化”标题，按照要求将JS代码复制粘贴过来，将没用的代码删掉，然后在页面上找到“带有所有功能选项的Vanilla JS演示”标题，会看到很多的属性和方法（事件），但是没有标明都是什么含义，然后在页面上找到“选项”标题，就看到了每个属性都是什么含义，比较常用的属性有sectionsColor、navigation、navigationTooltips、showActiveTooltip、navigationPosition、loopTop、loopBottom、continuousVertical、menu、anchors、verticalCentered，在页面上找到“Callbacks”标题，就会看到每个方法（事件）的使用说明，比较常用的有onLeave、afterLoad，在页面上找到“方法”标题，就会看到可以利用全局对象fullpage_api调用的各种方法及其使用说明了，比较常用的有getActiveSection、moveSectionUp、moveSectionDown、moveTo，在页面上找到“创建更小或更大的section”标题，就会看到fp-auto-height类名的使用方法，在页面上找到“懒加载”标题，就会看到如何懒加载（延迟加载）图像、音视频以提升用户体验和节省数据传输

四、sass语言

sass语言（Syntactically Awesome Stylesheets Sass）是一套底层利用ruby实现的，最早最成熟的CSS预处理器语言，诞生于2007年，它扩展了CSS语言，增加了变量、混合（Mixin）、嵌套、函数、和运算等特性，使CSS更易维护和扩展，而less语言是一套底层利用JS实现的CSS预处理器语言，诞生于2009年，由于less语言的诞生比sass语言要晚，并且less语言受到了sass语言的影响，所以在less语言中能看到大量sass语言中的特性，只要学会了less语言就等同于学会了大部分的sass语言，less文件的扩展名是.less，sass文件的扩展名是.sass/.scss，在.sass文件中用缩进来替代“{}”表示层级结构，并且语句后面不用写分号，在.scss文件中用“{}”表示层级结构，并且语句后面需要写分号，推荐使用.scss文件，当需要使用考拉编译sass文件时，需要把输出方式从nested调成expanded，否则编译后的格式会有问题，并且项目目录的文件夹和文件名称一律不能出现中文和特殊字符，否则编译的时候会报错，sass中的注释跟less一样，单行注释不会参与编译，即不会出现在编译后的文件中，只有多行注释才会参与编译，sass中定义变量的格式为“$变量名称: 取值;”，当此变量的取值是CSS属性值时，访问此变量的格式为“$变量名称”，跟less中一样，当此变量的取值是CSS属性/选择器名称时，访问此变量时必须使用变量插值的方式，格式为“#{$变量名称}”，跟less中一样，当想要把变量1赋值给变量2时，无论变量1的取值是啥，格式都为“$变量2: $变量1;”，跟less中一样，区分全局变量和局部变量，定义在相同作用域的同名变量，后定义覆盖先定义，访问变量会依据作用域链原则，但是sass中的变量不是延迟加载的，不可以先访问后定义，sass中的运算跟less中一样，支持简单的加减乘除运算，但需要用小括号括起来，sass中定义混合的格式为“@mixin 混合名称 {};”，“@mixin 混合名称 () {};”，调用混合的格式为“@include 混合名称;”，“@include 混合名称 ();”，混合可以带形参，也可以给形参设置默认值，例如“@mixin whc ($w: 100px, $h: 100px, $c: #000) {width: $w;  height: $h;  background: $c;}”，调用的时候也可以手动给指定的参数重新赋值，例如“@include whc ($c: blue);”，在混合中可以定义数量可变的参数，例如“@mixin animate ($args...) {transition: $args;}”，在“$args...”的前面还可以正常添加形参列表，形参列表中形参的个数决定了最少传入几个实参，例如“@mixin animate ($name, $time, $args...) {transition: $name $time $args;}”，跟less中一样，在.scss文件中也可以通过“@import”导入其它的.scss文件，其实在.css文件中也支持通过“@import”导入其它的.css文件，但是只有在执行到“@import”那句代码时web浏览器才会去向web服务器请求对应的.css文件，会导致请求次数变多，页面加载起来特别慢，所以不是很常用，而less/sass文件中的“@import”是直接将被导入文件中的less/sass代码复制粘贴到当前文件中，所以只会请求一次，速度更快，跟less中一样，sass中也提供了很多的内置函数，调用quote/unquote函数可以返回传入字符串被添加/去掉引号之后的新字符串，调用To-upper-case/To-lower-case函数可以返回传入字符串中的小/大写字母被转成大/小写字母之后的新字符串，调用percentage/round/ceil/floor/abs/min/max/random函数的作用及用法跟less中的一模一样，调用rgb/rgba函数可以返回一个16进制的颜色（跟CSS中的用法一样），例如“rgb (255, 0, 0);(返回值是#F00)”，调用red/green/blue函数可以返回传入16进制颜色中代表红/绿/蓝色的部分被转成10进制的数值，调用mix函数可以返回参数1和参数2两种颜色被按参数3比例混合在一起之后的新颜色，格式为“mix (#f00, #00f, 25%);(//25%是第一种颜色所占的比例，返回值是#3f00bf)”，调用length函数可以返回传入列表的长度值，例如“$list: “A”, “B”, C, “D”;  length ($list);(//4)”，调用nth函数可以返回参数1列表中的第参数2个数据，格式为“nth ($list, $n);”，调用join函数可以返回参数1和参数2两个列表被按照参数3连接符连接在一起的新列表，参数3的默认值是auto，此外还有comma（强制全使用逗号连接）和space（强制全使用空格连接）可以选，格式为“join ($list1, $list2, comma);”，调用append函数可以返回参数2数据被按照参数3连接符添加到参数1列表末尾之后的新列表，格式为“append ($list1, $val, comma)”，调用zip函数可以返回传入多个列表被结合成的一个多维列表，例如“zip (1px 2px 3px, solid dashed dotted, green blue red);(//返回值是(1px solid green), (2px dashed blue), (3px dotted red) )”，调用index函数可以返回参数2数据在参数1列表中的位置值，格式为“index ($list, $value);”，sass中层级结构的格式和“&”符号的用法跟less中的一模一样，继承混合的格式为“.center {position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);}  .father {@extend .center;  width: 300px;  height: 300px;  background: red;  .son {@extend .center;  width: 200px;  height: 200px;  background: blue;} }”，sass中没有匹配模式，但支持条件判断，只不过sass中的条件判断支持得更为彻底，支持@if、@else if、@else语句，可以代替匹配模式，例如“@mixin triangle ($dir, $width, $color) {width: 0;  height: 0;  border-width: $width;  border-style: solid;  @if ($dir == Up) {border-color: transparent transparent $color transparent;} @else if ($dir == Down) {border-color: $color transparent transparent transparent;} @else if ($dir == Left) {border-color: transparent $color transparent transparent;} @else if ($dir == Right) {border-color: transparent transparent transparent $color;} }(//跟less中一样，sass中的条件表达式支持通过关系运算符进行真假的判断)”，sass中支持两种循环，@for循环和@while循环，@for循环包括@for from through循环和@for from to循环，其实它俩差不多，只不过前者前后都是闭区间，后者前闭后开，例如“@for $i from 5 through 8 {&:nth-child(#{$i}) {background: deepskyblue;} }”，@while循环的格式为“$i: 5;  @while ($i <= 8) {&:nth-child(#{$i}) {background: deepskyblue;}  $i: $i+1;}”

五、clamp.js插件

clamp.js插件是一个基于JS的插件，可以控制某个标签中文字的行数，多余的文字隐藏掉，结尾显示三个小点，百度搜索clamp.js，然后进入GitHub，先下载到本地并解压缩，在自己的项目中引入clamp.js文件即可，然后找到GitHub页面上的“Sample Usage”标题，就看到如何使用了，直接调用它封装好的函数就可以了，例如“$clamp (myHeader, {clamp: 3});(//myHeader代表某个DOM元素，{clamp: 3}代表显示三行)”