2.1概览
作为 CSS 的一种扩展,LESS CSS 不仅向下兼容 CSS 的语法,而且连新增的特性也是使用 CSS 的语法。这样的设计使得学习 LESS 很轻松,而且你可以在任何时候回退到 CSS。
2.2变量
变量基本上是每个语言脚本上都会涉及的一个小小知识点,是学好语言脚本的必经之路。LESS 中也可以设置变量,然后通过变量可以改变整个网站的设计风格。良好的掌握 LESS 中变量的用法,是 LESS 的基础。
1.变量语法
使用方法就是在“@”后添加变量名称然后变量值用冒号“:”链接。
2.变量的作用域
如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与 CSS 的机制类似,最后一次定义的值会成为这个属性的值。若定义在嵌套之中,
那么这个变量就只能服务于这个嵌套之内的属性了。变量也是没有顺序可言的,只要页面里有,都会按顺序覆盖,按顺序加载。
//变量作用域
@width:300px; //全局作用域
@color:red;
@height:100px;
.box{
@width:500px; //局部作用域
@height:300px;
width: @width;
height: @height;
color: @color;
background: pink;
ul{
@color:green;
li{
color: @color;
}
}
}
.header{
width: @width;
height: @height;
background: red;
}
html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet/less" href="less/02.less">
<!-- 必须引入less.min.js解析器 -->
<script src="js/less.min.js"></script>
</head>
<body>
<div class="box">
<ul>
<li>好谷</li>
</ul>
</div>
<div class="header"></div>
<div class="bg">
</div>
</body>
3.字符串插值
变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中。
// 3.字符串插值
@bgurl:"https://x.dscmall.cn";
.bg{
width: 300px;
height: 300px;
background: url("@{bgurl}/storage/images/201703/thumb_img/0_thumb_G_1489098265067.jpg") no-repeat red;
}
4.选择器插值
如果需要在选择器中使用 LESS 变量,只需通过使用和字符串插件一样的@{selector} 即可。
//选择器插值
@bbbb:box; //box选择器
.@{bbbb}{
width: 200px;
height: 200px;
background: red;
}
5.media query 作为变量~
如果你希望在 media query 中使用 LESS 变量,你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的,所以可以用作 media query 的参数。
// media query 媒体查询
.content{
width: 300px;
height: 300px;
background: red;
}
@media123:~'(max-width:992px)';
@media screen and @media123{
.content{
background: green;
}
}
以@media或@media screen and开头的语句就是媒体查询语句。@media后面是一个或者多个表达式,如果表达式为真,则应用样式。
max-width 是目标显示区域的宽度,例如,浏览器宽度。
max-device-width 是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备,例如,设备屏幕长宽比为4:3、16:9或16:10。
6.用一个变量值的变量
在定义变量值时使用其它的变量。
@meng:520px;
@zuomeng:@meng;
.love{
width: @zuomeng;
height: 520px;
background: pink;
}