一、Less简介
less是一门CSS的预处理语言
less是一个css的增强版,通过less可以编写更少的代码
实现更强大的样式
在less中添加了许多新特性,像对变量的支持、对mixin的支持....
less的语法大体上和css语法一直,但less中增加了许多对css扩展
浏览器无法直接执行less代码,要执行必须先将less转换为css再由
浏览器执行
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,
如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),
也可在服务端运行 (借助 Node.js)。
二、Less的基本用法
1、变量
body{
background-color: #bbffaa;
.box2{
background-color: red;
.box4{
background-color: blue;
}
}
.box3{
background-color: orange;
}
}
// 变量:在变量中可以存储一个任意的值
// 并且可以在需要时,任意改变变量的值
//变量的语法:@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
// 使用变量时如果是直接使用则以@变量名的形式使用即可
width: @a;
color: @b;
}
// 作为类名或者一部分值使用时必须以@{变量名}的形式使用
.@{c}{
width: &#