Less的简单使用（一）——变量的用法

Less的简单使用（一）——变量的用法

Less是css的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。

变量

一、变量正常用法（variables）

在一个位置控制常用值
.less文件中

/**/ Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);
// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}**

.css文件中对应的css代码：

a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}

二、变量作为选择器名称使用

语法：变量声明：@变量：值 --------------使用：.@{变量}
.less文件中代码：

//Variables
@my-selector: bananer;
//Usage
.@{my-selector} {
    font-weight: bold;
    color: lightblue;
}

.css文件中对应的css代码:

.bananer {
  font-weight: bold;
  color: lightblue;
}

三、变量作为属性名称使用

使用方法与作为选择器名称使用一样：
.less文件中代码：

// Properties
@property: color;

.@{property} {
    @{property}: red;
    background-@{property}: green;
}

.css文件中对应的css代码：

.color {
  color: red;
  background-color: green;
}

三、变量作为URL使用

语法：@变量:值 ----------- URL使用：url("@{变量}/图片名称")（注：变量即路径）
直接在变量中直接写入完整的路径也是可以的
.less文件中的代码：

//URLs
@images: "../img";
body {
    background-image: url("@{images}/white-sand.png");
}

.css文件中对应的css代码：

body {
  background-image: url("../img/white-sand.png");
}

四、变量作为@import语句使用

用法跟URL一样

// Variables
@themes: "../test";
// Usage
@import "@{themes}/test.less";

在.css文件中输出的即为tess.less中所对应的css代码，而不是@import语句

五、变量作为变量名使用

在.less文件中，可以使用变量定义另一个变量的名称
.less文件中的代码：

// Variable Variables
@primary: lightblue;
@secondary: lightyellow;

.section {
    @color: primary;

    .element {
        color: @@color;
    }
    p {
        color: @secondary;
    }
}

.css文件中对应的css代码：

.section .element {
  color: lightblue;
}
.section p {
  color: lightyellow;
}

六、变量的Lazy Evaluation

变量在使用之前可以不必声明，可以在使用之后声明
如果存在局部变量，那么该作用域的属性会引用局部变量，如果不存在局部变量，那么后面声明的变量会覆盖前面声明的变量（如果声明了两个局部变量，同理）
.less文件中的代码：

// Lazy Evaluation
.lazy-eval {
    width: @var;
    @a: 100px;
}
@var: @a;
@a: 80px;
@a: 40px;

.css文件中对应的css代码：

.lazy-eval {
  width: 100px;
}

七、属性作为变量

使用$prop语法将属性当作变量来使用
.less文件中的代码：

//   Properties as Variables 
.widget {
    color: #dafafb;
    background-color: $color;
}
.ul {
    height: 20px;
    .li {
        padding: $height;
    }
    height: 40px;
}

.css文件中对应的css代码：

.widget {
  color: #dafafb;
  background-color: #dafafb;
}
.ul {
  height: 20px;
  height: 40px;
}
.ul .li {
  padding: 40px;
}

八、默认变量

默认变量使得可以通过在后面放置定义来覆盖变量
.less文件中的代码：

// Default Variables
@base-color: green;
@dark-color: darken(@base-color, 20%);  //深绿色

.footer {
    @base-color: red;
    color: @dark-color;
}

.css文件中所对应的css代码：

.footer {
  color: #990000;  //深红色
}

由于延迟加载， @base-color已被覆盖并且@dark-color为深红色