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 导入的意思 可以把一个样式文件导入到另外一个样式文件里面