Less学习

作者: 纳样流年 | 来源:发表于2018-09-06 17:15 被阅读0次

Variables（变量）

概述
变量通过为你提供一种在一个地方管理这些值的方法让你的代码变得更容易维护：

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

变量插值
在上面的例子主要集中于在CSS规则中使用变量管理值，实际上它们还可以用在其他地方，比如选择器名称，属性名，URLs以及@import语句中。

选择器

@mySelector: banner;

.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

URLs

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

变量名

@fnord:  "I am fnord.";

content: @@fnord;

延迟加载
变量是延迟加载的，在使用前不一定要预先声明。在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索。这个行为类似于CSS的定义中始终使用最后定义的属性值。

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

@var: @a;
@a: 100%;

编译为

.lazy-eval-scope {
  width: 9%;
}

默认变量

有时候你会用到默认变量-让你能够在没有设置某些变量的情况下设置指定的变量。这一特性并不强制要求你这么做，因为你可以很容易通过插入后定义同名变量的方式覆盖默认变量。比如

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;

因为延迟加载，这上面的代码能很好的工作 - 其中base-color会被重写，而dark-color依然是暗红色。

Extend （扩展）

extend是一个Less伪类，它会合并它所在的选择其和它所匹配的引用。

nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

在上面设置的规则中，:extend选择器会在.inline类出现的地方在.inline上应用"扩展选择器"(也就是nav ul)。声明块保持原样，不会带有任何引用扩展(因为扩展并不是CSS)。因此上面代码输出：

nav ul {
  background: blue;
}
.inline,nav ul {
  color: red;
}

扩展语法
extend可以附加给一个选择器，也可以放入一个规则集中。它看起来像是一个带选择器参数伪类，也可以使用关键字all选择相邻的选择器。示例：

.a:extend(.b) {}

// 上面的代码块与下面这个做一样的事情
.a {
  &:extend(.b);
}

在 .b出现的地方，会使用“，”扩展出.a

它可以包含多个要扩展的类，使用逗号分割即可。

.e:extend(.f) {}
.e:extend(.g) {}

// 上面的代码与下面的做一样的事情
.e:extend(.f, .g) {}

作用域/@media内的扩展

编写在media声明内的extend也应该只匹配同一media声明内的选择器：

