六、CSS预处理器
2018-03-09 本文已影响0人
Love小六六
css预处理器
- 什么是css预处理器
- 基于css的另一种语言
- 通过工具编译成css
- 添加了很多css不具备的特性
- 能提升css文件的组织方式
- 常见css预处理器
- less(基于node)-编译速度快，不需要预先编译，复杂特性繁琐
- sass(基于ruby)
- 预处理器提供的功能
- 嵌套 反映层级和约束
- 变量和计算 减少重复代码
- Extend和Mixin 代码片段（类似JS中的函数）
- 循环 适用于复杂有规律的样式
- import css文件模块化
less嵌套
npm install less // 安装less
//创建t1.less文件
.wrapper{
background:white;
.nav{
font-size: 12px;
}
.content{
font-size: 14px;
&:hover{
background:red;
}
}
}
//如果npm install less -g 将less安装到全局则可以直接lessc来运行.less文件
//否则通过./node_modules/.bin/lessc t1.less>t1.css来运行编译，并把结果输出到t1.css文件
//t1.css文件
.wrapper {
background: white;
}
.wrapper .nav {
font-size: 12px;
}
.wrapper .content {
font-size: 14px;
}
.wrapper .content:hover {
background: red;
}
sass嵌套
npm install node-sass// 安装sass
// 创建s1.scss文件（和t1.less文件一样）
//如果npm install node-sass -g 将less安装到全局则可以直接node-sass来运行.scss文件
//否则通过./node_modules/.bin/node-sass s1.scss>s1.css来运行编译，并把结果输出到s1.css文件
//输出和less的一致
node-sass --output-style expanded s1.scss>s1.css 输出的css空格保持一致，不会根据嵌套结构空格不同
less变量
//s2.less文件
@fontSize: 12px;
@bgColor: red;
.wrapper{
background:lighten(@bgColor, 40%);
.nav{
font-size: @fontSize;
}
.content{
font-size: @fontSize + 2px;
&:hover{
background:@bgColor;
}
}
}
//lessc s2.less>s2.css
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
font-size: 12px;
}
.wrapper .content {
font-size: 14px;
}
.wrapper .content:hover {
background: red;
}
sass变量
在less中变量使用@，在sass中使用$
less mixin
//t3.less
@fontSize: 12px;
@bgColor: red;
.block(@fontSize){
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper{
background:lighten(@bgColor, 40%);
.nav{
.block(@fontSize);
}
.content{
.block(@fontSize + 2px);
&:hover{
background:red;
}
}
}
// 用于解决两个地方用到相同的类，实现样式复用
// 传统写法
<div class='wrapper'>
<div class="block nav"></div>
<div class="block content"></div>
</div>
// 现在通过把block写成一个函数，复制到需要的地方，即nav类和content类都包含，就不需要把block抽离出来了
<div class='wrapper'>
<div class="nav"></div>
<div class="content"></div>
</div>
// 编译结果，block不见了，但会嵌入在nav和content两个类中
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content {
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper .content:hover {
background: red;
}
sass mixin
less中可以直接.block声明和调用
sass中需要@mixin block来声明,调用时加@include
$fontSize: 12px;
$bgColor: red;
@mixin block($fontSize){
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper{
background:lighten($bgColor, 40%);
.nav{
@include block($fontSize);
}
.content{
@include block($fontSize + 2px);
&:hover{
background:red;
}
}
}
less extend
// extend用于把公共样式的选择器放在一起，解决了mixin的代码重复问题
@fontSize: 12px;
@bgColor: red;
.block{
font-size: @fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper{
background:lighten(@bgColor, 40%);
.nav:extend(.block){
color: #333;
}
.content{
&:extend(.block);
&:hover{
background:red;
}
}
}
// 编译为css文件
.block,
.wrapper .nav,
.wrapper .content {
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper {
background: #ffcccc;
}
.wrapper .nav {
color: #333;
}
.wrapper .content:hover {
background: red;
}
sass extend
// 通过@extend来调用
$fontSize: 12px;
$bgColor: red;
.block{
font-size: $fontSize;
border: 1px solid #ccc;
border-radius: 4px;
}
.wrapper{
background:lighten($bgColor, 40%);
.nav{
@extend .block;
color: #333;
}
.content{
@extend .block;
&:hover{
background:red;
}
}
}
less loop
//按照规则生成一系列css文件
.gen-col(@n) when (@n > 0){
.gen-col(@n - 1);
.col-@{n}{
width: 1000px/12*@n;
}
}
.gen-col(12);
// 编译结果
.col-1 {
width: 83.33333333px;
}
.col-2 {
width: 166.66666667px;
}
.col-3 {
width: 250px;
}
.col-4 {
width: 333.33333333px;
}
.col-5 {
width: 416.66666667px;
}
.col-6 {
width: 500px;
}
.col-7 {
width: 583.33333333px;
}
.col-8 {
width: 666.66666667px;
}
.col-9 {
width: 750px;
}
.col-10 {
width: 833.33333333px;
}
.col-11 {
width: 916.66666667px;
}
.col-12 {
width: 1000px;
}
sass loop
//less用when,通过mixin来递归,sass用if来递归
@mixin gen-col($n){
@if $n > 0 {
@include gen-col($n - 1);
.col-#{$n}{
width: 1000px/12*$n;
}
}
}
@include gen-col(12);
// 上述方法用的较少，而是用for循环较多（less不支持for循环）
@for $i from 1 through 12 {
.col-#{$i} {
width: 1000px/12*$i;
}
}
less import
// 引入不同文件，编译时会编译成一个文件
// main.less
@import "./import-variable";
@import "./import-module1";
@import "./import-module2";
// import-variable.less
@themeColor: blue;
@fontSize: 14px;
// import-module1.less
.module1{
.box{
font-size:@fontSize + 2px;
color:@themeColor;
}
.tips{
font-size:@fontSize;
color:lighten(@themeColor, 40%);
}
}
// import-module2.less
.module2{
.box{
font-size:@fontSize + 4px;
color:@themeColor;
}
.tips{
font-size:@fontSize + 2px;
color:lighten(@themeColor, 20%);
}
}
// 编译后的css文件
.module1 .box {
font-size: 16px;
color: blue;
}
.module1 .tips {
font-size: 14px;
color: #ccccff;
}
.module2 .box {
font-size: 18px;
color: blue;
}
.module2 .tips {
font-size: 16px;
color: #6666ff;
}
可以按照结构编写不同的less文件，不用担心多个css文件耗费性能
sass import
和less一致
