less学习----less变量

Posted 2020-12-10 kongbaifeiye

一、什么是less

less是css的扩展。他扩展了变量、mixin、函数等功能，使得css代码写的更有效率、更爽（哈哈），本篇主要先介绍less的变量

 

二、less的变量

相信在写css的时候，你总会发现，你某些属性的值一直都是重复的，例如系统的背景颜色、logo的地址等等，

因此通过less 的变量，你可以将重复的值用一个变量保存起来，然后就直接用！！！

语法： @+变量名

例子：

@base-color:#ff0000;

.one {
 background-color:@base-color;
 color:#ffffff;              
}

 然后将其转化为css则为：

.one {
 background-color:#ff0000;
 color:#ffffff;              
}

 呀，没错，就只是直接替换而已，是不是很简单，

当然了，less变量不仅可以用来表示属性的值，还可以用来表示选择器、属性名称、URL等

首先是选择器：

@my-select : one ;

.@{my-select} {
 background-color:red;   
}

//编译后如下：
.one { background-color:red; }

实际上还是直接将变量替换成类名而已啦，只是在使用时需要注意格式为：@{变量}

属性名称:

@property :color

.one {
 @{property}:white;
 background-@{property}:red;
}

//编译后
.one {
 color:white;
 background-color:red;
}

 属性名称也是同理，同时你还会注意到，变量可以替换到属性名称的一部分，background-color就是这样子啦

URL：

@url: "./styles"

.one {
    background:url(@{url}/img/1.jpg)
}

//css引用
@import "@{url}/themes/font.less"

 我们可以通过将路径的地址存储到变量中，可以直接替换掉图片或者css引用中的路径

在使用变量时，不仅可以存储上述各项信息，同时也可以用来存储变量名，是的，用变量来存储变量名（老套娃了，哈哈）

@a : "b";
@b : #ff0000;

.one {
    background-color:@@a;
}

//编译后
.one {
    background-color:#ff0000;
}

 这样子看是不是很有趣多了。

 

 

下面讲述变量的特性（划起来，要考的）

变量是延迟加载的，无需提前声明

怎么理解呢，通过例子来最好理解了

@my-width : 100px;
@a : 10px;

.one {
　　width:@a;
}
　　

  

.one {
　　width:@a;
}

@my-width : 100px;
@a : 10px;

 上边两种写法都是可以通过，都能读取到变量的值

 

接着第二个是，有关于变量的作用范围，emm，就是在哪个括号就包括在哪里

.one {
　　width:@my-width;
　　@a:10px;
}
.two {
　　width:@a;//这里这里，找不到a变量
}
@my-width : 100px;

 了解了变量的作用范围后，我们来看下一个，若变量在内外都定义了呢

@my-width : 100px;

.one {
　　width:@my-width;
　　@my-width:10px;
}

//编译后
.one {
　　width:10px;
}

 less会从内到外去寻找变量，若里面找的到，那么就不考虑外边了，若里面没有，则向外找，有就替换，没有，那就继续往外，直至找不到

 

关于less的变量介绍就这么多了，本文是个人在学习中的笔记整理，那么是从哪里学的，当然是看文档，哈哈

附上less文档：http://lesscss.cn/features/#variables-feature