@media print {
  .screenClass:extend(.selector) {} // media内的extend
  .selector { // 这个会匹配到-因为在同一的media内
    color: black;
  }
}
.selector { // 定义样式表中的规则 - extend会忽略它
  color: red;
}
@media screen {
  .selector {  // 另一个media声明内的规则 - extend也会忽略它
    color: blue;
  }
}`

编译为：

@media print {
  .selector,
  .screenClass { /*  同一media内的规则扩展成功 */
    color: black;
  }
}
.selector { /* 定义样式表中的规则被忽略 */
  color: red;
}
@media screen {
  .selector { /* 其他media中的规则也被忽略 */
    color: blue;
  }
}

编写在media声明内的extend不会匹配嵌套声明内的选择器：

@media screen {
  .screenClass:extend(.selector) {} // media内的extend
  @media (min-width: 1023px) {
    .selector {  // 嵌套media内的规则 - extend会忽略它
      color: blue;
    }
  }
}

编译为：

@media screen and (min-width: 1023px) {
  .selector { /* 其他嵌套media内的规则被忽略 */
    color: blue;
  }
}

顶级extend匹配一切，包括media嵌套内的选择器：

@media screen {
  .selector {  /* media嵌套内的规则 - 顶级extend正常工作 */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* media嵌套内的规则 - 顶级extend正常工作 */
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {} /* 顶级extend匹配一切 */

编译为：

@media screen {
  .selector,
  .topLevel { /* media嵌套内的规则被扩展了 */
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel { /* media嵌套内的规则被扩展了 */
    color: blue;
  }
}

扩展用例
经典用于就是避免添加基础类。比如，如果你有：

.animal {
  background-color: black;
  color: white;
}

如果你想有一个animal子类型，并且要重写背景颜色。那么你有两个选择，首先改变你的HTML

<a class="animal bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

或者简化HTML，然后在你的less中使用extend，比如：

<a class="bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear:extend(.animal){
  background-color: brown;
}

Mixins (混合)

从现有的样式混合（mixin）属性

混合“类”选择器或者“id”选择器
例如：

.a, #b {
  color: red;
}
.mixin-class {
  .a;
}
.mixin-id {
  #b;
}

编译为：

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

不输出混合集
如果你想要创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加上一个括号。

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

带选择器的混合集
混合集不仅可以包含各种属性，而且可以包括各种选择器。
例如：

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

输出：

button:hover {
  border: 1px solid red;
}

命名空间
如果你想要将属性混合到比较复杂的选择器中，你可以通过嵌套多层id或者class。

#outer {
  .inner {
    color: red;
  }
}

.c {
// 下面四种写法效果是一样的
    #outer > .inner;
    #outer > .inner();
    #outer.inner;
    #outer.inner();
}

!important关键字
在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important：

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();//这里可以去掉()
}
.important {
  .foo() !important;//这里可以去掉()
}

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

带参数的混合

mixins也可以接受参数，在它进行mix in操作时会将变量传递给选择器代码块。

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

然后你可以这样调用它：

#header {
  .border-radius;//这里仍然会包含一个5px的border-radius。
  .border-radius(4px);
}

Mixins With Multiple Parameters （带多个参数的mixins）
参数可以用分号分割。

.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

编译为：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

@arguments在mixins内部有特殊意义，调用mixin时，它包含所有传入的参数。如果你不想单个单个的处理参数，这一特性是很有用的：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

Import Directives （导入准则）

从其他样式表中导入样式
在标准的CSS中，@import必须在所有其他类型的规则之前。但是Less.js不在乎你把@import语句放在什么位置。示例：

.foo {
  background: #900;
}
@import "this-is-valid.less";

@import语句会通过Less依赖文件扩展名的方式区别对待不同的文件：

如果文件有一个.css扩展名，则将它作为CSS对象，同时@import语句保持不变（查看下面的inline选项）
如果有其他扩展名，则作为Less对象，然后导入它。
如果没有扩展名，则插入.less，然后将它作为Less文件导入包含进来
导入选项用来重写这一行为
导入选项

Less提供了一系列的CSS扩展来让你使用@import更灵活的导入第三方CSS文件。
语法：@import (keyword) "filename";

下面导入指令已经被实现了：

reference：使用Less文件但不输出
inline：在输出中包含源文件但不加工它
less：将文件作为Less文件对象，无论是什么文件扩展名
css：将文件作为CSS文件对象，无论是什么文件扩展名
once：只包含文件一次（默认行为）
multiple：包含文件多次

Mixin Guards

带条件的mixins。

CSS Guards

Loops （循环）

Merge （合并）

merge特性可以从多个属性中将值集合集合到一个单一属性之下的逗号或空格分割属性列表中。对于诸如background和transform之类的属性来说，merge非常有用。

Comma （逗号）

通过逗号添加属性的值
示例：

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

编译为：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

Space （作用域）

作用域内附加属性

示例:

.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

编译为：

.myclass {
  transform: scale(2) rotate(15deg);
}

为避免任何非有意的添加，merge需要在每个待加入的声明中显示的设置一个+或者+_标记。

Parent Selectors （父级选择器）

使用&引用父选择器，& 运算符表示一个嵌套规则的父选择器，它在应用修改类或者应用伪类给现有选择器时最常用：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

编译为：

a {
  color: blue;
}

a:hover {
  color: green;
}

注意，如果上面的示例没有使用&，那么它的结果就是a :hover（一个匹配<a>标签内的hovered元素的后代选择器），这通常并不是我么想要的嵌套的:hover的结果。

Multiple & （多个 &）
&可以在一个选择器中出现不止一次。这就使得它可以反复引用父选择器，而不是重复父选择器的类名。

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

编译为：

.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

注意，&代表所有的父选择器（而不只是最近的长辈），因此下面的例子：

.grand {
  .parent {
    & > & {
      color: red;
    }

    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

编译为：

.grand .parent > .grand .parent {
  color: red;
}
.grand .parent .grand .parent {
  color: green;
}
.grand .parent.grand .parent {
  color: blue;
}
.grand .parent,
.grand .parentish {
  color: cyan;
}

Changing selector order （改变选择器顺序）

要前置插入一个选择器给继承的(父)选择器时它是很有用的。用过将&放到当前选择器之后就可以做到这一点。

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

选择器.no-borderradius &会前置插入.no-borderradius给它的父选择器.header .menu，最后变成.no-borderradius .header .menu形式输出：

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

Less学习

Variables（变量）

Extend （扩展）

Mixins (混合)

Mixin Guards

CSS Guards

Loops （循环）

Merge （合并）

Parent Selectors （父级选择器）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读