less基础:
CSS是一门非程序语言,没有变量、函数、作用域等,此时使用rem单位就会出现图片等大量计算尺寸的问题,但是less可以轻松实现运算,它是CSS预处理语言,引入了变量、混入、函数等,常见的CSS预处理语言还有:Sass、Stylus等,Less中文网址:http://lesscss.cn
Less安装:
①安装nodejs:进网址:http://nodejs.cn/download,选择对应自己电脑系统的node下载安装,检查是否安装成功:cmd控制台键入 node -v , 若出现有node版本信息则安装成功。
②基于node下的npm安装:cmd控制台键入 npm install -g less ,检查是否安装成功:cmd控制台键入:lessc -v ,若出现less版本信息,则安装成功。
Less编译:
less本质上是由一套自定义语法及一个解析器组成,根据语法定义自己的less文件,最终会编译成CSS文件供html使用。
Easy LESS插件:把less文件编译成css的VScode插件,在VScode安装此插件后,保存less文件后会自动生成对应的css文件,把此css文件引入html文件即可。
less.js插件:less文件不能直接在浏览器被解析,因此是不能直接将less文件通过link引入到html文件中的;但是可以通过引入js插件less.js同时声明link标签中type属性的值为text/less就可以被转化为在浏览器可识别的css,less被获取是通过ajax请求的,因此不能通过files的形式访问,如:
<head><link rel="stylesheet" type="text/less" href="lib/less/less.less"><script src="lib/less/less.js"></script>
</head>
less语法:
less文件中可以直接 写css代码,开始less编码时建议声明字符编码辑。
less中的注释:less中有两种注释语法,如下:
@charset:'UTF-8';/*注释内容,可以编译到css文件中*///注释内容,不能编译到css文件中
变量:没有固定的值,可以改变,css中的颜色值和数值经常使用,语法:@变量名:值 ,(变量名规范:必须以@为前缀、不包含特殊字符、不以数字开头、字母区分大小写),less中字符串拼接需要将变量名通过{}包裹,如:@color:pink; 、@number:10;、.{@className}
嵌套:在less中可以像html一样,如果标签是父子级关系,可以嵌套书写,编写后会生成对应的父子级形式的选择器,less语法中伪类伪元素前面要加 & 符号才表示当前元素的伪类,否则表示此元素的子代伪元素,如:
@bgcolor:rgb(199, 235, 250);@font12:12px;@className:box;div {background-color: @bgcolor; a {font-size:@font12;// less语法中伪类前面要加 & 符号才表示当前元素的伪类,若不加则表示此元素的子代伪元素:&:hover {color:bisque;} }}.@{className}{color:red;};//编译后的css代码://div {// background-color: #c7ebfa;//}//div a {// font-size: 12px;//}//div a:hover {//若less前面没有加 &,则解析成div a :hover// color: bisque;//}// .box {// color: red;// }
混入:混入分类混入和函数混入,类混入是将若干个类在另一个{}中使用()调用,使被调用的类的属性代码在新的类中生成,如:
.floatLeft{float:left;}.bgc{background-color:blue;}// 将上面两个类的属性及值混入到新的类中:.box{.floatLeft();.bgc();}//生成的对应css代码:.floatLeft {float: left;}.bgc {background-color: blue;}.box {float: left;background-color: blue;}
函数混入:由于类混入定义的类会编译到css代码造成代码冗余,这样不太好,可以使用函数混入,解决这个代码冗余的情况,函数语法:.函数名(){};,使用时是将类定义到函数中,在另一个类中使用时,直接调用函数即可,但是不会在css代码中生成类,函数里面可以传入参数,但是定义了参数后就必须传入参数,否则会报错,但是可以传入默认参数,就是在形参变量名后面加冒号,冒号后面的值即为默认值,如:
@fl:left;@fr:right;.floatLeft(@left:left){//定义了默认值为leftfloat: @left;}.bgc(){background-color: blue;}.box {.floatLeft(@fr);//当不传入参数时,会使用默认值left.bgc();}// 生成的css代码:.box {float: right;background-color: blue;}
混入函数定义中{}里面可以继续定义类,便于将代码重用和方便管理,要想使用到函数里面具体的某个类时,直接通过函数名加类名的方式就可以调用到,如:
.bgc(){.yello{color:yello;}.width{width:20px;}
}
.box {.bgc.width;
}
//使用.bgc函数中的.width编译后生成的css代码如下:切记调用时函数名后面不能加()
.box {width: 20px;
}
映射:通过上面代码可以看出混入函数中可以定义类,less3.5开始可以定义映射,简单的说就是在函数中可以定义key和value键值对,使用时可以通过[]加键拿到具体的value,如:
.bgc(){divcolor:blue;key:value;
}
.box {color:.bgc[divcolor];font:.bgc[key];
}
//使用.bgc函数中定义的key和value编译后生成的css代码如下:
.box {color: blue;font: value;
}
作用域:less 中的作用域和css中的作用域相似,都是先从本作用域查找,找不到继续往父级查找,如:
@color: yellow;
div {@font: 20px;p {color: @color;font-size:@font;}
}
//编译后的代码如下:
div p {color: yellow;font-size: 20px;
}
运算:less语法提供了加(+)减(-)乘(*)除(/或外面加小括号)等运算,任何的数字、颜色、变量都可以参与运算。运算符号左右两边必须要用空格隔开,如果两个变量中只有一个变量有单位或两个变量的单位相同时,则结果的单位就是其中的这个单位;当两个变量都有单位时,以前面变量的单位为结果的单位;
@fontsize:12px;@width:200px;div {width: (24 / @fontsize);height: @width / 2rem;border: 12rem / @fontsize solid (#333222 - #111222);}//对应的css代码://div {// width: 2px;// height: 100px;// border: 1rem solid #222000;//}
calc() :使用calc()后,将不再对数学表达式进行计算,但是在嵌套函数中是会计算变量和数学公式的值,如:
@add: 20px/2;
@num:calc(20px/2);
div{width:calc(20% + (@add - 5px));height:@num;
};//对应生成的css代码如下:
div {width: calc(20% + (10px - 5px));height: calc(20px/2);
}
转义:将所有字符串作为属性或变量值,除interpolation外,语法是:~‘字符,串’,如:
@maxw: ~"(max-widht: 1200px)";//less3.5后可以省略~及引号,直接写成@maxw:(max-widht: 1200px)
div {@media @maxw {width:1200px;}
}//上面代码是生成一个条件为max-widht: 1200px的媒体查询,编译后的代码如下:
@media (max-widht: 1200px) {div {width: 1200px;}
}
函数:less和其他语言一样内置了很多好用的函数,小编在这里不做过多的强调了,如需了解更多,可以阅读官方文档函数篇:https://less.bootcss.com/functions/,这里介绍高频使用的函数:
//1.length(array):获取array数组的长度,less中也是可以定义像其他语言类似的数组,其语法如:@arr:320px,540px,750px,920px,1200px;//less中定义数组不使用[]包裹。//获取arr数组的长度,并赋值给变量arrLength:@arrLength:length(@arr);//2.extract(arr,index);获取数组arr中第index个元素,如获取@rr中的第二个元素并赋值给@arrSecond:@arrSecond:extract(@arr,2);//特别提醒,元素是从1开始计算的。
less中函数实现遍历功能:less语言中没有遍历,若要实现遍历的方法,可以通过函数自调用的方式来模拟遍历,但是函数自调用可能会陷入死循环,因此需要加入条件(此方法常用于rem + less + 媒体查询 布局中,因为rem + less布局时需要适应多款设备,此时就要定义多个html根font-size的值,为了更好的维护,采用函数模拟遍历的方式可自动生成多种font-size的值,如下案例:)
//.functionName(参数) when (条件){code},less中函数可以使用when加条件,当条件满足时会执行函数,否则不再执行函数,如:
.setFontSize(@index) when (@index <= @arrLength){@media (min-widht:extract(@arr,@index)){html{font-size:@baseSize / @psdWidth * extract(@arr,@index);};};.setFontSize(@index + 1);//函数自己调用自己实现遍历效果,每次调用时参数+1来提满足判断条件
};//调用:
.setFontSize(1);//调用时传入参数1,从1开始遍历
将一个less文件导入另一个less文件:
@import "common.less"
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海