一篇介绍less的文章

2016/05/12 11:19
阅读数 16

变量基本上是每个语言脚本上都会涉及的一个小小知识点,是学好语言脚本的必经之路。LESS中也可以设置变量,然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用法,是LESS的基础。

 

变量语法

 

使用方法就是在“@”后添加变量名称然后与变量值用冒号“:”链接。如下

 

LESS代码

 

@width : 300px;

.meng {
	width: @width;
}

 

 

编译后的CSS代码

 

.meng {
  width: 300px;
}

 

 

变量的作用域

 

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

 

LESS代码

 

@width : 1px;

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

 

 

编译后的CSS代码

 

.meng {
  width: 2px;
}
.meng .long {
  width: 22px;
}

 

 

下面这段例子也是有效的。

 

LESS代码

 

.long {
    width: @w;
    @o: 9%;
}

@w: @o;
@o: 100%;

 

 

编译后的CSS代码

 

.long {
  width: 9%;
}

 

 

字符串插值

 

变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中

 

LESS代码

 

@myUrl: "http://blog.csdn.net/lee_magnum";
.meng {
	background-image: url("@{myUrl}/images/bg.png");
}

 

 

编译后的CSS代码

 

.meng {
  background-image: url("http://blog.csdn.net/lee_magnum/images/bg.png");
}

 

 

选择器插值

 

如果需要在选择器中使用 LESS 变量,只需通过使用和字符串插件一样的 @{selector} 即可。

 

LESS代码

 

@Myname: meng1314;
.@{Myname} {
    width:1000000000000px;
}

 

 

编译后的CSS代码

 

.meng1314 {
  width: 1000000000000px;
}

 

 

media query作为变量

 

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

 

LESS代码

 

@singleQuery: ~"(max-width: 480px)";
@media screen, @singleQuery {
    div {
	width:2000px;
    }
}

 

 

编译后的CSS代码

 

@media screen, (max-width: 480px) {
  div {
    width: 2000px;
  }
}

 

 

用一个变量值的变量

 

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

 

LESS代码

 

@meng : 5201314px;

@loveDay : meng;

div {
	width:@@loveDay;
}

 

 

编译后的CSS代码

 

div {
  width: 5201314px;
}

 

 

LESS详解之变量(@)就为大家介绍到这里了。这并不是最完善的有关LESS的讲解,也不是最完美的讲解,只是把我学习的笔记和大家分享一下,希望能对大家有所帮助。掌握好LESS详解之变量(@),也是为之后LESS深入学习打好基础。

展开阅读全文
打赏
2
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
2
分享
在线直播报名
返回顶部
顶部