less少开始


备注

Less是一个开源预处理器。通过允许作者定义和使用变量,mixins等,它使编写和维护CSS变得更容易。它还具有可用于编写条件样式的Guards等功能,有助于保持代码DRY的循环和许多内置函数执行数学运算,字符串和颜色处理等。

不要与同名的Unix工具混淆。

版本

发布日期
2.7.1 2016年5月9日
2.7.0 2016年5月7日
2.6.1 2016年3月4日
2.6.0 2016年1月29日
2.5.3 2015年9月25日
2.5.2 2015年9月24日
2.5.1 2015年5月21日
2.5.0 2015年4月3日
2.4.0 2015年2月7日
2.3.1 2015-01-28
2.3.0 2015年1月27日
2.2.0 2015-01-04
2.1.2 二零一四年十二月二十零日
2.1.1 情节中字
2.1.0 2014年11月23日
2.0.0 2014-11-09
1.7.5 2014年9月3日
1.7.4 2014年7月27日
1.7.3 2014年6月22日
1.7.2 2014-06-19
1.7.1 2014年6月8日
1.7.0 2014年2月27日
1.6.3 2014年2月8日
1.6.2 2014年2月2日
1.6.1 2014年1月12日
1.6.0 2014年1月1日
1.5.1 2013年11月17日
1.5.0 2013年10月21日
1.4.2 二零一三年七月二十零日
1.4.1 2013年7月5日
1.4.0 2013年6月5日
1.3.3 2012-12-30
1.3.2 2012-12-28
1.3.1 二〇一二年十月一十八日
1.3.0 2012-03-10
1.2.1 2012-01-15
1.2.0 2012-01-07

所有版本的更改日志都可以在官方GitHub页面中找到

从命令行编译Less文件

lessc [options] <source> [destination]
 

上面的命令用于在命令行中编译Less文件。选项是编译器在编译期间或编译后应使用的各种设置。选项包括-x--compress 用于压缩或缩小输出CSS文件, -sm=on--strict-math=on 用于仅对括号内包含的值应用数学运算等。接下来是源的路径必须编译的文件。 Destination是输出文件的路径和名称。如果未提供,则输出将在命令行窗口中打印出来。

请考虑以下Less代码

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;
 

在命令窗口中打印已编译的CSS:

在命令行中执行以下命令时,将编译test.less文件,并且将直接在命令窗口上打印输出,因为没有提供目标路径。

lessc test.less
 

输出:

#demo {
  color: red;
  background: beige;
  width: 25%;
}
 

创建一个CSS文件并将编译后的输出写入该文件:

使用以下语句编译时,相同的文件将在与test.less文件相同的路径中创建名为test.css的文件,并将输出打印/写入该CSS文件。

lessc test.less > test.css
 

创建一个CSS文件并缩小它:

下面的命令将输出打印/写入CSS文件,并在最后压缩它。

lessc -x test.less > test.css
 

输出:

#demo{color:red;background:beige;width:25%}
 

启用严格数学选项:

启用严格匹配选项时,输出将如下所示,因为width 值未包含在大括号内。

lessc -sm=on test.less > test.css
 

输出:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}
 

安装或设置

Less是最受欢迎的CSS预处理器之一,并且已广泛部署在许多前端框架中,如Bootstrap,Foundation等。Less Compiler是一个基于JavaScript的编译器,可以从Content Delivery Network获得:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

您需要在加载JavaScript编译器之前使用<link /> 标记添加Less文档。 Less样式表和编译器如下所示:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
 

注意:通常不建议在客户端(或在浏览器中)编译Less。它应仅用于开发或使用动态设置,使其无法编译服务器端。

加入文件 - 进口

@import 语句允许您将CSS / Less代码从另一个文件插入到您自己的CSS / Less文件中。

.foo {
  background: #900;
}
@import "my-other-css-file.css";
@import "my-other-less-file.less";
 

嵌套在更少

在Less中,您可以编写更简单的CSS规则并保持格式良好,因此不要编写此代码:

CSS

.item {
  border: 1px solid;
  padding: 4px;
}
.item .content, .item .image {
  float: left;
}
.item .content {
  font-size: 12px;
}
.item .image {
  width: 300px;
}
 

你可以这样写:

.item {
  border: 1px solid;
  padding: 4px;
  .content, .image {
    float: left;
  }
  .content {
    font-size: 12px;
  }
  .image {
    width: 300px;
  }
}
 

而Less会将该代码编译成我们都知道的普通CSS。

少量语法

以下示例是示例Less文件,其中显示了如何声明和使用变量,如何在Less中定义和调用mixins。

/* Variables */
@color-base: #87ceeb;

/* Simple mixin to set border */

.set-border(@width; @style; @color) {
  border: @width @style darken(@color, 10%);
}

/* Main CSS */
.class1 {
  background-color: @color-base;
  .set-border(1px; solid; @color-base);
  .class2 {
    background-color: #fff;
    color: @color-base;
    .set-border(1px; solid; #fff);
  }
}
 

编译时的上述代码将生成以下CSS :(为简洁起见,将删除注释)

.class1 {
  background-color: #87ceeb;
  border: 1px solid #5bbce4;
}
.class1 .class2 {
  background-color: #fff;
  color: #87ceeb;
  border: 1px solid #e6e6e6;
}