前端02——less

简介

less

Less 是一门 CSS 预处理语言，
它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，
而且可以进行各种计算，使 CSS 更易维护和扩展。

运行

1. Less 可以运行在 Node 或浏览器端。

• 具体方法可以查看less中文网!

2. 可以使用编辑器（VSCode）里的插件
   • 推荐插件——Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro；
     搜索less即可看到；
   • 右键即可编译（compile files）；
     此插件还可以实时编译，可自动编译到同一个css文件。
   • 界面下方有个compile hero:off，打开即可自动编译；（要先保存less文件）
3. 可使用软件——考拉 koala

入门

基本语法

写的简便，可能会看不懂。

变量

• 值 —— @ 开头
• 属性—— @ {} 开头
• url —— @ {url}

• 延迟加载 ！

混合

• 正常嵌套——都是父子关系；
• 加上&变成平级；

嵌套

• 普通混合（重复代码） ——.函数名{}
• 不带输出的混合 ——.函数名（）{}
• 带参数的混合 —— .函数名（@a1，@a2，@a3）{}
• 带参数的混合（有默认值）——.函数名（@a1:值，@a2:值，@a3:值）{}
• 命名参数 —— @a2：值 （指定某个参数的值，在其它参数有默认情况下）
• 匹配模式 ——可以引用其他less文件：@import “”；函数可以 重载 和 默认加载(@_）

注释

• //右面的注释不会被编译出来
• /* */中间的注释会被编译出来