less变量

最新推荐文章于 2024-07-17 15:24:17 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-07-17 15:24:17 发布

阅读量2.1k

点赞数

分类专栏： CSS/CSS3/LESS

本文链接：https://blog.csdn.net/joyvonlee/article/details/96031475

版权

CSS/CSS3/LESS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一：如何定义变量？

编写less的变量，和我们平时定义js变量的方法不太一样，在less中是使用 @ 标识符来定义变量的，如：

@font-color: blue;
@border-color: #ddd;

这里就定义了两个变量，分别是font-color 和 border-color。

二：如何使用变量

使用变量的时候，也要带上@标识符，如：

style.less

@font-color: blue;
@border-color: #ddd;


.box {
    width: 100px;
    height: 100px;
    color: @font-color;
    border: 1px solid @border-color;
}

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet/less" href="less/style.less">
    <script src="less/less.js"></script>
    <title>less</title>
</head>
<body>
    <div class="box">
        this is box
    </div>
</body>
</html>

效果：

三：在class属性名里应用变量

变量不单单可以在样式的值里边使用，还可以在class属性名里边使用，拿上面的demo来改，方法如下：

style.less

@font-color: blue;
@border-color: #ddd;

// class属性名
@my-box: box;


.@{my-box} {
    width: 100px;
    height: 100px;
    color: @font-color;
    border: 1px solid @border-color;
}

四：在样式属性中应用变量

拿刚才的demo来改写，方法如下：

@font-color: blue;
@border-color: #ddd;

// class属性名
@my-box: box;

// 样式属性
@my-width: width;              // 看这里


.@{my-box} {
    @{my-width}: 100px;        // 看这里
    height: 100px;
    color: @font-color;
    border: 1px solid @border-color;
}

五：变量名称

该方法就好像是js里的中括号[] 访问属性的形式差不多，来看看代码：

@font-color: blue;
@border-color: #ddd;

// class属性名
@my-box: box;

// 样式属性
@my-width: width;
@width-size: 100px;    // 这里定义了一个尺寸值
@var: 'width-size';    // 这里定义了一个字符串，但是该字符串是尺寸值的变量是一样的


.@{my-box} {
    @{my-width}: @@var;    // 这里可以直接使用定义的字符串，注意要多加一个@标识符
    height: 100px;
    color: @font-color;
    border: 1px solid @border-color;
}

这样写的效果跟前面的效果是一样的。

六：变量延迟加载

变量的延迟加载，就好像js的声明提前那样子理解吧，具体看看代码：

@font-color: blue;
@border-color: #ddd;

// class属性名
@my-box: box;

.@{my-box} {
    @{my-width}: @@var;
    height: 100px;
    color: @font-color;
    border: 1px solid @border-color;
}


// 变量定义在后面，也是可以的

// 样式属性
@my-width: width;
@width-size: 100px;
@var: 'width-size';

是不是很像js的变量声明提前，可以在使用的地方的后面声明定义，而不是必须要先定义再使用。

同一个变量，如果被定义两次，那么会按最后一次的来解析，前面的会被忽略。