CSS预处理Less

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、混合、函数等特性，使CSS更易维护和扩展。
Less的官方网站有
英文：http://www.lesscss.org/
中文：http://www.lesscss.net/

Less只有让编译才能被浏览器解析；Less的编译软件有好多：
1：Koala，国人开发的全平台的Less编译工具网站：http：//koala-app.com/
2：WinLess，Windows下的Less编译软件网站：http：winless.org
3：CodeKit，MAC平台下的Less编译软件网站：http：incident57.com/codekit/index.html
其中Koala，个人感觉很好用，国人开发，都是中文。

一嵌套：
原CSS代码

.conten ul{
    list-style:none;
}
.conten li{
  height:25px;
  line-height:25px;
  paddling-left:15px;
  background:url('arr.jpg');
}
.conten li a{   
text-decoration:none;
color:#333
}

Less代码

.conten{
  ul{
    list-style:none;
  }
 li{
    height:25px;
    line-height:25px;
    paddling-left:15px;
    background:url('arr.jpg');
    a{
        text-decoration:none;
        color:#333;
      }
  }
}

二 Less的注释
less的注释有两种一个是 //注释，一个是/* * /注释，其中//的注释不会编译到CSS当中，只有/**/才会被编译到CSS当中。
三变量
定义变量的话，它有许多定义变量的东西，
1 普通变量
普通变量定义方式@
Less写法：

@blue:#5b83ad;
header{
color:@blue;
}

编译结果

header{
color:#5b83ad;
}

注意变量只能声明一次，他们都是“常量”；
2 作为选择器和属性名
使用时将变量以@{变量名}的方式使用，意思说是他可以当做CSS的选择器，Less代码：

@mySelector:width;
@{mySelector}{
@{mySelector}:960px;
height:500px;
}

编译之后CSS代码

.width{
width:960px;
height:500px;
}

3 作为URL
就先比如百度的LOGO的，百度的LOGO是https://www.baidu.com/img/bdlogo.png，使用时，使用“”把变量的值扩起来，它同样是以@{变量名}的方式使用，Less的代码

@imgurl:"https://www.baidu.com/img/"
header{
background:url("@{imgurl}bdlogo.png");
}

4 延迟加载
什么是延迟加载，延迟加载就是声明的变量是延迟加载的，在使用前不一定要预先声明，就像JS中var变量提升一样，你的变量在之前声明还是之后声明是没有任何变化的。
二混合
1: 基本的混合
混合就是一种将一系列属性从一个规则集引入（混合）到另一个规则集的方式，简单来说，就是在CSS中定义一个类，这个类能干什么呢，这个类可以写一些可重用的属性，Less代码：

