前端技术之CSS工程化
V1.0
第1章CSS预处理器
1.1 less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
Ø 初次邂逅
浏览器本身是不支持less语法的。我们需要通过编译将less转化为css代码。
可以通过less官网提供的js文件进行编译。
less编译文件的bootCDN地址:
https://cdn.bootcss.com/less.js/3.0.4/less.min.js
需要注意的是,该js文件必须要在style标签下面.因为这是一个解析动作需要拿到style中的信息。且这个style标签的type一定得是text/less的。
也可以通过编译工具来进行编译，比如考拉。
下载地址：http://koala-app.com/
当然，最终对less的编译我们都会放进我们项目的工程化流程中使用构建工具来
Ø 变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
使用@来申明一个变量：@pink：pink;
注意（如果属性值有单位一般我们都会把单位放到变量上,这样）
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名URL：@{selector} @{url}的形式
3.变量的延迟加载
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //3
@var: 3;
}
one: @var; //1
}
Ø 嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
#list{
list-style: none;
line-height: 30px;
width: 300px;
background: pink;
margin: 0 auto;
li{
height: 30px;
}
a{
float: left;
&:hover{
color: red;
}
}
span{
float: right;
}
}
Ø 混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
- 1.普通混合
最终编译时会输出到目标文件中
.juzhong{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
- 2.不带输出的混合
最终编译时不会输出到目标文件中
.juzhong(){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
- 3.带参数的混合
使混合更为灵活
.juzhong(@w,@h,@c){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
- 4.带参数并且有默认值的混合
.juzhong(@w:100px,@h:100px,@c:pink){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
- 5.命名参数
当实参与形参不匹配时，可以命名传参
.juzhong(@h:200px;@c:deeppink;);
- 6.匹配模式
定义的混合命名一致时，可以通过第一个参数进行标识区分
.triangle(top,@w:10px,@c:pink){}
.triangle(bottom,@w:10px,@c:pink){}
.triangle(left,@w:10px,@c:pink){}
.triangle(right,@w:10px,@c:pink){}
//不管哪个同名混合被调用时，都会隐式的执行@_标识的混合
.triangle(@_,@w:10px,@c:pink){}
-
7.arguments变量
实参列表
Ø 继承
继承是对选择器的组合，而不是对样式集的复制
nav ul {
&:extend(.inline);
background: blue;
}
Ø Import
你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:
@import "lib.less";
@import "lib";
Ø 循环
less本身没有循环的语法是通过递归来构建循环
.test(@n) when(@n > 0){
.test(@n - 1);
.box{
width: 100px * @n;
}
}
.test(12);
1.2 sass
Sass 是成熟、稳定、强大的 CSS 扩展语言。（扩展名一般使用scss）
Ø 变量
变量使用$定义,有别于less中的@
Ø 嵌套
规则与less类似 ; 但是建议不要出现; 和 {}
Ø 混合
混合使用@mixin声明 有别于less中的.
调用时必须@include
@mixin black($color){
background: $color;
}
@include black(#000000);
Ø 继承
@extend .class
Ø 循环
less本身没有循环的语法是通过递归来构建循环
sass也可以利用递归来构建循环。但sass平台另外提供了一套循环语法
@mixin test($n){
@if $n > 0{
@include test($n - 1);
.test{
width: 100px*$n;
}
}
}
@include test(12);
@for $a from 1 through 9{
.test{
width:100px*$a;
}
}
1.3 预处理器总结
1.嵌套可以反映html的层级和约束
2.变量和计算可以减少重复代码
3.Extend 和 Mixin可以复用代码片段
4.循环适用于复杂有规律的样式
5.import css文件模块化
第2章 CSS后置处理器
2.1 PostCss
Ø 安装node
安装包一键安装
Ø 安装postcss-cli
npm install postcss-cli postcss –D
Ø 安装插件
npm install autoprefixer -D
npm install cssnano -D
Ø 配置文件(.postcssrc.js)
const autoprefixer = require("autoprefixer");
const cssnanao = require("cssnano");
module.exports={
plugins:[
autoprefixer(),
cssnanao
]
}
Ø 编译命令
postcss src/index.css -o build/index.css