less基本规则以及在vue中使用
- less的基本概念
- vue中使用less
- less的注释
- less的嵌套规则与&
- less对于串行选择器的嵌套规则
- 表示外部串行选择器的&标识符
- less中的变量与运算
- less中的变量
- less中的运算
- less中的混合
- less继承
less的基本概念
Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。
vue中使用less
- 第一步: npm install less-loader less -D
- 第二步: 在vue文件中的< style>上写上 < style type=“text/less” lang=“less”>
#文件中
<style scoped lang='less' type='text/less'>
@import './'
</style>
#文件中
可以编写less代码，且能被webstrom和eslint识别。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
less的注释
- // less中的行注释，不会被编译到css文件中。
- /* */ less中的块注释，会被编译到css文件中。
less的嵌套规则与&
less对于串行选择器的嵌套规则
- 后台选择器嵌套
.one {
background-color : red;
.two {
height: 30px;
widtgh: 30px;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 儿子选择器嵌套
.one {
background-color : red;
> .two {
height: 300px;
width: 300px;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 相邻兄弟选择器
.one {
+ div {
height: 300px;
width: 300px;
border: 1px solid #ddd;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 兄弟选择器
.one {
~ div {
height: 300px;
width: 300px;
border: 1px solid #ddd;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
表示外部串行选择器的&标识符
串行的选择器，都可以用嵌套规则完成。但是有一种特殊情况： 当对元素的伪元素进行处理的时候，需要在嵌套内部调用 外部串行的选择器。 这是时候&符号能完成此工作。
.one {
.two:hover {
#此时的.three的选择器为: (.one .two:hover .three)
.three {
}
}
.four: {
#此时的选择器为 ( .one .four:hover )
&:hover {
}
#此时的选择器为 ( .one .four .five )
.five {
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
less中的变量与运算
less中的变量
less允许使用@符号来声明一个变量。比如
@pink : pink
@backgroundColor : '#ff0000'
- 1
- 2
- 声明变量 ==> 作为属性值使用：
@backgroundColor : red
div {
background-color: @backgroundColor;
}
- 1
- 2
- 3
- 4
- 声明变量 ==> 作为属性名使用：
#当做属性名使用的方式，eslint编译不过去。另外这种方式也不推荐使用。
@backgroundColor : background-color;
div {
@{backgroundColor} : '#ff0000';
width: 300px;
heigght: 300px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 声明变量 ==> 作为选择器使用：
#当做选择器名字使用的方式，eslint编译不过去。另外这种方式也不推荐使用。
@wrap : div;
@{wrap} {
@{backgroundColor} : '#ff0000';
width: 300px;
heigght: 300px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 声明变量 ==> 作为URL使用：
@urlaaa : "/timg?image&quality=80&size=b9999_10000&sec=1580205981432&di=230ef3c27a57c125dc2b618bc7e76547&imgtype=0&src=http%3A%2F%%2F20170426%2F20170426145543_d286b1d11013bff1d01c48c2a30b9586_10.jpeg";
@backgroundColor : red;
.two {
width: 200px;
height: 200px;
background: url(@urlaaa)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 关于less变量的延迟加载：
#div实际显示得颜色#00ff00;
@backgroundColor : #ff0000;
div {
background-color : @backgroundColor;
width: 300px;
height: 200px;
@backgroundColor : #00ff00;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
less中的运算
less支持常量，变量的加减乘除。
@width: 300px;
@height: 200px;
.one {
width: @width;
height: @height;
border: 1px solid #ddd;
}
.two {
width: @width/2;
height: @height/2;
border: 1px solid red;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集合。
- 普通混合
普通混合，会导致混合定义的代码保持在css文件中，不推荐使用。
#定义普通混合
.background [
width:200px;
height:200px;
background-color:red;
}
#使用混合
#.one是选择器。在.one内使用混合(.bacnkground)
.one {
.background
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 不带参数的混合
在普通混合后增加一个括号，则混合的定义的代码不会被编译到css文件中。
.background() {
width:200px;
height: 200px;
background-color: blue;
}
.one {
.background
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 带参数的混合
.background(@width, @height, @backgroundColor){
width : @width;
height : 300px;
background-color: @backgroundColor;
}
.one {
.background(300px,200px, yellow);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 带参数且有默认值的混合
.background(@width:200px, @height:300px, @backgroundColor:red){
width : @width;
height : 300px;
background-color: @backgroundColor;
}
.one {
.background(300px);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 命名参数
命名参数针对于非第一个参数赋值，而前面的参数使用默认值的情形。
.background(@width:200px, @height:300px, @backgroundColor:red){
width : @width;
height : @height;
background-color: @backgroundColor;
}
#@height: 100px 通过指定参数的名字，来进行对应的参数赋值。
.one {
.background(@height:100px);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 匹配模式
#第一个参数 @_ 表示匹配任意的标识符。
.angle( @_, @color ){
border-width: 100px;
border-style: solid;
}
#第一个参数是标志符，用于模式匹配。
.angle( T, @color ) {
border-color: @color transparent transparent transparent ;
}
#第一个参数是标志符，用于模式匹配。
.angle( R, @color ) {
border-color: transparent @color transparent transparent ;
}
#第一个参数是标志符，用于模式匹配。
.angle( B, @color ) {
border-color: transparent transparent @color transparent ;
}
#第一个参数是标志符，用于模式匹配。
.angle( L, @color ) {
border-color: transparent transparent transparent @color;
}
.one {
#第一个参数指定标识符，用于匹配多个同名的混合中的某一个。
#如果存在标识符为@_的模式，表示总会匹配这个模式，其他模式也能继续匹配。
.angle(R, yellow );
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- arguments变量
#@arguments表示接收到的所有参数。
.test(@1, @2, @3){
border : @arguments;
}
.one {
width:200px;
height:200px;
.test(1px, solid, red);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
less继承
less使用:extend( xxx )方式来继承
.test {
width : 200px;
height : 200px;
}
div:extend( .test ){
border: 1px solid #ddd
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
less使用:extend( xxx all )方式来继承xxx，以及xxx的伪类
.test {
width: 200px;
height: 200px;
}
.test:hover {
border: 1px solid red;
}
div:extend( .test all ){
border : 1px solid #ddd
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10