LessCSS

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。

更少可以运行在Node或浏览器端。

例子：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

输出：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

安装

在服务器上安装Less的最简单方法是通过npm，node.js包管理器，如下所示：

$ npm install -g less

命令行用法

安装后，您可以从命令行调用编译器，如下所示：

$ lessc styles.less

这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件，请使用：

$ lessc styles.less styles.css

要输出缩小，您可以使用CSS clean-css插件。安装插件后，使用--clean-css选项指定缩小的CSS输出：

$ lessc --clean-css styles.less styles.min.css

要查看所有lessc不带参数的命令行选项，请参阅用法。

代码用法

您可以从节点调用编译器，如下所示：

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
  console.log(output.css);
});

哪个会输出

.class {
  width: 2;
}

配置

您可以将一些选项传递给编译器：

var less = require('less');

less.render('.class { width: (1 + 1) }',
    {
      paths: ['.', './lib'],  // Specify search paths for @import directives
      filename: 'style.less', // Specify a filename, for better error messages
      compress: true          // Minify CSS output
    },
    function (e, output) {
       console.log(output.css);
    });

有关更多信息，请参阅用法

浏览器端用法

在浏览器中使用less.js非常适合开发，但不建议用于生产

客户端是最简单的入门方式，适合用Less开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多第三方工具之一进行预编译。

首先，将.less样式表链接到rel设置为“ stylesheet/less” 的属性：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载less.js并将其包含在页面元素的<script></script>标记中<head>：

<script src="less.js" type="text/javascript"></script>

提示

确保在脚本之前包含样式表。
当您链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。
由于浏览器加载外部资源的原始策略相同，因此需要启用CORS

选项

通过在以下位置之前在全局less对象上设置选项来定义选项：<script src="less.js"></script>

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

或者为了简洁起见，可以将它们设置为脚本和链接标记上的属性（需要JSON.parse浏览器支持或polyfill）。

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

下载

下载Less.js v2.5.3

下载源代码

通过直接从GitHub下载获取最新的Less.js源代码。

通过GitHub克隆或分叉

分叉项目并向我们发送拉取请求！

用Bower安装

通过在命令行中运行以下命令来安装Less.js项目和JavaScript：

bower install less

CDN

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

less 的语法：

1嵌套语法

嵌套规则
Less使您能够使用嵌套代替或与级联结合使用。假设我们有以下CSS：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
在Less中，我们也可以这样写：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
生成的代码更简洁，并模仿HTML的结构。

您还可以使用此方法将伪选择器与mixin捆绑在一起。这是经典的clearfix hack，重写为mixin（&代表当前的选择器父级）：

.clearfix {
  display: block;
  zoom: 1;

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

2 注释语法;

使用 // 或 /* 包裹注释*/

// 打包后将看不到，包裹注释，打包后依然可以看到

3变量语法：

//这些都是不言自明的：

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

#header {
  color: @light-blue;
}


//输出：

#header {
  color: #6c94be;
}

4 作用域语法：

Less中的Scope与编程语言非常相似。首先在本地查找变量和mixin，如果找不到它们，编译器将查找父作用域，依此类推。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
变量和mixin在使用之前不必声明，因此以下Less代码与前面的示例相同：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

5 混合语法

混合
Mixins是一种将一组属性从一个规则集包含（“混入”）到另一个规则集中的方法。所以说我们有以下课程：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
我们希望在其他规则集中使用这些属性。好吧，我们只需要删除我们想要属性的类的名称，如下所示：

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

.post a {
  color: red;
  .bordered;
}
.bordered该类的属性现在将出现在#menu a和.post a。（请注意，您也可以#ids用作mixins。）

另外 Mixins也可以接受参数，这些参数是混合在一起时传递给选择器块的变量。

例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
以下是我们如何将其混合到各种规则集中：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
参数mixin也可以为其参数设置默认值：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
我们现在可以像这样调用它：

#header {
  .border-radius;
}
它将包括5px边界半径。

您还可以使用不带参数的参数化mixins。如果要从CSS输出中隐藏规则集，但希望在其他规则集中包含其属性，这非常有用：

.wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }
哪个输出：

pre {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
具有多个参数的混合
参数可以是分号或逗号分隔。建议使用分号。符号逗号具有双重含义：它可以解释为mixin参数分隔符或css列表分隔符。

使用逗号作为mixin分隔符使得无法将逗号分隔列表创建为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔，并且所有逗号都属于css列表：

两个参数，每一个包含逗号分隔的列表：.name(1, 2, 3; something, else)，
三个参数，每个包含一个数字：.name(1, 2, 3)，
使用dummy分号创建mixin调用，其中一个参数包含逗号分隔的css list : .name(1, 2, 3;),
逗号分隔的默认值：.name(@param1: red, blue;)。
定义具有相同名称和参数数量的多个mixin是合法的。Less将使用所有可应用的属性。如果您使用带有一个参数的mixin .mixin(green);，那么将使用具有一个强制参数的所有mixin的属性：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}
编译成：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
命名参数
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;
}

5 混合作为函数引入

Mixins作为函数
从mixin返回变量或mixins

mixin中定义的变量和mixin是可见的，可以在调用者的范围内使用。只有一个例外，如果调用者包含一个具有相同名称的变量（包括由另一个mixin调用定义的变量），则不会复制变量。只有受调用者本地范围中存在的变量才受到保护。从父作用域继承的变量将被重写。

例：

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}
结果是：

.caller {
  width:  100%;
  height: 200px;
}
因此，mixin中定义的变量可以作为其返回值。这允许我们创建一个几乎可以像函数一样使用的mixin。

例：

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

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}
结果是：

div {
  padding: 33px;
}
直接在调用者范围中定义的变量不能被覆盖。但是，调用者父作用域中定义的变量不受保护，将被覆盖：

.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}

@size: globaly-defined-value; // callers parent scope - no protection
结果是：

.class {
  margin: in-mixin in-mixin;
}
最后，mixin中定义的mixin也作为返回值：

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}
结果是：

#namespace {
  declaration: 5;
}

导入（Importing）

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

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

除此之外，还可以学习其他的样式语音 :sass、scss

posted on 2018-11-23 15:52 Anderson_An 阅读(459) 评论(0) 编辑收藏举报

刷新页面返回顶部

Anderson_An