less变量

Posted 2021-02-10 hdff

什么是less 

Less是一个Css预编译器，意思是指它可以扩展Css语言，添加功能如允许变量（variables），混合（mixins），函数（functions）和许多其他技术，让你的Css更具维护性、主题性、扩展性。例如php就不能直接和css定义变量，而通过学习less就可以进行编写。使用less来维护css是非常方便的。

LESS的下载

Less可以到官网去进行下载，网页有中文版(http://www.lesscss.net)和英文版(http://www.lesscss.org)。

LESS中的注释

Less中有两种注释形式：

//  以//开始的注释，不会被编译到css文件中去。

/**/  以/**/包裹的注释会被编译在css的文件中。

如何使用less

Less文件只有在被编译后才能被浏览器识别使用。

less变量

普通的变量

Css默认不支持变量，当我们使用less之后就可以使用。

其定义方式是 @变量名:值 ，如下，我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色：

@green: #801f77;
header {
  background: @green;
}

注意：由于变量只能定义一次，实际上他们就是“常量”

作为选择器和属性名

使用时将变量以@{变量名}的方式使用，使用例子如下：

作为选择器和属性名的变量

@kuandu:width;
[email protected]{kuandu}{
  @{kuandu}:150px
}

注意：这里的变量即使选择器又是属性名，不能写错。

作为URL

使用时，使用””将变量的值括起来，使用时同样将变量以@{变量名}的方式使用。使用例子如下：

//作为URL的变量

@imgurl:"https://www.baidu.com/img/";
header{
  background: @green url("@{imgurl}bdlogo.png");
  height: 500px;
}

延迟加载

延迟加载：变量是延迟加载的，在使用前不一定要预先说明。

意思是指：在前面使用了这个变量，但没有定义，但可以在后面给他定义出来，不影响输出。

定义多个相同名称的变量时

在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域向上搜索。这个行为类似于css的定义中始终使用最后定义的属性值。使用实例如下：

//定义多个相同名称的变量时

@var: 0;
.class {
  @var: 1;
    .brass {
      @var: 2;
      three: @var;  //这是的值是3
      @var: 3;
    }
  one: @var;  //这是的值是1
}