CSS预处理器

用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处

• 简而言之：CSS预处理器就是升级版CSS
• 常见的css预处理器:
  Less, Sass, Stylus

Less(Leaner Style Sheets)

一门 CSS 预处理语言，为CSS赋予了动态语言的特征

• 利于维护与复用
• CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
• 一句话：用类似JS的语法去写CSS

基本使用

• 编写less文件-->引入less文件-->引入less.js-->运行
• ==注意==：一定要先引入less.css再引入less.js

<link rel="stylesheet/less" href="css/01.less">
<script src="js/less.js"></script>

• ==注意==：如果less代码是写到单独的文件中,一定要在服务端环境运行才能生效

注释

• less中的注释和JS中的注释一样, 也有单行注释和多行注释
• less中单行注释和多行注释最大的区别在于: 是否会被编译
• 单行注释不会被编译(不会出现在编译后的文件中)
• ==多行注释会被编译==(会出现在编译后的文件中)

变量

• 格式：@变量名称: 值;

@w: 400px;
@h: @w;

• 局部变量全局变量与js一样
• ==注意==：less中的变量是延迟加载的, 写到后面也能在前面使用
• 和js一样在访问变量时会采用就近原则
• 和js一样不同作用域的变量不会相互影响

变量插值：格式: @{变量名称}

• 在less中如果属性的取值可以直接使用变量
• 如果是属性名称或者选择器名称并不能直接使用变量
• 如果属性名称或者选择器名称想使用变量中保存的值,那么必须使用变量插值的格式

@size: 200px;
@w: width;
@s: div;
@{s}{
  @{w}: @size;
  height: @size;
  background: red;
}

运算

• CSS3中新增了一个calc函数,可以实现简单的+ - * / 运算

margin-left: calc(-200px * 0.5)

• less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算

margin-left: (-200px / 2)

混合(Mix in)

• 如果混合名称的后面没有(),那么在预处理的时候, 会保留混合的代码
• 如果混合名称的后面加上(),那么在预处理的时候, 不会保留混合的代码

.center(@w:100px, @h:100px, @c:red){
  width: @w;
  height: @h;
  background: @c;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father{
  .center(200px,200px,red);
  .son{
    .center(@c:skyblue);
  }
}

可变参数

• less中的@arguments和js中的arguments一样, 可以拿到传递进来的所有形参
• less中的...表示可以接收0个或多个参数
• 如果形参列表中使用了...,那么...必须写在形参列表最后

.animate(@name, @time, ...){
  transition: @arguments;
}
.a{
  .center(@c:green);
  .animate(all, 1s, linear, 0.5s);
}
.a:hover{
  width: 300px;
  height: 300px;
}

匹配模式

• @_: 表示通用的匹配模式
• 无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码

.triangle(@_, @w, @c){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}
.triangle(Right, @w, @c){
  border-color: transparent transparent transparent @c;
  border-width: @w;
}
.triangle(Down, @w, @c){
  border-color: transparent transparent @c transparent;
  border-width: @w;
}
.triangle(Left, @w, @c){
  border-color: transparent @c transparent transparent;
  border-width: @w;
}
.triangle(Top, @w, @c){
  border-color: @c transparent transparent transparent;
  border-width: @w;
}
.a{
  .triangle(Down, 20px, pink);
}

导入其它文件

@import "triangle";

内置函数

由于less的底层就是用JavaScript实现的,所以JavaScript中常用的一些函数在less中都支持

// 混杂方法
    /*
    image-size("file.jpg"); // => 100px 50px
    image-width("file.jpg"); // => 100px
    image-height("file.jpg"); // => 50px

    // 单位转换
    convert(9s, "ms"); // => 9000ms
    convert(14cm, mm); // => 140mm
    convert(8, mm); // => 8

    // 列表
    @list: "A", "B", C, "D";
    length(@list); // => 4
    extract(@list, 3); // => C
    */
    // 数学
    /*
    ceil(2.1); // => 3 向上取整
    floor(2.1); // => 2 向下取整
    percentage(.3); // => 30% 转百分比
    round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
    sqrt(25cm); // => 5cm 取平方根
    abs(-5cm); // => 5cm 取绝对值
    pi(); // => 3.141592653589793 圆周率π
    max(3px, 42px, 1px, 16px); // => 42px
    min(3px, 42px, 1px, 16px); // => 1px
    */
    // 字符串
    /*
    replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
    */
    // 判断类型
    /*
    isnumber(56px); // => true 是否含数字
    isstring("string"); // => true
    iscolor(#ff0); // => true
    iscolor(blue); // => true
    iskeyword(keyword); // => true
    isurl(url(...)); // => true
    ispixel(56px); // => true
    isem(7.8em); // => true
    ispercentage(7.8%); // => true
    isunit(4rem, rem); // => true 是否为指定单位
    isruleset(@rules); // => true 是否为变量
    */
    // 颜色操作
    /*
    增加饱和度
    saturate(color, 20%)
    减少饱和度
    desaturate(color, 20%)
    增加亮度
    lighten(color, 20%)
    减少亮度
    darken(color, 20%)
    降低透明度
    fadein(color, 10%)
    增加透明度
    fadeout(color, 10%)
    设置绝对不透明度(覆盖原透明度)
    fade(color, 20%)
    旋转色调角度
    spin(color, 10)
    将两种颜色混合，不透明度包括在计算中。
    mix(#f00, #00f, 50%)
    与白色混合
    tint(#007fff, 50%)
    与黑色混合
    shade(#007fff, 50%)
    灰度，移除饱和度
    greyscale(color)
    返回对比度最大的颜色
    contrast(color1, color2)
    */
    // 颜色混合
    /*
    每个RGB 通道相乘，然后除以255
    multiply(color1, color2);
    与 multiply 相反
    screen(color1, color2);
    使之更浅或更暗
    overlay(color1, color2)
    避免太亮或太暗
    softlight(color1, color2)
    与overlay相同，但颜色互换
    hardlight(color1, color2)
    计算每个通道(RGB)基础上的两种颜色的平均值
    average(color1, color2)
    */

@str1: "../images/1.jpg";
@str2: replace(@str1, "1", "2");
.a{
  width: 200px;
  height: 200px;
  //background: url("../images/1.jpg");
  //background: url(@str2);
  background:desaturate(yellow, 50%);
}
.a:hover{
  background:saturate(yellow, 50%);
}

层级结构

• 如果在某一个选择器的{}中直接写上了其它的选择器,会自动转换成后代选择器
• &的作用,是告诉less在转换的时候不用用后代来转换,直接拼接在当前选择器的后面即可

.father{
  .center(200px,200px,red);
  .pot;
  &:hover{
    background: yellowgreen;
  }
  &::before{
    content: "子元素";
    display: block;
    background: pink;
    width: 100px;
    height: 100px;
  }
  .son{
    .center(@c:skyblue);
    .pot;
  }
}

继承

• 使用时的语法格式不同
• 转换之后的结果不同(混合是直接拷贝, ==继承是并集选择器==)

.father:extend(.pot){
  .center(200px, 200px, red);
  .son:extend(.pot){
    .center(100px, 100px, yellow);
  }
}

条件判断

less中可以通过when给混合添加执行限定条件,只有条件满足(为真)才会执行混合中的代码

• when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断
• (),()相当于JS中的||

.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}

• ()and()相当于JS中的&&

.center(@w:100px, @h:100px, @c:red) when(ispixel(@w))and(ispixel(@h)){
  width: @w;
  height: @h;
  background: @c;
}