less学习笔记

#变量

• 控制值

相同的值重复出现多次，用变量从单个位置去控制这个值，易于维护代码。

• 控制选择器名称、属性名称、URL 和@import语句

//选择器
@my-selector: banner;
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
//属性名称
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
//url
@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
//@import语句
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

 @import语句：仅考虑已在根或当前作用域中声明的变量，并且在查找变量时仅考虑当前文件和调用文件。

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

@primary:  green;
.section {
  @color: primary;
  .element {
    color: @@color;
  }
}

• 变量使用前不必声明
• 两次定义变量时，使用变量的最后一个定义，从当前作用域向上搜索

//多次定义
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
//编译为
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

• 使用$prop语法将属性视为变量

.widget {
  color: #efefef;
  background-color: $color;
}
//编译为
.widget {
  color: #efefef;
  background-color: #efefef;
}

        多次定义时规则与变量相同

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
//编译为
.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

#父选择器&

• 改变默认嵌套规则
• 更改选择器顺序

# :extend扩展语法

• :extend将它所放置的选择器与其引用的选择器相匹配。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}
//编译成
nav ul {
  background: blue;
}
.inline,nav ul {
  color: red;
}

•  扩展附加到选择器或放置到规则集中，像一个带有选择器参数的伪类，可选地后跟关键字all

.c:extend(.d all) {
  // 扩展所有实例".d"，比如".x.d"或".d.x"
}
.c:extend(.d) {
  // 只扩展选择器输出为".d"的实例
}
//它可以包含一个或多个要扩展的类，用逗号分隔
.e:extend(.f) {}
.e:extend(.g) {}
// the above and the below do the same thing
.e:extend(.f, .g) {}

• 扩展附加到选择器：

        看起来像一个普通的伪类，以选择器作为参数。一个选择器可以包含多个扩展子句，但所有扩展都必须位于选择器的末尾。

                1、在选择器之后扩展：pre:hover:extend(div pre).

                2、选择器和扩展之间允许有空格：pre:hover :extend(div pre).

                3、允许多个扩展：pre:hover:extend(div pre):extend(.bucket tr)- 这等同于pre:hover:extend(div pre, .bucket tr)

                4、这是不允许的：pre:hover:extend(div pre).nth-child(odd)，延长必须在最后。

• 一个规则集包含多个选择器：它们中的任何一个都可以有 extend 关键字。

.big-division, 
.big-bag:extend(.bag), 
.big-bucket:extend(.bucket) { 
    // body 
}

• 将扩展放入规则集的主体中：将扩展放入该规则集的每个选择器的快捷方式

pre:hover,
.some-class {
  &:extend(div pre);
}
//编译后
pre:hover:extend(div pre),
.some-class:extend(div pre) {}

•   扩展嵌套选择器： 、

        extend 能够匹配嵌套的选择器

.bucket {
  tr { // nested ruleset with target selector
    color: blue;
  }
}
.some-class:extend(.bucket tr) {} // nested ruleset is recognized

• 与扩展精确匹配：

        默认情况下扩展查找选择器之间的完全匹配

.a.class,
.class.a,
.class > .a {
  color: blue;
}
.test:extend(.class) {} // 无法匹配上面任何一个

*.class {
  color: blue;
}
.noStar:extend(.class) {} //选择器*.class和.class是等价的，但扩展不会匹配它们

link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}//无法匹配
/*
选择器link:hover:visited和link:visited:hover匹配相同的元素集，
但扩展将它们视为不同
*/

:nth-child(1n+3) {
  color: blue;
}
.child:extend(:nth-child(n+3)) {}
//第 N 个表达式1n+3和n+3是等价的，但扩展不会匹配它们

• 属性选择器中的引用类型无关紧要

[title=identifier] {
  color: blue;
}
.noQuote:extend([title=identifier]) {}
.singleQuote:extend([title='identifier']) {}
.doubleQuote:extend([title="identifier"]) {}
//编译后
[title=identifier],
.noQuote,
.singleQuote,
.doubleQuote {
  color: blue;
}

•  all关键字：

        当您在扩展参数中最后指定 all 关键字时，它会告诉 Less 将该选择器作为另一个选择器的一部分进行匹配。选择器将被复制，然后选择器的匹配部分将被扩展替换，从而形成一个新的选择器。

.a.b.test,.test.c {
  color: orang