当前位置: 首页 > Web前端 > CSS

Lesss问答——变量的使用与&

时间:2023-03-30 18:56:26 CSS

less中mixin的使用方法?就像js的写法一样。定义多个混合组,然后混合它们。.bg-color{背景:#eec7c7;}.font-size{字体大小:20px;}.width-height(@h:200px,@w:300px){width:@w;height:@h;}//如何在mix中使用变量.mix-box{.bg-color;。字体大小;.width-height(100px)}少?常用的有变量值、变量名和选择器。变量值:在less文件顶部,使用@标签定义变量,在css代码中直接使用@myColor:#1b3b2a;//注意:定义变量时,不要去掉分号。box{color:@myColor;}变量名:在less文件顶部,使用@标签定义变量名@fontProperty:color;.line1{background-@{fontProperty}:#94cbdb;}变量名:在less文件顶部,使用@标签定义标签名@selector:h1;@{selector}{background-color:#b997ab;}&运算符如何使用?代表父选择器。用在类选择、伪类、伪元素和兄弟选择器中//最常用的两种情况.class1.class2和.class1.class2//相当于selection.box.mix-box.box{&.mix-盒子{颜色:红色;}}//相当于选择.box.content.box{&.content{color:#18e645;}}//伪类选择器,在框的a标签上添加a:hoverAddstyle.box{a{&:hover{background:#6d8f10;}}}//伪元素:在line3类中添加before伪元素,设置伪元素的内容和颜色.line3{&::before{content:"我在line3之前";颜色:#b94b4b;}}//兄弟选择器:给box后面的所有div标签添加background-color样式.box{&+div{background-color:#aaaaf5;}&~p{颜色:#d3e71d;}}上面四个例子表明&有如下特点:花括号将css选择器的范围限制在括号内&选择器所扮演的角色是父选择器。