LESS详解之变量(@)

亦凉 2022-09-17 13:12 437阅读 0赞

变量基本上是每个语言脚本上都会涉及的一个小小知识点，是学好语言脚本的必经之路。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深入学习打好基础。

LESS详解之变量(@)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 LESS详解之函数(七)

相关 LESS详解之函数(六)

相关 LESS详解之函数(五)

相关 LESS详解之函数(二)

相关 LESS详解之函数(一)

相关 LESS详解之命名空间

相关 LESS详解之嵌套(&)

相关 LESS详解之变量(@)

相关 LESS详解之编译LESS

相关 less-变量