1. less嵌套
这个不多说，大家比较常用
2. 变量
@white:#fff;
3. 导入
@import 路径 //比较常用
@import './style.less';
1、@import (reference)
用于导入外部文件，但不会将导入的样式添加到编译的CSS文件中。 这是在版本1.5.0 中发布的。
@import (reference) './style.less';
2、@import (inline)
@import(inline)会将CSS复制到输出CSS文件中，而不进行处理。 当CSS文件不是LESS兼容时，这是有用的。 虽然LESS支持大多数标准CSS，但在某些地方不支持注释，并且不修改CSS，它不会支持所有已知的CSS黑客。 即使 @import(inline)不会处理CSS，它将确保所有的CSS将在一个文件中。
3、@import (less)
@import(less)会将文件导入为LESS文件，而不管文件扩展名是什么。
@import (less) "//demosource/less.txt";
.para_1 {
color: red;
.style;
}
.para_2 {
color: blue;
}
demosource/less.txt
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
.style {
font-family: "Comic Sans MS";
font-size: 20px;
}
.para_1 {
color: red;
font-family: "Comic Sans MS";
font-size: 20px;
}
.para_2 {
color: blue;
}
4、@import(css)会将文件导入为常规CSS，而不管文件扩展名。 这是在版本1.4.0 中发布的。与（3）类似效果
5、@import(once)
@import(once)确保文件只导入一次，并且对该文件将忽略任何以下import语句。 这是 @import statments的默认行为。
6、 @import(multiple)
您可以导入具有相同名称的多个文件。 这与一次完全相反。
7、@import (optional)
可选允许您在文件不存在时导入文件。则文件不存在也不会报错。
允许在 @import 语句中使用多个关键字，但必须使用逗号分隔关键字。
@import (less, optional) "custom.css";
4. less操作
LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。
@fontSize:10px;
.class{
font-size:@fontSize*10;
}
5. less内置函数
js里面很多内置函数less都可以用，比如什么ceil,round等等。
函数地址： http://less.bootcss.com/functions/ 用的比较少，不做详细介绍。
e.g.:
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
width: percentage(@width); //100%
}
6. 扩展（很有用却很少被用）
Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
编译之后
h2 {
font-style: italic;
}
.style,
h2 {
background: green;
}
7. 混合（Mixins，很有用）
混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。 1,2,5情况比较常用详细说明
less mixin的使用
1、 不输出mixin
.a(){
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}
.myclass {
background: #64d9c0;
padding-left: 100px;
}
//可以看到没有a输出
2、 输出mixin
.a{
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a; //.a() //一样的效果
}
.a{
padding-left: 100px;
}
.myclass {
background: #64d9c0;
padding-left: 100px;
}
//可以看到有a输出
3、Mixins中的选择器
.mixin() {
&:hover {
background: #FFC0CB;
}
}
a {
.mixin();
}
a:hover {
background: #FFC0CB;
}
4、 !important
.mixin(){
color: #900;
background: #F7BE81;
}
.para1{
.mixin();
}
.para2{
.mixin() !important;
}
.para1 {
color: #900;
background: #F7BE81;
}
.para2 {
color: #900 !important;
background: #F7BE81 !important;
}
8. 混合参数
1、参数可以使用逗号或分号分隔
.mixin(@color) {
color: @color;
}
.mixin(@color; @padding: 2px) {
color: @color;
padding: @padding;
}
.myclass {
color: #FE9A2E;
padding: 2px;
}
. myheader{
border:2px dashed green;
}
2、命名参数
通过使用它们的名称提供参数值而不是位置。
.mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}
.class1 {
color: #F5A9D0;
font-size: 20px;
}
.class2 {
color: #F79F81;
font-size: 20px;
}
9. 循环(很有用）
.mloop(@n,@i:5) when (@i <= @n) {
.mt@{i}{
margin-top: @i * 1px;
}
.mr@{i}{
margin-right: @i * 1px;
}
.mb@{i}{
margin-bottom: @i * 1px;
}
.pb@{i}{
padding-bottom: @i * 1px;
}
.pl@{i}{
padding-left: @i * 1px;
}
.mloop(@n,(@i + 5));//递归调用
}；
.mloop(80); //执行 以5为梯度 执行到80
10. 父选择器
这个比较常用 &
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
网友评论