- LESS属于 CSS 预处理语言,无法像CSS直接被浏览器识别,需编译
- 编译器只起编译作用,使用上仍然引入生成的.css文件
- 编译环境
- 浏览器端 less.js
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
- Node.js 服务端
npm install -g less
var less = require('less')
less.render('master.less', (e,css) => { console.log(css) })
- 桌面客户端
Koala
Sublime Text 支持 CSS预处理语言 LESS
npm install -g less-plugin-clean-css
- 浏览器端 less.js
- 语法
/* 会被编译至CSS */
// 不会编译到CSS
// 作用域-由本地逐级向上查询
// 导入,可省略后缀,不编译css文件类型
@import "lib.less";
// 字符串插值
@path: "http://assets.fnord.com";
background-image: url("@{path}/images/bg.png");
// 避免编译,加上 ~
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
// 可使用 JavaScript表达式与环境
@var: `"hello".toUpperCase() + '!'`;
@height: `document.body.clientHeight`;
变量
@
作为标识符号,:
号作为赋值符号;完全的常量,只能定义一次。
@md: 992px;
@base-color: #F8F8F8;
.container {
width: @md;
background: @base-color;
}
混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,
从而简单实现class B继承class A中的所有属性
.box-sizing(@box: border-box) {
box-sizing: @box;
-webkit-box-sizing: @box;
-moz-box-sizing: @box;
}
.container {
.box-sizing(); // 若无参数可省略()
}
.border(@size, @line, @color){
border:@arguments; // @arguments 变量,指代传参
}
嵌套
可以在一个选择器中嵌套另一个选择器来实现继承
ul {
list-style: none;
li {
display: inline-block;
a {
padding: .3em .8em;
}
}
}
模式匹配
// 根据不同的值而表现各异
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
// @_ 任意值都会被匹配到
.mixin (@_, @color) {
display: block;
}
导引表达式
// 明度 lightness 大于 50% 会被匹配
.mixin (@color) when (lightness(@color) >= 50%) { }
// 小于 50% 会被匹配
.mixin (@color) when (lightness(@color) < 50%) { }
// 除 true 外皆为假
.mixin(10); // flase
// 逻辑与 条件使用 , 分隔或 and关键字
.mixin (@a) when (@a > 10), (@a < -10) { }
.mixin (@a) when (@a > 10) and (@a < -10) { }
// 可不传参
.mixin (@a) when (@media = mobile) { }
// 对参数进行比较运算
.max (@a, @b) when (@a > @b) { width: @a }
// 使用is*函式,基于值的类型进行匹配
.mixin (@a, @b: 0) when (isnumber(@b)) { }
运算
运算提供了加,减,乘,除操作;能够分辨出颜色和单位
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
border: (@width * 2) solid black;
函数
Type 检测类型
// 值类型
iscolor();
isnumber();
isstring();
iskeyword();
isurl();
// 单位
ispixel(); // px
ispercentage(); // %
isem(); // em
Color 颜色
// + 亮度
lighten(@color, 10%);
// - 亮度
darken(@color, 10%);
// + 饱和度
saturate(@color, 10%);
// - 饱和度
desaturate(@color, 10%);
// + 透明度
fadein(@color, 10%);
// - 透明度
fadeout(@color, 10%);
// 指定透明度
fade(@color, 50%)
// 旋转色调角度
spin(@color, 10);
spin(@color, -10);
// 混合颜色
mix(@color1, @color2);
// 灰度(黑白),移除饱和度
greyscale(@color) ;
Math 运算
// 向上取整
ceil(2.4); // => 3
// 向上取整
floor(2.6); // => 2
// 舍入,保留1位小数点
round(1.67, 1); // => 1.7
// 转百分比
percentage(0.5); // => 50%
参考手册:http://less.bootcss.com/functions/
函数手册:http://www.bootcss.com/p/lesscss/
书写规范:https://blog.csdn.net/sinat_34056695/article/details/76135760