less

最新推荐文章于 2024-10-15 20:45:55 发布

weixin_30908103

最新推荐文章于 2024-10-15 20:45:55 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhy-93/p/5741642.html

本文介绍LESS CSS预处理器的基础知识，包括安装方式、命令行用法、变量使用、混合定义、嵌套规则、运算操作及导入功能等核心内容。

安装

在服务器端最容易的安装方式就是通过 npm （ node.js 的包管理器），方法如下： $ npm install -g less

命令行用法

安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：

$ lessc styles.less > styles.css

若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用 Clean CSS 进行压缩。（在此之前要通过npm安装less-plugin-clean-css插件）

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

使用

一变量（变量是按需加载的，不必强制在使用之前声明。sass必须先声明，不然报错）

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

还可以在定义变量时使用其他的变量

字符串插值：

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

二混合（Mixins）直接定义类名使用的时候也不需要@extend

1. 如果想隐藏属性集合，不让它暴露在css中，但是又想在其他的属性集合中引用，就可以定义不带参数的属性集合

2.多参数混合：可用逗号和分号，推荐使用分号（因为逗号还可表示一个参数中一组值的分隔符。）

3.使用同样的名字和同样同样数量的参数定义多个混合是合法的，在被调用时，less会应用到所有可用应用的混合上，比如你调用混合时只传了一个参数，那么所有只强制要求一个参数的混合都会被调用。 （只有一个参数没有默认值）

4. @arguments变量包含了所有传递进来的参数。

.box-shadow (@x:0, @y:0, @blur:1px, @color:#000){
     box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}
.box {
    .box-shadow(2px, 5px);
}
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .rounded-corners;
}

5. !important 关键字 如果在混合后面加上!important关键字表示将混合带来的所有属性标记为!important

6. 几个检查类型的函数

- iscolor

- isnumber

- isstring

- iskeyword

- isurl

如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：

- ispixel

- ispercentage

- isem

7. Guards 用来匹配表达式

.mixin (@a) when (lightness(@a) >= 50%) { 
}
.mixin (@a) when (lightness(@a) < 50%) {
}

要点在于关键词 when，它引入了一个 guard 条件（这里只用到一个 guard），你可以使用关键词 and 在 guard 中加入额外的条件:.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

三嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

嵌套Media Queries

 .one {
  @media (width: 400px) {
  font-size: 1.2em;
  @media print and color {
  color: blue;
  }
  }
}

四运算

五函数 http://www.1024i.com/demo/less/reference.html

六命名空间

七导入 可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可。对导入CSS文件只做一处处理：将导入的语句提到最前，紧跟在@charset之后。

@import "library.less" screen and (max-width: 400px); // 通过media query指定的import@import "library.less"; // 无media query的import

转载于:https://www.cnblogs.com/lhy-93/p/5741642.html