LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情。
变量
请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次。
// Less@nice-blue: #5B83AD;#header { color: @nice-blue; }// 输出#header { ?color: #5083ad;}** 甚至可以用变量名定义为变量: **
// Less@fnord: "I am fnord.";@var: ‘fnord‘;#header:after{content: @@var;}//输出#header:after { ?content: "I am fnord.";}混合
在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:
// Less.bordered { ?border-top: dotted 1px black; ?border-bottom: solid 2px black;}#menu a { ?color: #111; ?.bordered;}// 输出.bordered { ?border-top: dotted 1px black; ?border-bottom: solid 2px black;}#menu a { ?color: #111; ?border-top: dotted 1px black; ?border-bottom: solid 2px black;}带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:
.border-radius (@radius) { ?border-radius: @radius; ?-moz-border-radius: @radius; ?-webkit-border-radius: @radius;}#header{ ?.border-radius(6px)}// 输出#header { ?border-radius: 6px; ?-moz-border-radius: 6px; ?-webkit-border-radius: 6px;}** 我们还可以像这样给参数设置默认值:**
.border-radius (@radius:5px) { ?border-radius: @radius; ?-moz-border-radius: @radius; ?-webkit-border-radius: @radius;}#header{ ?.border-radius;}// 输出#header { ?border-radius: 5px; ?-moz-border-radius: 5px; ?-webkit-border-radius: 5px;}** 你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:**
// Less.wrap () { ?text-wrap: wrap; ?white-space: pre-wrap; ?white-space: -moz-pre-wrap; ?word-wrap: break-word;}pre { .wrap }// 输出pre { ?text-wrap: wrap; ?white-space: pre-wrap; ?white-space: -moz-pre-wrap; ?word-wrap: break-word;}** @arguments 变量**
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:
// Less.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { ?box-shadow: @arguments; ?-moz-box-shadow: @arguments; ?-webkit-box-shadow: @arguments;}#head{ ?.box-shadow(2px, 5px);}// 输出#head { ?box-shadow: 2px 5px 1px #000000; ?-moz-box-shadow: 2px 5px 1px #000000; ?-webkit-box-shadow: 2px 5px 1px #000000;}嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:
** 注意 & 符号的使用—如果你想写串联选择器，** 而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.
// Less#header { ?color: black; ?.navigation { ???font-size: 12px; ?} ?.logo { ???width: 300px; ???&:hover { text-decoration: none } ?}}//输出#header { ?color: black;}#header .navigation { ?font-size: 12px;}#header .logo { ?width: 300px;}#header .logo:hover { ?text-decoration: none;}运算
任何数字、颜色或者变量都可以参与运算。
// Less@base: 5%;@filler: @base * 2;#head{ ?color: #888 / 4; ?height: 100% / 2 + @filler;}// 输出#head { ?color: #222222; ?height: 60%;}Math 函数
LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值：
// Lessround(1.67); // returns `2`ceil(2.4); ??// returns `3`floor(2.6); ?// returns `2`percentage(0.5); // returns `50%`
命名空间
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用：
// Less 【你只需要在 #header a中像这样引入 .button:】#bundle { ?.button () { ???display: block; ???border: 1px solid black; ???background-color: grey; ???&:hover { background-color: white } ?} ?.tab () { //不调用，不输出 ???color: #fff; ?}}#header a { ?color: orange; ?#bundle > .button;}// 输出#header a { ?color: orange; ?display: block; ?border: 1px solid black; ?background-color: grey;}#header a:hover { ?background-color: #ffffff;}作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
// Less @var: red;#page { ?@var: white; ?#header { ???color: @var; // white ?}}#footer { ?color: @var; // red ?}// 输出#page #header { ?color: #ffffff;}#footer { ?color: #ff0000;}#page #header { ?color: #ffffff;}#footer { ?color: #ff0000;}注释
CSS 形式的注释在 LESS 中是依然保留的:
/* ??多行注释 ?Hello, I‘m a CSS-style comment ??Hello, I‘m a CSS-style comment*/// 单行注释
Importing
你可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:
@import "lib.less";@import "lib";// 如果你想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以:@import "lib.css";
字符串插值
变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构
@base-url: "http://assets.fnord.com";background-image: url("@{base-url}/images/bg.png");避免编译
有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法。要输出这样的值我们可以在字符串前加上一个 ~, 例如:
// Less.class { ?filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}//输出.class { ?filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}JavaScript 表达式
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:
@var: `"hello".toUpperCase() + ‘!‘`;// 输出@var: "HELLO!";
参考：https://www.cnblogs.com/yldf55/p/5812438.html
使用LESS对CSS进行预处理
原文地址：https://www.cnblogs.com/yaotome/p/9317054.html