- 变量 - 它可以让你更轻松的在整个样式表中定义和更改值(这个功能
CSS
在未来某一天也有可能会实现)。 - 动态计算值 -
CSS
中最近出了一个cal()
, 但它只适合用于长度的计算。 - Mixins - 可以让你重用或者组合样式,而且支持传递参数。
- 函数 - 它为你提供了一些方便的程序去操纵颜色,转换图像等。
1. 引用文件
<link rel="stylesheet/less" type="text/css" href='style.less'/> <script src="less.js"></script>less.js是官网文件,style.less就less代码
2. 可定义变量 在.less文件中编写
@color-primary: #5B83AD; body{ background-color:@color-primary; }3. 可引用定义好的css,并写自己单独样式
.div_test{ width:50%; height:50px; } .div_test_1{ background-color:#fff; .div_test } .div_test_2{ background-color:black; .div_test }4. 嵌套规则
.div_test_3{ background-color:#fff; .div_test_4{ color:#ff0000; } .div_test_5{ color:#00ff00; } }等同于
.div_test_3{ background-color:#fff; } .div_test_3 .div_test_4{ color:#ff0000; } .div_test_3 .div_test_5{ color:#00ff00; }
5.函数
降低颜色透明度的函数。
@var: #004590; div{ height: 50px; width: 50px; background-color: @var; &:hover{ background-color: fadeout(@var, 50%) } }