less语法

css预处理语言

语法糖

• 糖衣语法，便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率

编译

• easy less插件
• 在保存时可以在同级目录自动生成一个同名的css文件

注释

• 单行注释

  • ctrl + /
  • 不会编译到css文件中

• 多行注释

  • shift + alt + A

变量

• @变量名: 值;

  • @theme_color: #6cf;

• 注意点

  • 定义变量一般写在整个文档的顶部
  • 变量结尾一定要有分号
  • 调用变量的时候也要带分号

导入

• @import "引入的less文件路径";

• 注意点

  • 1. 和变量语法极其类似，注意区分

  • 2. import 后面是空格 
    

  • 3. 导入的只能是less文件
    

  • 4. 后缀名.less可省略
    

  • 5. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。
    

导出

• 以单行注释的方式写在文档的第一行

• // out: ../css/

• // out: false

  • 禁止导出

css压缩

• 以单行注释的方式写在文档的第一行

• // compress: true

• 作用

  • 去掉css多余的换行空格和分号，减少css文件的体积

映射文件sourceMap

• 以单行注释的方式写在文档的第一行
• // sourceMap: true
• 使浏览器提示出less的行号

导出、压缩、映射文件的连写

• // compress: true, out: ../css/ , sourceMap: true

嵌套

• .box { .son{ width: 100px; &:hover { color: #00a; } } }

  • .box .son { width: 100px; } .box .son:hover{ color: #00a;

• &可以去掉后代选择器的空格

  • 多应用于伪类、伪元素选择器

less中的计算

• • 乘法

• /

  • 除法

  • /在css当中被视为分隔符

  • ./

    • 100px ./ 10
    • 100./10px

  • （）包裹除法的算式

    • (100px / 10px)

• 如果有多个单位的话，则取第一个单位为最终单位

拓展

• mixins混入
• 看代码

css原生语法中的运算

• calc(100px + 100px);

• 语法较为严格

  • 加法和减法运算符前后必须加空格

  • 单位是参与运算的

    • calc(100px + 100px);

      • 正确

    • calc(100px + 100);

      • 不正确

    • calc(100px * 100px);

      • 不正确

    • calc(100px * 100);

      • 正确

• ie9以下是不支持的