Less笔记- 变量

使用变量

// 声明
@link-color: #428bca;
@link-color-hover: darken(@link-color, 20%);
// 使用
a, .link {
    color: @link-color
}
a:hover {
    color: @link-color-hover;
}

/* 变量 */
a,
.link {
  color: #428bca;
}
a:hover {
  color: #245682;
}

选择器

// 声明
@my-selector: banner;
// 使用
.@{my-selector} {
   color: #333;
}
.@{my-selector}-top {
    color: #666;
}

.banner {
  color: #333;
}
.banner-top {
  color: #666;
}

URLs路径

// 声明
@images: './img';
// 使用
body {
    background: url('@{images}/demo.jpeg')
}

body {
  background: url('./img/demo.jpeg');
}

import文件声明及引入

// 声明
@themes: "./themes";
// 使用
@import "@{themes}/red.less";
.demo {
    width: @width;
}

// red.less内容 @width: 200px;

.demo {
  width: 200px;
}

属性properties

@property: color;
.demo {
    @{property}: #eee;
    background-@{property}: blue;
}

.demo {
  color: #eee;
  background-color: blue;
}

变量命名变量

用一个变量定义另一个变量的名称

// 声明
@primary:  green;
@secondary: blue;
// 使用
.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

.section .element {
  color: green;
}

// @color =〉primary @paimary =〉green =〉color: green;

延迟加载特性

• 变量可以先使用后定义

.lazy-eval {
    width: @var;
}
@var: @a;
@a: 9%;

.lazy-eval {
  width: 9%;
}

• 重复声明变量，以最后一次定义为准，从当前范围向上搜索

@color: red;
.demo {
    @color: blue;
    .inner {
        @color: black;
        color: @color;
        @color: orange;
    }
    color: gray;
}

.demo {
  color: gray;
}
.demo .inner {
  color: orange;
}

属性作为变量

v3.0以上版本支持
将当前或者父元素样式作用域中的最后一个属性值作为属性值

.demo {
    color: red;
    background-color: $color;
    color: blue;
}

.block {
    color: red;

    .inner {
        background-color: $color;
    }
    color: blue;
}

.demo {
  color: red;
  background-color: blue;
  color: blue;
}
.block {
  color: red;
  color: blue;
}
.block .inner {
  background-color: blue;
}