Less学习笔记

关于less的一些知识点笔记

1.变量

变量定义要用@开头，定义完变量后就能在css样式中愉快地使用变量了。

/*less文件*/
@charser "utf-8";
@Width:300px;
@Height:200px;
.box{
width:@width;
height:@Height;
}

/*编译后的文件*/
@charser "utf-8";
.box{
width:300px;
height:200px;
}

2.混合

混合（个人理解），指的是我可以在其他样式中直接调用已经写好的样式。

例如：

/*less文件*/
.border_radius(@width) //带参数的混合  
{
    -webkit-border-radius:@width;
    -moz-border-radius:@width;
        border-radius:@width;
    border:1px solid black;
}
.box{
    width:300px;
    height:200px;
    .border_radius(10px);//调用已经写好的样式，并传入参数10px
}
/*编译后的css文件*/
.box {
  width: 300px;
  height: 200px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid black;
}

带参数的混合支持默认参数。

/*less文件*/
.border_radius(@width:20px) //带默认参数的混合  
{
    -webkit-border-radius:@width;
    -moz-border-radius:@width;
     border-radius:@width;
    border:1px solid black;
}
.box{
    width:300px;
    height:200px;
    .border_radius();//调用已经写好的样式，不传入参数则使用默认参数值20px
}
/*编译后的css文件*/
.box {
  width: 300px;
  height: 200px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  border: 1px solid black;
}

3.匹配模式

匹配模式类似于其他编程语言的switch语句，.size 样式提供了三种规格供匹配，而.size(@_)的写法意味着不管匹配哪种“规格”，.size(@_)的样式都会被引用，类似于“通配”。

/*less文件*/
//匹配模式
.pipei{
.size(small);
}
.size(small){
    width:10px;
    height:10px;
}
.size(big){
    width:50px;
    height:50px;
}
.size(bigger)
{
    width:100px;
    height:100px;
}
.size(@_)
{
    background:pink;
}
/*编译后的css*/
.pipei {
  width: 10px;
  height: 10px;
  background: pink;
}

 4.运算。

less支持对数字，变量，甚至颜色进行+-*/运算。

/*less文件*/
@len:300px;
.div{
    width:@len+20;
    height:@len*2;
    background-color:#eee-20;
}
/*编译后的css*/
.div {
  width: 320px;
  height: 600px;
  background-color: #dadada;
}

5.嵌套。

假设你有如下dom结构。

<ul class="list">
    <li><a>列表项</a></li>
    <li><a>列表项</a></li>
    <li><a>列表项</a></li>            
    <li><a>列表项</a></li>                                        
</ul>

为它们添加样式，你可以这样

/*less文件*/
.list{
  width:100%;
  li{
    height: 30px;
    a{
      color:red;
      &:hover{     //&代表它的上层，即a
      color:yellow;
      }
    }
  }
}
/*编译后的css*/
.list {
  width: 100%;
}
.list li {
  height: 30px;
}
.list li a {
  color: red;
}
.list li a:hover {
  color: yellow;
}

 6.@arguments

当我们一个样式的值刚好需要全部通过传参来定义时，这个东西可以省事。

/*less文件*/
.border_test(@w:10px,@c:red,@style:solid)
{
    border:@arguments;
}
.border_arguments{
    .border_test();
}
/*编译后的css*/
.border_arguments {
  border: 10px #ff0000 solid;
}

7.避免编译。

有时候我们不希望less帮我们编译，而只希望保留我们写的。

/*less文件*/
.border_test_01{
  width:~'calc(280px-20px)';  //我们希望浏览器帮我们计算而不是直接被less编译
}
/*编译后的css*/
.border_test_01 {
  width: calc(280px-20px);//280px-20px不会被编译器计算
}

8.!important用于提高样式的优先级

/*less文件*/
.border_test_02{
  width:300px;
  height:300px;
}
.test_important{
    .border_test_02()!important;
}
/*编译后的css*/
.border_test_02 {
  width: 300px;
  height: 300px;
}
.test_important {
  width: 300px !important;
  height: 300px !important;
}

9.学习网站

http://lesscss.net/