less的简单语法

less的简单语法

接着上回的less主题，less的用法相关内容有嵌套、变量、mixin等。下面一样一样介绍用法：

嵌套

像原生的css语法是不允许样式嵌套的，每个选择器都得分别写。例如像下面的demo

它的html结构

<div class="outer">
    我是一个skyblue色的大盒子
    <div class="inner">
        我是一个hotpink色的小盒子
        <h1>这是一个蓝色字体标题</h1>
        <p>这是一个红色字体段落</p>
    </div>
</div>

它的css样式

.outer{
    height: 300px;
    background-color: skyblue;
}
.inner{
    height: 200px;
    width: 800px;
    background-color: hotpink;
    margin: 30px auto;
}
.inner h1{
    color: blue;
}
.inner p{
    color: red;
}

而在less里面，它的样式是这样子写的

.outer{
    height: 300px;
    background-color: skyblue;
    
    .inner{
        height: 200px;
        width: 800px;
        background-color: hotpink;
        margin: 30px auto;

        h1{
            color: blue;
        }

        p{
            color: red;
        }
    }
}

这个less样式经过编译之后就会变成像上面的css样式一样
你可能会想：“css就应该有css的亚子”，一开始可能看着是很怪，但是习惯了之后它超级方便啊，层级结构清晰明了，而且写样式时可以省很多写选择器的功夫

变量

写编程语言时我们经常需要用到变量，也知道变量的好处，就是不会把数据写死，后期改动和维护也可以通过改变量值来改动多个数据联动的地方。
而在css里是没有这个概念的，即每个样式的属性值都要重写具体属性值。
less引入了“变量”就大大弥补了css这方面的不足。
less定义变量以符号@开头，以冒号“ : ”与变量值连接。例如

@mainColor: pink;

这样就完成了一个变量的声明
用的时候，就以改变量名直接替换原来css写法里的具体属性值就可以了，如

@mainColor: pink;
h1{
    color: @mainColor;
}

p{
    color: @mainColor;
}

mixin混合

引用

Less中，允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量。

在一般的编程语言里，若要提高代码的复用性，我们通常会想到函数。没错在less里，mixin就相当于函数这样一个存在。
当我们需要编写大量重复或者是类似的css样式时，mixin就派上用场了。用法如下：
若当前有这样一段css代码

h1{
    color: @mainColor;
    font-size: 20px;
}

p{
    color: @mainColor;
    font-size: 20px;
}

那么运用mixin的话，它会是下面这个样子

.myMixin{
	color: @mainColor;
    font-size: 20px;
}
h1{
	.myMixin;
}
p{
	.myMixin;
}

上述代码中，.myMixin 定义了一个属性集。然后，在任何 需要使用 .myMixin 属性集的选择器中，只需像函数一样调用名字就可以了。
但是，问题来了。这段less代码经编译后是下面这个样子

.myMixin{
	color: @mainColor;
    font-size: 20px;
}
h1{
    color: @mainColor;
    font-size: 20px;
}

p{
    color: @mainColor;
    font-size: 20px;
}

唉怎么？它连我定义的 .myMixin 本身都编译了，可是我实际的css样式用不到啊（挠头挠头.jpg）
这个时候，只要在原来的mixin加上一对小括号即可，像这样

.myMixin(){
	color: @mainColor;
    font-size: 20px;
}

这时候编译出来的css文件里就没有mixin啦。
另外，调用mixin时小括号是可选的。
好了，就先消化消化。less还有许多好玩的地方，后期继续更（挥手挥手挥手）