less是一门CSS预处理语言,在less中,也拥有变量这个概念
//在less中使用变量
@color:pink;
@color-hover:darken(@color,20%);
a{
background-color: @color;
}
a:hover{
background-color: @color-hover;
}
/*-------华丽分割线——------*/
//在选择器中使用less变量
@select:header;//DIV的ID为header
#@{select}{
background-color:#f00;
}
/*-----------分割--------*/
//在属性名中使用less变量
@property:color;
.left{
@{property}:pink;
}
** 这里的变量都是延迟加载的,使用之前可以不用声明,也就是说,在当我们定义一个变量两次之后,会使用最后一次的定义
//也就是说,我们不必把声明语句放在前头
.left{
width:@dis
}
@dis:200px;
//定义多次
@var:0;
@var:3;
Extend伪类,是一个将他放置的选择器和他所引用的选择器进行合并的一个伪类;
也就是说
.left{
//&号表示的是上一层选择器,也就是.left
&:extend(.right);
background-color: red;
}
.right{
color:blue;
}
//这个解析为,是在left中加入了color:blue;这个属性
.left,.right{
color:blue;
}
.left{
background-color:red;
}
//当我们想要包含多个类的时候,只要使用逗号隔开(.left,.right)
这个时候.left就解析为
在这里 我们可以在.right
后面加上一个all关键字,表示使用选择器匹配到所有的声明,也就是.right下的所有声明
嵌套
在less中,我们可以像在js中写函数一样,可以嵌套着写,类似
.left{
color:blue;
p{
color:red;
}
}
当我们使用媒体查询的时候,我们会发现我们要把每个元素都分开写,less对此也进行了嵌套优化
//正常的应该这么写
.left{
width: 400px;
}
@media screen and(max-width: 768px){
.left{
width: 100px;
}
}
//使用less嵌套
.left{
@media screen and(max-width:768px){
width: 100px;
}
width: 400px;
//不同屏幕尺寸下的媒体查询
@media screen and(max-width:375px){
width: 50px;
}
}
//解析后的css代码
.left{
width:400px;
}
@media screen and(max-width:768px){
.left{
width:100px;
}
}
@media screen and(max-width:375px){
.left{
width:50px;
}
}
混合方法
无参数方法
.setBorder(){
border: solid 1px green;
width: 100px;
height: 100px;
color: #f00;
}
.right{
.setBorder();
}
包含参数方法
//less中的方法类似JS,less拥有内置的arguments,用@arguments来表示,参数列表要使用@来声明,若我们要传入不定数量,我们可以通过写入ES6的扩展运算符"..."来实现
.setMargin(@a,@b){
border: solid 1px green;
margin: @arguments;//也可以是margin:@a @b;
}
.left{
.setMargin(10px,20px);
}
//在方法中嵌套方法
#setArea(){
background-color: pink;
.area(@w:300px,@h:300px) {
width: @w;
height: @h;
}
}
//调用
.left{
#setArea > .area(100px,100px);
}
.right{
#setArea();
}
//不定参数
#setShadow(...){
box-shadow: @arguments;
}
.left{
#setShadow(3px,3px,4px,#888888);
}
方法的条件筛选
在less中,没有if,但是他有when;
//when后的"not"表示"!","and"表示"&&",","表示"||"
#color(){
.border(@style,@color,@width) when(@width<10px)and(@color=#f00){
border: @style @width @color;
}
.font(@size)when not(@size>20px){
font-size: @size;
}
}
.left{
#color >.border(solid,#f00,2px);
#color >.font(12px);
}
less没有for循环这个说法,官网使用的则是递归来实现生成多个
.right{
.column(4);
}
.column(@n,@i:1)when(@i<=@n){
.column-@{i}{
width:(@i*100%/@n);
}
.column(@n,(@i+1));
}
//通过这种方式,我们就生成了多个column-n的类
.column-1{
width:25%;
}
.column-2{
width:50%;
}
.column-3{
width:75%;
}
.column-4{
width:100%;
}
先鸽为敬