LESS CSS：变量、插值与媒体查询的深入解析-优快云博客

本文链接：https://blog.youkuaiyun.com/shiyibushiwei/article/details/125661189

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;
}