- 介绍
- 语法
介绍
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。
但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。
less需要 nodejs支持。
安装： > npm install -g less
查看: > lessc
编译
命令编译：
> lessc aaa.less aaa.css
@charset "utf-8";
@bgColor:red;body{ ?background-color:@bgColor; ?}
html页面引入：
<link rel="stylesheet" ?href="index.css" type="text/css" />
或
<style type="text/css" >
@import url("index.css");</style>
Koala外部编译器可编译Sass和Less文件：
安装地址：http://koala-app.com/index-zh.html
在内部将less文件放入到一个less文件夹下，同时建立css文件夹，则会自动将less文件转化为css文件。
因编译后的css，如果压缩，Output Style:Compress, 如果有问题不好跟踪，因此在设置中建立map地址映射（资源地图文件）。 》Setting -》Less -》Default Options -》Sourse Map.
这样就会在页面css跳出时，直接映射到less文件上。
Webstorm 内置编译器：
File-》Setting -》 Tools -》 File watcher -》 Add Less（添加Less）
注意：npm已经添加有less命令，同时 注意output路径中默认是编译到同级目录下，因此如果不同级注意 ../css/*****
语法：
- 注释
- 变量
- 混合（mixins）
变量
@charset "utf-8";@bColor: green;@boderColor: red;@imgurl: "../img";body{ ???background-color:@bColor;}div{ ???border: solid 1px @boderColor;}div{ ???background-image: url("@{imgurl}/01.png");}变量使用
》@变量名： 变量值； 在使用的地方 @变量名， 注意变量值应为css内容。
》@变量名： 拼接字符串； "@{变量名}拼接内容" 注意 要为{}括号
注释
// 单行注释，编译后不保留，因css本身不支持 //
/**/ 多行注释，编译后保留
混合
犹如js函数一般，将一部分css，包裹在一个函数中，在使用的地方直接调用即可。
.font(@color: #ffffff, @size: 14px){ font-size: @size; color: @color;}.error{.font(#ff0000, 18px);}.normal{ .font();}混合定义： 》.混合(@参数名:默认参数值){****}
注意：必须以 点 开头， 混合中的参数为形参，可传可不传，使用如同js方法一样使用即可。
// TODO
css-Less
原文地址：https://www.cnblogs.com/DennyZhao/p/8781832.html