LESS的学习

LESS的学习

一、LESS的简介

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量，Mixin，函数等特性，使css更易维护和扩展。Less既可以在客户端上运行，也可以借助Node.js在服务端运行。

二、Less中的语法

1、变量

/*使用@来申明一个变量，如@variable:value;在编译完成后就会在使用该变量的地方替换成后面的值。*/
/*值得一提的是，其变量是常量，所以只能定义一次，不能重复使用。*/

值变量

/*作为值变量来使用的时候，直接使用@开头来定义变量，并且使用的时候通过调用@variable来获取值。在平时工作的时候，可以把常用的变量封装到一个文件中，这样有利于代码组织维护。*/

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
    color: @color;
    width: @width;
}

/* 生成后的 CSS */
#wrap {
    color: #999;
    width: 50%;
}

选择器变量

/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
    color: #999;
    width: 50%;
}
.@{Wrap}{
    color:#ccc;
}
#@{Wrap}{
    color:#666;
}

/* 生成的 CSS */
#wrap{
    color: #999;
    width: 50%;
}
.wrap{
    color:#ccc;
}
#wrap{
    color:#666;
}

属性变量

 /* Less */
 @borderStyle: border-style;
 @Soild:solid;
 #wrap{
 	@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
 }

/* 生成的 CSS */
#wrap{
	border-style:solid;
}

url变量

 /* Less */
 @images: "../img";//需要加引号
 body {
 	background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
 }

/* 生成的 CSS */
body {
	background: url("../img/dog.png");
}

声明变量

- 结构: @name:{属性:值;};
- 使用: @name();

 /* Less */
 @background: {background:red;};
 #main{
 	@background();
 }
 @Rules:{
     width: 200px;
     height: 200px;
     border: solid 1px red;
 };
 #con{
 	@Rules();
 }

/* 生成的 CSS */
#main{
	background:red;
}
#con{
    width: 200px;
    height: 200px;
    border: solid 1px red;
}

变量的运算

- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一

 /* Less */
@width:300px;
@color:#222;
#wrap{
    width:@width-20;
    height:@width-20*5;
    margin:(@width-20)*5;
    color:@color*2;
    background-color:@color + #111;
}

/* 生成的 CSS */
#wrap{
    width:280px;
    height:200px;
    margin:1400px;
    color:#444;
    background-color:#333;
}

变量作用域

/**变量的延迟加载，当在同一个作用域时，变量被赋多次值，以最后一次为准*/

 /* Less */
@var: @a;
@a: 100%;
#wrap {
    width: @var;
    @a: 9%;
}

/* 生成的 CSS */
#wrap {
    width: 9%;
}

用变量去定义变量

/* Less */
@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
    content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
    content: "I am fnord.";
}

2、嵌套

& :代表的上一层选择器的名字

/* Less */
#header{
    &:after{
        content:"Less is more!";
    }
    .title{
        font-weight:bold;
    }
    &_content{//理解方式：直接把 & 替换成 #header
        margin:20px;
    }
}
/* 生成的 CSS */
#header:after{
    content:"Less is more!";
}
#header .title{ //嵌套了
    font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}

3、混合

无参数混合

/* Less */
.card() { // 相较于 .card 进行定义，不会将本身一起编译输出到css文件中
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
    .card();//等价于.card;
}
/* 生成的 CSS */
#wrap{
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}

默认参数混合

/*less中可以使用默认参数，如果没有传入参数，那么将使用默认参数*/
@arguments指传递进来的全部参数
/*传递的参数必须带着单位*/

 /* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
    .border();//等价于 .border
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

混合的匹配模式

会先匹配第一个参数为@_，接着再去匹配与传入参数相同的混合。

/* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
    border-color:transparent  transparent  transparent #999;
    border-style: solid;
    border-width: 50px;
}

混合的命名参数

定义的混合的形参列表顺序确定，可在传入实参时顺序没有按照形参列表的顺序，则可在调用混合时通过为实参指定形参名来确定该实参到底把值传给那个形参。

/* Less */
.triangle(@width,@color){
   
    border-color:transparent  transparent @color transparent ;
}
#main{
    .triangle(@color:#999, @width:50px)
}
/* 生成的 CSS */
#main{
    border-style: solid;
   	border-width: 50px;
    border-color:transparent  transparent #999 transparent;     
}

4、继承

extend是less的一个伪类。它可以继承所匹配声明中的全部的样式。

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
        transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
    transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

all 全局搜索替换:使用选择器匹配到的全部声明

/* Less */
#main{
    width: 200px;
}
#main {
    &:after {
        content:"Less is good!";
    }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
    width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

5、导入

//导入 less 文件 可省略后缀
import "main"; 
//等价于
import "main.less";

@import 的位置可随意放置
#main{
    font-size:15px;
}
@import "style";

使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
    
@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
    
使用@import (multiple)允许导入多个同名文件。

6、其他

注释

以//开头的注释，不会被编译到css文件中(相当于只给开发人员看)
以/**/包裹的注释会被编译到css文件中(相当于给用户看)

避免编译

结构： ~'值'

/* Less */
#main{
    width:~'calc(300px-30px)';
}

/* 生成后的 CSS */
#main{
    width:calc(300px-30px);
}

迭代

通过混合调用混合来实现迭代,bootstrap的栅格系统就利用了这种方式实现。