less是什么
less css是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护
less于css，相当于jquery于JavaScript
编译工具
koala --初学者推荐 m可以去官网下载：http://koala-app.com/
Node.js库
浏览器端
less语法
less注释
1. /**/ 会被编译出来
2. // 不会被编译
main.less/* 我会被编译出来 */// 我不会被编译出来复制代码
main.css/* 我会被编译出来 */复制代码
变量
用@声明变量
main.less@width: 300px;.box { width: @width; height: @width; background: pink;}复制代码 main.css.box { width: 300px; height: 300px; background: pink;}复制代码 混合
1. 可直接引用 class
main.less.border { border: 1px solid #ddd;}.box { width: @width; height: @width; background: pink; .border;}复制代码 main.css.box { width: 300px; height: 300px; background: pink; border: 1px solid #ddd;}复制代码 2. 可带参数，并且可以设置默认值
main.less.padding(@padding) { padding:@padding;}.margin_left(@margin_left:10px) { margin-left: @margin_left;}.border_radius(@radius:10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.box { width: @width; height: @width; background: pink; .border; .padding(10px); // 无默认值时 必须指定值 .margin_left(20px); // 指定值时 用指定的值 .border_radius(); // 不指定值时 用默认值}复制代码 main.css.box { width: 300px; height: 300px; background: pink; border: 1px solid #ddd; padding: 10px; margin-left: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}复制代码 匹配模式
1. @_ 全部匹配
main.less// 匹配模式 写各个方向的三角形.triangle(top, @w: 10px, @c: red) { border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed;}.triangle(bottom, @w: 10px, @c: red) { border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed;}.triangle(left, @w: 10px, @c: red) { border-width: @w; border-color: transparent @c transparent transparent; border-style: dashed solid dashed dashed;}.triangle(right, @w: 10px, @c: red) { border-width: @w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid;}.triangle(@_, @w: 10px, @c: red) { width: 0; height: 0; overflow: hidden;}.triangle_example { .triangle(top)}复制代码 main.css.triangle_example { border-width: 10px; border-color: transparent transparent #ff0000 transparent; border-style: dashed dashed solid dashed; width: 0; height: 0; overflow: hidden;}复制代码 运算
main.less// 运算@width: 300px;.box_3 { width: @width - 100; height: @width; background: pink;}复制代码 main.css.box_3 { width: 200px; height: 300px; background: pink;}复制代码 嵌套规则
1. 对尾类的使用 - &:hover 或 &:focus (& 代表上一级选择器)
main.html
- 王俊凯
- 王源
- 易洋千玺
main.less// 嵌套规则.list { background: paleturquoise; li { line-height: 45px; color: #333; list-style: none; &:hover { color: #fff; } }}复制代码 main.css.list { background: paleturquoise;}.list li { line-height: 45px; color: #333; list-style: none;}.list li:hover { color: #fff;}复制代码 @arguments变量
@arguments包含了所有传递进来的参数
如果你不想单独处理每一个参数的话就可以这样写
main.less.border_arg(@w: 2px, @type: solid, @c: #ddd) { border: @arguments;}.test_arg { .border_arg();}复制代码 main.css.test_arg { border: 2px solid #dddddd;}复制代码 避免编译
有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法
要输出这样的值我们可以在字符串前加上一个～''
main.less// 其实我们的本意是 要浏览器计算calc.box_4 { width: calc(100% - 30px); height: 300px; background: paleturquoise;}.box_5 { width: ~'calc(100% - 30px)'; height: 300px; background: palegoldenrod;}复制代码 main.css.box_4 { width: calc(70%); height: 300px; background: paleturquoise;}.box_5 { width: calc(100% - 30px); height: 300px; background: palegoldenrod;}复制代码 !important关键字
main.less.border_radius(@radius:10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.box_6 { width: 300px; height: 300px; background: pink; .border_radius()!important;}复制代码 main.css.box_6 { width: 300px; height: 300px; background: pink; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; border-radius: 10px !important;}复制代码 注：以上css均为对应less编译后的样子，html中引入的样式文件为css文件
更多
lesscss网站：
lesscss中文网：