Y 分钟速成 less

源代码下载： learnless-cn.less

Less 是一种 CSS 预处理器，它增加了诸如变量、嵌套、mixin 等功能。
Less (以及其它预处理器，如 Sass)能帮助开发人员编写易维护，DRY (Don't Repeat Yourself) 的代码。

//单行注释在编译成CSS后会被删除。

/* 多行注释将保留. */



/* 变量
==============================*/


/* 你可以将一个CSS值（如一个颜色值）保存到变量中。
   使用'@'符号来创建一个变量。*/

@primary-color: #a3a4ff;
@secondary-color: #51527f;
@body-font: 'Roboto', sans-serif;

/* 你可以在你的样式文件中使用这些变量。
   现在假如你想修改颜色，你只需修改一次即可。*/

body {
    background-color: @primary-color;
    color: @secondary-color;
    font-family: @body-font;
}

/* 以上将编译成： */

body {
    background-color: #a3a4ff;
    color: #51527F;
    font-family: 'Roboto', sans-serif;
}


/* 相比于在你的样式文件中逐个修改，这种方式维护性更好。 */



/* Mixins
==============================*/


/* 如果你要为多个元素编写同样的代码，
   你可能想实现轻松地重用。*/

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* 你只需简单地将选择子作为样式添加进来就能使用mixin了 */

div {
    .center;
    background-color: @primary-color;
}

/* 它将编译成: */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background-color: #a3a4ff;
}

/* 通过在选择子后添加括号，可以使这些mixin代码不被编译 */

.center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

div {
  .center;
  background-color: @primary-color;
}

/* 将编译成: */
div {
  display: block;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: #a3a4ff;
}



/* 嵌套
==============================*/


/* Less允许你在选择子中嵌套选择子 */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #f00;
    }
}

/* '&'将被替换成父选择子。*/
/* 你也可以嵌套伪类。 */
/* 注意过度嵌套将会导致代码难以维护。
   最佳实践推荐在嵌套时不超过3层。
   例如： */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: red;

        &:hover {
          background-color: blue;
        }

        a {
          color: white;
        }
    }
}

/* 编译成： */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* 函数
==============================*/


/* Less提供的函数可以用来完成多种任务。
   考虑以下情况： */

/* 函数可以通过其名称及传入其所需的参数来调用。 */

body {
  width: round(10.25px);
}

.header {
    background-color: lighten(#000, 0.5);
}

.footer {
  background-color: fadeout(#000, 0.25)
}

/* 编译成: */

body {
  width: 10px;
}

.header {
  background-color: #010101;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* 你也可以定义自己的函数。函数非常类似于mixin。
   当你在函数和mixin之间抉择时，
   记住mixin最适合用来创建CSS而函数更适合于
   处理那些可能在你的Less代码中使用的逻辑。
   '数学运算符'部分的例子是转成可重用函数的最佳选择。*/

/* 该函数计算两数的平均值： */

.average(@x, @y) {
  @average-result: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "调用"mixin
  padding: @average-result;    // 使用它的"返回"值
}

/* 编译成: */

div {
  padding: 33px;
}



/* 扩展 (继承)
==============================*/


/* 扩展是在选择子间共享属性的一种方法。 */

.display {
  height: 50px;
}

.display-success {
  &:extend(.display);
    border-color: #22df56;
}

/* 编译成: */
.display,
.display-success {
  height: 50px;
}
.display-success {
  border-color: #22df56;
}

/* 扩展一条CSS语句优于创建一个mixin，
   这是由其组合所有共享相同基样式的类的方式决定的。
   如果使用mixin完成，其属性将会在调用了该mixin的每条语句中重复。
   虽然它不至会影响你的工作流，但它会在由Less编译器
   生成的的文件中添加不必要的代码。*/



/* 片段与导入
==============================*/


/* Less允许你创建片段文件。它有助于你的Less代码保持模块化。
   片段文件习惯上以'_'开头，例如 _reset.css，并被导入到
   一个将会被编译成CSS的主less文件中。*/

/* 考虑以下的CSS，我们将把它们放入一个叫_reset.css的文件中 */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Less提供的@import能用来将片段导入到文件中。
   它与传统的CSS @import语句不同，无需通过
   HTTP请求获取导入文件。Less提取导入文件
   并将它们与编译后的代码结合起来。 */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* 编译成: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* 数学运算符
==============================*/


/* Less提供以下的运算符: +, -, *, /, 和 %。
   相比于使用你事先手工计算好了的数值，它们
   对于直接在你的Less文件中计算数值很有用。
   以下是设置一个两列设计的例子。*/

@content-area: 960px;
@main-content: 600px;
@sidebar-content: 300px;

@main-size: @main-content / @content-area * 100%;
@sidebar-size: @sidebar-content / @content-area * 100%;
@gutter: 100% - (@main-size + @sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: @main-size;
}

.sidebar {
  width: @sidebar-size;
}

.gutter {
  width: @gutter;
}

/* 编译成： */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}

实践Less

如果你想在你的浏览器中尝试 LESS，参阅：

• Codepen
• LESS2CSS

兼容性

Less 可以用于任何项目中，只要你有程序能将它编译成 CSS 即可。你还需要验证你所使用的 CSS 是否与你的目标浏览器兼容。

QuirksMode CSS 和 CanIUse 对于检查兼容性来说都是不错的资源。

延伸阅读资料

• Official Documentation
• Less CSS - Beginner's Guide

有建议？或者发现什么错误？在 Github 上开一个 issue ，或者发起 pull request！

---

原文由 Saravanan Ganesh 编写，并由 0 个好心人 修改。
Translated by: Jiang Haiyun
© 2022 Saravanan Ganesh
本作品采用 CC BY-SA 3.0 协议进行许可。