less语法

Posted 2020-12-01 hebing0415

一、less语言特性

1.1   概览

　　作为 CSS 的一种扩展，LESS CSS 不仅向下兼容 CSS 的语法，而且连新增的特性也是使用 CSS 的语法。这样的设计使得学习 LESS 很轻松，而且你可以在任何时候回退到 CSS。

 

1.2 变量

1.2.1 变量的定义和使用

　　定义变量：less定义变量使用 “@变量名: 变量值” 的方式定义；

　　使用变量：在需要使用定义好的变量的css属性后面直接使用 “@变量名” 即可。

例如：在less文件中代码如下

@width : 100px;  //定义变量
.w {
    width: @width;   //使用变量
}

1.2.2 变量的作用域

　　如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这不 CSS 的机制类似，最后一次定义的值会成为这个属性的值。若定义在嵌套乊中，那么这个变量就叧能服务亍这个嵌套乊内的属性了。变量也是没有顺序可言的，只要页面里有（即可以在变量定义之前使用），都会按顺序覆盖，按顺序加载。例如

@width : 1px;
.meng {
    @width : 2px;
    .long {
        @width : 9000px;
        width:@width;
        @width : 22px;
    }
    width: @width;
}

　　编译后为：

.meng {
    width: 2px;
}
.meng .long {
    width: 22px; //注意此处是22px，而不是9000px
}

　　

例2：在变量定义之前使用：

.header {
    width: @width;   //在变量定义前使用变量是完全可以的，这和其他语言有区别
}
@width: 50px;

　　

1.2.3 字符串插值

　　Less可以通过@{变量名} 的方式进行字符串插值（字符串的拼接）。例如

@logoUrl = "http://www.XXX.com";
image {
    background-image: url("@{logoUrl}/image/logo.peg")
}

　　编译后的CSS为：

image {
    background-image: url("http://www.XXX.com/image/logo.png")
}

　　

1.2.4 选择器插值

　　Less可以通过 @{变量名} 的方式对CSS的选择器进行插值。例如：

@mySelected: my-class;  //注意此处不能使用双引号或单引号，选择器插值只是单纯的将变量的全部去替换

.@{mySelected}: {   //选择器前面的点 .  表示是类选择器，如果是id选择器，使用#
    width: 100px;
}

　　编译后的CSS

.my-class {
   width: 100px;
}

　　

1.2.5 media query  作为变量

　　如果你希望在 media query 中使用 LESS 变量，你可以直接使用普通的变量方式。因为“~”后面的值是丌被编译的，所以可以用作 media query 的参数。小例子如下

:LESS 代码

@singleQuery: ~"(max-width: 768px)";
div{
    background-color: red;
}
@media screen and @singleQuery {
    div {
        background-color: blue;
    }
}    

　　编译后的CSS

div{
    background-color: red;
}
@media screen and (max-width: 768px) {
    div {
        background-color: blue;
    }
}    

　　

1.2.6 用一个变量值的变量

　　在定义变量值时使用其它的变量

Less代码：

@meng : 5201314px;    
@loveDay : meng;
div {
    width:@@loveDay;  //需要使用两个@，相当于@loveDay = meng, 第一个@和@loveDay的结合为@meng 即 5201314px
}

编译后的CSS

div {
  width: 5201314px;  
}

 

1.3  混合

　　在 Less 中，混合可以将一个定义好的 class A （一组已经定义好的样式）轻松的引入到另一个 class B 中，从而简单实现 class B 继承 class A 中的所有属性。我们还可以带参数地调用，就像使用凼数一样

1.3.1 继承类名

　　在 LESS 中，可以定义一些通用的属性集为一个 class，然后在另一个 class中去调用这些属性。如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们叧需要在任何 class 中调用就可以了。任何 CSS class, id 属性集都可以以同样的方式引入。例如：

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEE;
    .common-box;
    span{
          .span;
          width: 100px;
          height: 100px;
    }
}

　　编译后的CSS 

.common-box {
    width: 100%;  
    height: 50%;   
}

.span {
    display: block;  
}

body {
    background-color: #EEEEEE;
    width: 100%;
    height: 50%;
}

body span {
    display: block;
    width: 100px;
    height: 100px;
}

　　

1.3.2 带参数混合

　　在 LESS 中，还可以像凼数一样定义一个带参数的属性集合，然后在其他选择器中像调用它。示例如下：

.width(@width) {
	width: @width;
	background-color: #000000;
	color: #FFFFFf;
}

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
	p {
		.width(50%);
		font-size: 25px;
	}
	span {
		.width(200px);
		font-size: 14px;
	}
}

　　编译后的CSS

#app {
	width: 500px;
	background-color: #ffffff;
	border: 1px black solid;
}
#app p {
	width: 50%;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 25px;
}
#app span {
	width: 200px;
	background-color: #000000;
	color: #FFFFFf;
	font-size: 14px;
}

　　相当于将.width（@width）做为一个函数来调用，传入的参数就是当前选择器选择的元素的宽度。