Less 的使用

vscode 插件 EasyLESS

EasyLESS // 插件把原来的less文件编译为css文件

Lass 变量

@变量名: 值;  //不能与数字开头，不能包含特殊字符，变量名区分大小写，必须用@开头

// 定义一个粉色的变量
@color: pink;
// body 使用了这个变量
body {
    background-color: @color;
}

Lass 嵌套

<div class="header">
	<a href="#">文字</a>
</div>

.header {
    width: 200px;
    height: 200px;
    background-color: pink;
    // 1. less嵌套 子元素的样式直接写到父元素里面就好了
    a {
        color: red;
        // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
        &:hover {
            color: blue;
        }
    }
}

Lass 运算

@baseFont: 50px;
html {
    font-size: @baseFont;
}
@border: 5px + 5;
div {
    width: 200px - 50;
    height: (200px + 50px ) * 2;
    border: @border solid red;
    background-color: #666 - #222;
}
img {
    width: 82rem / @baseFont;
    height: 82rem / @baseFont;
}
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算  如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

less文件 引入另外一个 less 文件

@import "common";  // @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面