web前端笔记8

8. Less的使用

• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
• Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。
• LESS由Alexis Sellier于2009年设计。LESS是一个开源。LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript代替。

8.1 CSS的问题

• 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：
• CSS 需要书写大量看似没有逻辑的代码
• 不方便维护及扩展，不利于复用
• 对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，
• 造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

8.2 Less扩展CSS功能

8.2.1 变量（Variables）

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译后生成：

#header {
   
  width: 10px;
  height: 20px;
}

8.2.2 混合（Mixins）

• 混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

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

• 如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

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

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

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

• 编译后css所示：

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

#menu a {
   
  color: #111;
  border-top: dotted 1px black