.borderred{
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
header{
font-size:20px;
.borderred;
}
footer{
font-size:30px;
.borderred;
}

CSS代码是

header{
font-size:20px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
footer{
font-size:30px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}

2 ： 不带输出的混合

什么是不带输出的混合，其实和上面差不多，上面代码在编译CSS的时候，会把你定义的类也编译出来，然后我们只用在你定义类的后面写上一个（）就可以啦，就像是这样 .borderred（）;

3：带选择器的混合
什么是带选择器的混合，就是这个类有一个伪类的属性，而这个类里面的自己，也就是JS里面的this，这个this写成&符号。Less代码：

.my-hover-mixin(){
  &:hover{
    border:1px solid red;
  }
}
button{
.my-hover-mixin;
}

编译之后的代码是

buttom:hover{
  border:1px solid red;
}

4 ：带参数的混合
什么是的带参数的混合，简单的来说就是JS的function封装，可以进行传参数。Less代码

.border(@color){
border:2px solid @color;
}
h1{
  &:hover{
    .border(green);
  }
}
h2{
  &:hover{
    .border(#000);
  }
}

编译之后CSS的代码

h1:hover{
  border:2px solid green;
}
h2:hover{
  border:2px solid #000;
}

5：带参数并且有默认值
这又是什么，这其实就是说如果这个混合没传参数，是有默认值的，如果传了参数就是传的参数，怎么写呢。Less代码：

.border(@color:#000){
  border:2px solid @color;
}
h1{
  &:hover{
    .border();
  }
}
h2{
  &:hover{
    .border(#666);
  }
}

编译之后的CSS代码

h1:hover{
  border:2px solid #000;
}
h2:hover{
  border:2px solid #666;
}

6：带多个参数的混合
什么是带多个参数的混合，一个组合可以带多个参数，参数之间可以用逗号或者分号分割，但是推荐使用分号分割，因为逗号符号有2个意思，它可以解释为mixins参数分隔符或者CSS列表分隔符。官网是这样说的：
1：两个参数，并且每个参数都是逗号分割的列表：.name(1,2,3;something,ele)
2：三个参数，并且每个参数都包含一个数字：.name（1,2,3）
3：使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的CSS列表：.name（1，2，3；），
4：逗号分割默认值：.name（@param1：red，blue）
Less代码：

.mixin(@color;@padding:xxx;@margin:2){
color:@color;
padding:@padding;
margin:@margin @margin @margin @margin;
}
.divaize{
.mixin(1,2,3;something,ele;12)
}
.divaize{
.mixin(1,2,3)
}

编译的CSS代码：

.divaize{
color:1,2,3;
padding:something,ele;
margin:12 12 12 12;
}
.divaize{
color:1;
padding:2;
margin:3 3 3 3;
}

简单点来说，就是如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个值。
7：命名参数
命名参数就是引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数Less代码：

.mixin(@color:black;@margin:10px;@padding:20px){
color:@color;
margin:@margin；
padding:@padding;
}
.class1{
.mixin(@margin:20px;@color:#33acfe);
}
.class2{
.mixin(#efca44;@padding:40px);
}

编译之后的CSS代码

.class1{
color:#33acfe;
margin:20px;
padding:20px;
}
.class2{
color:#efca44;
margin:10px;
padding:40px;
}

8：@arguments变量
@arguments变量代表是所有的可变参数，注意@arguments；代表所有可变参数是，参数的先后顺序就是你的（）内的参数的先后顺序，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值，分别赋值给第三个......以此类推，但是需要主要的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去。
9：匹配模式
匹配模式：传值的时候定义一个字符，在使用的时候使用这个字符，就调用这条规则Less代码：

.border(all;@w:5px){
border-radius:@w;
}
.border(t_l;@w:5px){
border-top-left-radius:@w;
}
.border(b_l;@w:5px){
border-bottom-left-radius:@w;
}
//调用Less
.border{
.border（all，50%）；
}
.border{
.border（t_l，50%）；
}

编译CSS代码

.border{
border-radius:50%;
}
.border{
border-top-left-radius:50%;
}

就是说我想用什么样的格式就定义的时候前面加上一个字符，调用的时候也加上这个字符。
10：得到混合的中变量的返回值
你可以将混合中的值进行运算，得到你想要的一个值。Less代码

@.average(@x,@y){
@average:((@x + @y)/2)
}
div{
.average(16px,50px);
padding:@average;
}

编译之后CSS代码

div{
padding: 33px;
}

三：运算
运算的说明：任何数值，颜色和变量都可以进行运算。
Less会为你自动推断数值的单位，所以你不必每一个值都加上单位，注意：运算符与值之间必须以空格分开，涉及优先级时以（）进行优先级运算Less运算：

.wp{
width:450px + 450;
}

编译结果：

.wp{
width:900px;
}

颜色值运算时，Less在运算时，先将颜色值转换为rgb模式，然后在转换为16进制的颜色值并且返回。Less代码：

.content{
background:#000000 + 21;
}

编译之后的CSS：

.content{
background:#212121;
}

注意：既然是转换为rgb的取值范围是0-255，所以我们计算的时候不能超过这个区间，超过后默认使用最大值255。
四：命名空间
将一些需要的混合组合在一起，可以通过嵌套多层id或者class实现！Less代码：

#bgcolor(){
background:#fff;
  .a{
        color:#888;
    &:hover{
        color:#ff6600
    }
    .b{
      background:#ff0000;
    }
  }
}

.bgcolor1{
background:#fdfee0;
#bgcolor > .a;
}
.bgcolor2{
#bgcolor > .a>.b;
}

CSS代码

.bgcolor{
  background:#fdfee0;
  color:#888;
}
.bgcoloe:hover{
  color:#ff6600;
}
.bgcolor{
 background:#ff0000;
}

其中里面的>就和CSS中的子选择器一样，可以省略或者换成空格，效果是一样的。

CSS预处理Less

你可能感兴趣的:(CSS预处理Less)