Less最佳入门实战

目录

Less——CSS预处理

可理解为一个像JQuery的js库，引入Less.js即可使用Less编译CSS。其中下文使用了的是Koala的Less预编译工具。可更方便快速简单的使用。

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

使用工具

Koala— —Less预编译

安装下载Koala ClickHere 》

自行setting语言为中文方便操作。其中拉进已经创建好有less文件的项目进入，显示结果如下图：

右键点击less设置输出路径为xxx.css,即可创建对应的文件。html引用该css文件即可。其中在less写的css通过编译对应绑定的xxx.css即也是相同代码。可选择压缩还是normal模式。

上图我设置了自动编译，则只需维护Less文件即可在浏览器看到效果！0v 0~

在antDesign pro项目直接用

默认使用less为样式文件！

---

知识点

注释

//该注释不会被编译
/* 该注释会被编译 */

---

变量

less

@testBg:blue;
@testWidth:300px;
/*变量例子出现的内容*/
body{
    width:@testWidth;
    height:@testWidth - 20;//注意，运算符左右保留空格才保证不出错（+-*/）
    background: @testBg;
}

less编译后的css

/* 该注释会被编译 */
/*变量例子出现的内容*/
body {
  width: 300px;
  height: 280px;