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
<ul class="list">
<li>王俊凯</li>
<li>王源</li>
<li>易洋千玺</li>
</ul>
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.org
lesscss中文网:lesscss.cn