Less语法学习

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

变量

说明：声明变量的时候，使用@开头，并且对于声明的变量，可以进行运算。注意：变量实际上是“常量”，因为它们只能定义一次。举例如下：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

输出：

#header {
  color: #6c94be;
}

混入

Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称。

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

嵌套规则

Less使您能够使用嵌套代替或与级联结合使用。另外，将伪选择器与mixin捆绑在一起。经典的clearfix hack，重写为mixin（&代表当前的选择器父级）：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

转化后：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

与伪选择器结合使用，举例：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

嵌套指令和冒泡

media或keyframe可以以与选择器相同的方式嵌套指令。指令位于顶部，相对于同一规则集内其他元素的相对顺序保持不变。这叫做冒泡。
有条件的指令，例如@Media，@supports也@document有选择器复制到他们的身体：
个人通俗理解：选择器（.screen-color）写在最外面，内部的@media嵌套可以理解为 “&” ，即 and 。

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

转化后：

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其余非条件指令，例如font-face或keyframes，被冒泡了。他们的身体没有改变：

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

转化后：

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

操作

算术运算+，-，*，/可以在任意数量，颜色或可变的操作。如果可能，数学运算会考虑单位并在添加，减去或比较数字之前转换数字。结果最左边是明确说明的单位类型。如果转换不可能或没有意义，则忽略单位。不可能转换的示例：px到cm或rad到％。

功能

Less提供了各种功能，可以转换颜色，操纵字符串和进行数学运算。它们完全记录在函数参考中。
示例：使用百分比将0.5％转换为50％，将基色的饱和度增加5％，然后将背景颜色设置为减轻25％并旋转8度的颜色：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

命名空间和访问器（暂不理解）

范围（暂不理解）

评论（暂不理解）

输入

导入工作几乎与预期一致。您可以导入.less文件，其中的所有变量都可用。可以选择为.less文件指定扩展名。

@import "library"; // library.less
@import "typo.css";

可变插值

变量可控制CSS规则中的值，也可在其他地方使用，例如选择器名称，属性名称，URL和@import语句。

选择

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

转化为：

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

网址

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

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

导入语句

// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

属性

@property: color;

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

变量名称

使用变量定义变量

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;
// 输出结果为content: "I am fnord.";

延迟加载（咱不理解）

默认变量

默认变量的请求 - 只有在尚未设置变量时才能设置变量。此功能不是必需的，因为您可以通过后面的定义轻松覆盖变量。这可以正常工作，因为延迟加载 - 基色被覆盖，深色是深红色。

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);
// use of library
@import "library.less";
@base-color: red;

Less语法学习-未完待续

Less语法学习

猜你喜欢