Web前端学习—基础篇(35)_CSS3预处理：什么是预处理？less如何使用？

6.7、预处理

6.7.1、什么是预处理

 一种新语言
 基本思想：用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用预处理语言进行编码工作

6.7.2、less

• less是什么

  less是一种编程语言，主要是为为css增加一些编程的特性，将css作为目标生成文件，然后开发者使用它进行编码工作
  less包含一套自定的语法及一个解析器，用户根据语法定义自己的样式规则，这些规则最终通过解析器编译生成对应css文件，只有被编译后的文件才能被浏览器识别

• less如何实现编程特性

  扩展css语言，添加了一些新的功能，如：变量、混合、函数、运算。

• 好处：

  结构清晰，便于扩展；可以方便地屏蔽浏览器私有语法差异；可以实现多重继承；完全兼容css代码，可以方便地应用到老项目中

6.7.3、预处理编译工具

Koala

6.7.4、less基本语法

1、新建less文件

  1、新建一个后缀名为.less文件
  2、新建一个后缀名为.less的文件放在less文件夹中.
  3、将文件在koala打开，右键单击设置输出路径（新建css文件夹，放置编译后的css文件），执行编译，在html文件中链接编译好的css文件

2、注释

   /* 标准css注释，会保留在编译后的文件中 */
   //单行注释，只在less源文件中保留，编译后被省略

3、@import导入样式

可以导入css文件、less文件

@import必须写在样式表头部最先声明，后面必须要加分号

语法

    @import "*.css";
    @import url(*.css);
    @import url("*.css");

link和@import的区别

   link是html标签；@import是由css定义的
   link在页面载入的同时载入；@import在页面加载完成后加载
   link无兼容问题；@import在css2.1以下浏览器中不支持
   link支持使用JavaScript修改样式；@import不支持JavaScript改变样式

3、变量

在全局样式中可以使用

3.1、定义语法：

  @变量名: 值;
  
  @col: red;
  @wi: width;
  @bo: box;

3.2、使用变量

（1）作为属性值

    .box{ background-color: @col; }

（2）作为属性名**

    .box{ @{wi}: 200px; }

（3）作为选择器名称**

    .@{bo}{ height: 200px;}

4、混入

将一种或一系列属性从一个规则集引入到另一个规则集

4.1、混入类名

（1）定义通用属性

    .fo{ color: #f00; } 在解析后的css文件中可以看到
    .fo2(){ font-size: 30px; } 在解析后的css文件中看不到

（2）调用定义好的类：

    .box{
        .fo;
        .fo2;
    }

4.2、混入参数

(1)混入参数没有设置默认值，调用的时候必须传入参数

    .size(@he){ height: @he; }
    .box{ .size(200px); }

(2)混入参数设置了默认值，调用时如果不传参，使用默认参数设置；如果传入参数，使用传入参数显示

    .radius(@bradiu: 30px){ border-radius: @bradiu; }
    .box{
        .radius;
        .radius(10px);
    }

(3)使用@arguments引用所有传入参数

  .bor(@bw,@bs,@bc){ border: @arguments; }
  .box{
      .bor(10px,solid,red);
  }
  
  .bor2(@bw:10px,@bs:solid,@bc:blue){ border: @arguments;}
  .@{bo}{
      .bor2;
      .bor2(5px);
      .bor2(5px,dotted);
      .bor2(5px,dotted,#000);
  }

5、嵌套

• 模仿HTML结构——选择器嵌套

• 在嵌套中引用父元素 &

6、运算

数值、变量、颜色运算

• 数值运算
  运算符前后用空格隔开

• 变量

• 颜色