最近在学习了less,作些笔记;
本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。你也可以再less文件中写按照css规则写样式。less文件是以less作为文件后缀名,HTML引用时可以像css那样引用,如下:
<link rel="stylesheet/less" type="text/css" href="styles.less">
在渲染HTML页面时,less文件需要编译成css文件。我们可以有很多种方法。在服务器端,如Node.js,我们有专门的less编译模块。如果是在客户端,需要从LESS官网下载less.js文件,然后在HTML页面中引入,如下:
<script src="less.js" type="text/javascript"></script>
注意:
(1)确保包涵.less样式表在less.js脚本之前。
(2)当你引入多个.less样式表时,它们都是独立编译的。所以,在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
(3)必须通过服务器环境访问页面,否则报错。
变量
一、定义变量
//定义变量
@gray:#555;
@orange:orange;
header{
background: @gray;
text-align: center;
height: 100px;
line-height: 100px;
}
编译后的css:
header{
background: #555555;
text-align: center;
height: 100px;
line-height: 100px;
}
二、作为选择器和属性名的变量
注意:使用时将变量以@{变量名}的方式使用
@gao: height;
.@{gao}{
@{gao}:300px;
}
编译后的css:
.height {
height: 300px;
}
三、作为URL的变量
@imgurl:"https://www.baidu.com/img/";
header{
background:url("@{imgurl}bdlogo.png") no-repeat;
height: 500px;
border: 1px solid #333;
background-size: 150px 150px;
}
编译后的css:
header {
background: url("https://www.baidu.com/img/bdlogo.png") no-repeat;
height: 500px;
border: 1px solid #333;
background-size: 150px 150px;
}
四、定义多个相同名称的变量时
在定义一个变量两次或者多次时,只会使用当前作用域最后定义的变量,Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。
@var: 0;
.class{
@var: 1;
.brass {
@var: 2;
three: @var; //这是的值是3
@var: 3;
}
one: @var; //这是的值是1
}
编译后的css:
.class {
one: 1;
}
.class .brass {
three: 3;
}
五、延迟加载
延迟加载:变量是延迟加载的,在使用前不一定要预先说明。
意思是指:在前面使用了这个变量,但没有定义,但可以在后面给他定义出来,不影响输出。
@color: #333;
div{
width: 100px; height: 200px;
font-size: @size;
color: @color;
}
@size: 20px;
编译后的css:
div {
width: 100px;
height: 200px;
font-size: 20px;
color: #333333;
}
混合
一、基本混合
@orange: orange;
.base{
font-size: 30px;
color: @orange;
}
h1{
border: 1px solid red;
.base;
}
编译后的css:
.base {
font-size: 30px;
color: #ffa500;
}
h1 {
border: 1px solid red;
font-size: 30px;
color: #ffa500;
}
二、不带输出的混合,类名后面使用();(原来模板不出现)
@pink: pink;
.base2(){
border: 1px solid blue;
background: @pink;
}
footer{
.base2;
}
编译后的css:
footer {
border: 1px solid blue;
background: #ffc0cb;
}
三、带选择器的混合
.hoverMix(){
&:hover{
border: 1px solid green;
}
}
button{
.hoverMix;
}
编译后的css:
button:hover {
border: 1px solid green;
}
四、带参数的混合
@gray: #555;
.border( @color ){
border: 1px solid @color;
}
h1{
.border( @gray );
}
编译后的css:
h1 {
border: 1px solid #555555;
}
五、带参数并且有默认值的混合
像这样给参数设置默认值。有了默认值,我们可以不用设置属性值也能被调用。
.border2( @color:red ){
border: 1px solid @color;
}
h2{
.border2();
}
h3{
.border2( @pink );
}
编译后的css:
h2 {
border: 1px solid #ff0000;
}
h3 {
border: 1px solid #ffc0cb;
}
六、带多个参数的混合
如果传参的括号里全部都是以”,”分隔,那么会依次传给各个参数的值;如果传参的括号里既有”,”又有”;”那么会把”;”前面当作一个整体,传给一个值;
.mixin(@color;@padding:10;@margin:2){
color: @color;
padding: @padding;
margin: @margin, @margin, @margin, @margin;
}
div{
.mixin(@pink);
}
.div{
.mixin(@orange;10,10,14,14;3);
}
编译后的css:
div {
color: #ffc0cb;
padding: 10;
margin: 2, 2, 2, 2;
}
.div {
color: #ffa500;
padding: 10, 10, 14, 14;
margin: 3, 3, 3, 3;
}
七、定义多个具有相同名称和参数数量不同的混合
.mixin2(@color) {
color-1: @color;
}
.mixin2(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin2(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin2(#008000);
}
编译后的css:
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
从编译的结果可以看出,less也有函数重载的特性。当我们定义相同混合属性名,参数不同,然后.mixin(#008000);调用,第一和第二混合都能匹配,但是第三个缺少参数@padding的值,所以不会引用第三个混合属性。
八、命名参数
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都以用过它的名称来使用,这样就不必按照任意特定的顺序来使用参数;
.mixin3(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin3(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin3(#efca44; @padding: 40px);
}
编译后的css:
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
九、@arguments变量
@arguments代表所有的可变参数。
注意事项:
1. @arguments代表所有可变参数,参数的先后顺序就是你的()括号内的参数的先后顺序。
2. 在使用的赋值,值的位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值赋值给第三个……以此类推,但是需要注意的是假如我想给第一个和第三个赋值,你不能写(值1,,值3),必须把原来的默认值写上去!
.border3(@x:solid,@c:red){
border: 21px @arguments;
}
.div1{
.border3(dashed);
}
编译后的css:
.div1 {
border: 21px dashed #ff0000;
}
十、匹配模式
传值的时候定义一个字符,在使用的时候使用哪个字符,就调用那条规则。
.border4(all,@w: 5px){
border-radius: @w;
}
.border4(t_l,@w:5px){
border-top-left-radius: @w;
}
.border4(t_r,@w:5px){
border-top-right-radius: @w;
}
.border4(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border4(b-r,@w:5px){
border-bottom-right-radius: @w;
}
footer{
.border4(t_l,10px);
.border4(b-r,10px);
background: #33acfe;
}
编译后的css:
footer {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #33acfe;
}
十一、混合的返回值
在使用混合时,有时会用到一些运算,这时就有返回值。
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
footer{
.average(16px, 50px);
padding: @average;
margin: @he;
}
编译后的css:
footer {
padding: 33px;
margin: 66px;
}
十二、关键字!important
在使用混合属性后面加上!important关键字,则混合中的所有属性都会加上关键字!important。
.fool(@bg:#333;@color: orange){
background: @bg;
color: @color;
}
.unimportant{
.fool;
}
.important{
.fool !important;
}
编译后的css:
.unimportant {
background: #333333;
color: #ffa500;
}
.important {
background: #333333 !important;
color: #ffa500 !important;
}