Less使用小记

简单使用方式

首先介绍一下less，less是一种css预编译语言，说白了就是，写起来更方便，编译一下变成了可以正常使用的css的一种语言

ok，直接开始，现在全局装一个less

1	npm install less -g

然后可以创建一个.less为后缀的文件直接开始写，编译指令是

1	lessc styles.less styles.css

用写好的styles.less文件，编译生成styles.css

变量

less允许使用变量，比css中的var要方便一些，以下展示一个例子

@height: 75px;
@width: @height*2;
@themeColor: orange;

.button {
    width: @width;
    height: @height;
    background-color: @themeColor;
}

变量定义允许加减乘除运算，编译之后就能直接生成css

.button {
    width: 150px;
    height: 75px;
    background-color: orange;
}

混合

混合允许直接copy一个类的属性，比如我们在上面这个例子下面继续写如下代码

.spc-btn{
    .button();
    background-color:red;
}

那么就可以多生成一个类

.spc-btn {
  width: 150px;
  height: 75px;
  background-color: orange;
  background-color: red;
}

也就是说，copy所有的属性之后自己可以继续加属性，使用的时候最好不要重写相同属性，否则css文件会出现冗余

按照以下方式来写更好一些

.btn{
    width: @width;
    height: @height;
}
.orange-btn{
    .btn();
    background-color: orange;
}
.red-btn{
    .btn();
    background-color: red;
}

如果我们希望在生成css的时候没有btn这个类，则可以按照如下方式来写，在仅用于继承属性的类名后加一个括号

.btn(){
    width: @width;
    height: @height;
}
.orange-btn{
    .btn();
    background-color: orange;
}
.red-btn{
    .btn();
    background-color: red;
}

函数

如果希望直接对模板属性进行更改覆盖，则可以使用函数

.btn(@bgColor:pink){
    width: @width;
    height: @height;
    background-color: @bgColor;
}
.orange-btn{
    .btn(orange);
}

这样就不会生成多余的同名属性，还可以使用默认值

嵌套

在原先的css中，我们如果需要改某个标签或类内的元素属性，需要写多级css选择来精确地赋予属性，less则是通过嵌套来更方便地书写

比如我们想在刚才那个orange-btn标签中写一个a标签，那么我们可以用less这么写

.orange-btn{
    .btn();
    a{
        color: white;
        text-decoration: none;
        font-size: 20px;
    }
    background-color: orange;
}

最后生成的css如下

.orange-btn {
    width: 150px;
    height: 75px;
    background-color: orange;
}
.orange-btn a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

在嵌套中&符号表示当前选择器的父级，我们可以用如下方式给a标签添加更多效果

.orange-btn{
    .btn();
    a{
        color: white;
        text-decoration: none;
        font-size: 20px;
        &:hover{
            color: orange;
        }
        &:active{
            color: black;
        }
    }
    background-color: orange;
}

生成的css如下

.orange-btn {
    width: 150px;
    height: 75px;
    background-color: orange;
}
.orange-btn a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}
.orange-btn a:hover {
    color: orange;
}
.orange-btn a:active {
    color: black;
}

嵌套的内容，先在本身寻找变量和混合，如果无法找到，则从父级作用域继承

冒泡

当用@规则进行嵌套时，会发生冒泡，这个说明很抽象，直接举个例子

.spc-button{
    .btn();
    @media(min-width:768px){
        width: 600px;
    }
    @media(min-width:1280px){
        width: 800px;
    }
}

编译之后可以生成一个响应式的按钮，如下

@media (min-width: 768px) {
    .spc-button {
        width: 600px;
    }
}
@media (min-width: 1280px) {
    .spc-button {
        width: 800px;
    }
}

转义

直接上例子，类似于宏定义，~'anything'形式可以按照原样输出

@min768: ~"(min-width: 768px)";

.spc-button{
    .btn();
    @media @min768{
        width: 600px;
    }
    @media(min-width:1280px){
        width: 800px;
    }
}