less基本规则以及在vue中使用
less的基本概念
Less 是一门 CSS 预处理语言,为CSS赋予了动态语言的特征。它扩展了 CSS 语言,增加了变量、Mixin(混合)、嵌套、函数和运算等特性,使 CSS 更易维护和扩展。
vue中使用less
- 第一步: npm install less-loader less -D
- 第二步: 在vue文件中的< style>上写上 < style type=“text/less” lang=“less”>
#test.vue文件中
<style scoped lang='less' type='text/less'>
@import './test.less'
</style>
#test.less文件中
可以编写less代码,且能被webstrom和eslint识别。
less的注释
- // less中的行注释,不会被编译到css文件中。
- /* */ less中的块注释,会被编译到css文件中。
less的嵌套规则与&
less对于串行选择器的嵌套规则
- 后台选择器嵌套
.one {
background-color : red;
.two {
height: 30px;
widtgh: 30px;
}
}
- 儿子选择器嵌套
.one {
background-color : red;
> .two {
height: 300px;
width: 300px;
}
}
- 相邻兄弟选择器
.one {
+ div {
height: 300px;
width: 300px;
border: 1px solid #ddd;
}
}
- 兄弟选择器
.one {
~ div {
height: 300px;
width: 300px;
border: 1px solid #ddd;
}
}
表示外部串行选择器的&标识符
串行的选择器,都可以用嵌套规则完成。但是有一种特殊情况: 当对元素的伪元素进行处理的时候,需要在嵌套内部调用 外部串行的选择器。 这是时候&符号能完成此工作。
.one {
.two:hover {
#此时的.three的选择器为: (.one .two:hover .three)
.three {
}
}
.four: {
#此时的选择器为 ( .one .four:hover )
&:hover {
}
#此时的选择器为 ( .one .four .five )
.five {
}