第六章 Css预处理器

• 基于CSS的另一种语言
• 通过工具编译成CSS
• 添加了很多CSS不具备的特性
• 能提升CSS文件的组织

less使用js编写，但是稍繁琐，功能较简单，可以直接引入。sass使用vb编写

• 嵌套 反映层级和约束
• 变量和计算 减少重复代码
• Extend和Mixin代码片段
• 循环 适用于复杂有规律的样式
• import Css文件模块化

less的使用

npm install less -g  //安装less
lessc demo1.less // 把demo1.less编译成demo1.css
lessc demo1.less > demo1.css  //编译后写入到demo1.css中

嵌套

less

body {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 900px;
    margin: 0 auto;
    .nav {
        height: 30px;
        background-color: #eee;
        color: red;
        text-align: center;
        line-height: 30px
    }
    .container {
        border: 1px solid green;
        height: 500px;
        background-color: lightblue;
        &:hover { //&表示同级
        background-color: orange;
        }
    }
}

编译后

body {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 900px;
  margin: 0 auto;
}
.wrapper .nav {
  height: 30px;
  background-color: #eee;
  color: red;
  text-align: center;
  line-height: 30px;
}
.wrapper .container {
  border: 1px solid green;
  height: 500px;
  background-color: lightblue;
}
.wrapper .container:hover {
  background-color: orange;
}

sass

node-sass  --output-style expanded demo1.sass > sass.css

变量

less

@bgColor: red;
@fontSize: 16px;

body {
    margin: 0;
    padding: 0;
}
.wrapper {
    width: 900px;
    margin: 0 auto;
    .nav {
        height: 30px;
        background-color: lighten(@bgColor,40%); //lighten函数
        font-size: @fontSize+6px; //相加时要带单位，相乘可以忽略
        color: red;
        text-align: center;
        line-height: 30px
    }
    .container {
        border: 1px solid green;
        height: 500px;
        background-color: lightblue;

        &:hover {
        background-color: orange;
        }

    }
}

sass

sass采用$前缀定义一个变量
$fontSize: 18px;
$bgColor: red;

mixin

mixin 用来在样式表中复用 一段css代码；

语法

.mixin-name(arg1,arg2) {
  //some css code
}

//mixin的语法类似选择器，不同的是它支持括号传参；

//示例：定义两个大小，边框相同，背景色不同的正方形
//less
.box {
    height： 30px;
    width: 30px;
    border: 1px solid red;
}

.box1 {
  .box();
    background-color: red;
}
.box2 {
    .box();
    background-color: green;
}

//编译后的css
.box {
  height: 30px;
  width: 30px;
  border: 1px solid black;
}
.box1 {
  height: 30px;
  width: 30px;
  border: 1px solid black;
  background-color: red;
}
.box2 {
  height: 30px;
  width: 30px;
  border: 1px solid black;
  background-color: green;
}

因为.box没有带括号，所以显示在编译后的css中

@bgColor: #ccc;
@textColor: red;
@containerBgColor: orange;
@fontSize: 16px;
body {
    margin: 0;
    padding: 0
}

/*mixin方法1：
带括号的mixin不会被编译在css文件中*/
.head(@bgColor,@textColor){
    height: 30px;
    text-align: center;
    background-color: @bgColor;
    color: @textColor;
    line-height: 30px;
}
/*mixin方法2：
不带括号的mixin会出现在编译后的css中*/
.w {
    width: 990px;
}
.wrapper {
    .w(); //即使mixin不带括号，这里要带括号
    margin:  0 auto;
    .nav {
        .head(@bgColor,@textColor)
    }
    .container {
        height: 500px;
        background-color: @containerBgColor;
    }
    .footer {
        .head(@bgColor,@textColor)
    }
}

sass

sass中的mixin语法

@mixin mixin-name() {
  // some css code
}
//在调用时
.box1 {
  @include block($fontSize)
}

less在定义mixin时，可以是类也可以时mixin，前者可以转换为后者，sass中要求更加严格，两者不能混用，在定义和使用时分别要加@mixin @include。

extend将具有相同样式的选择器写成一组

.box {
  height: 150px;
  width: 150px;
  border: 1px solid red;
}
.wrapper {
    width: 500px;
    margin: 0 auto;
    .box1 {
        &:extend(.box);
        background-color: orange;  
    };
    .box2 {
        &:extend(.box);
        background-color: blue;
    }
}

编译后

.box,
.wrapper .box1,
.wrapper .box2 {
  height: 130px;
  width: 130px;
  border: 1px solid black;
}
.wrapper {
  width: 200px;
  margin: 0 auto;
}
.wrapper .box1 {
  background-color: red;
}
.wrapper .box2 {
  background-color: green;
}

loop

当需要生成一系列具有每种规律的css样式时，我们可以使用less提供的loop循环，来实现。

//loop对空格要求十分严格，一定要注意断开
.gen-col(@n) when (@n>0){//1.when前后必须是空格
    .gen-col(@n -1);
    .col-@{n} {
      width: 1000px/12*@n;
    }
}

import

@import "./6-import-variable";
@import "./6-import-module1"

Css预处理器框架

Css预处理器框架.png

est