移动端学习第七周 less

我们CSS文件没有运算功能，也不好维护，想改一个颜色必须全部都改一遍，这个时候就可以用less

变量

@color:pink;

body {

    background-color: @color;

}

div {

    background-color: @color;

}

很简单哈，声明变量就在前面加个@就可以了 

编译

以后的CSS代码都在这里写，然后一保存，插件就会帮我们less文件编译成一个CSS文件，所以只需在less上编码即可

然后在html上再引用我们的CSS文件即可

嵌套

header {

    width: 50px;

    height: 50px;

    background-color: #fff;

    a {

        background-color: @color;

    }

}

之前写嵌套的元素的样式都是要分开写，而less就可以直接在父级样式里写，再编译成CSS时还是分开写，很方便

但在父级样式里选元素，也就是内层选择器里选元素，默认是从父级的后代进行选择

要是不是想修饰子元素，想修饰它自身时，就要用到&符号 可修饰父元素和其伪类

header {

    width: 50px;

    height: 50px;

    background-color: #fff;

    a {

        background-color: @color;

        &:hover {

            color: @color;

        }

    }

}

运算

运算符+-*/ 运算符左右俩边空格开 两数都有单位以第一个为准 除法要用括号括住

@border-width:5px + 5;

div {

    width: 50 + 5px;

    height: (82rem / 5);

    background-color: #666 - #444;

}

导入less文件

@import "文件名";

import把一个样式文件导入到另一个样式文件

link把一个样式文件导入到html里