less全知全解

程序员文章站 2022-07-03 10:34:16

...

一.简介

1.less是什么
　　Less 是一门一种动态样式语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node和浏览器上。
如以下的less代码：

 @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);
}

2. 在客户端使用

外联样式：引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

内联样式如下：

<style type="text/less">
// less 代码
</style>

接下来下载 less.js 并通过 <script></script> 标签将其引入，放置于页面的 <head> 元素内：

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

注意：你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式
监视模式是客户端的一个功能，这个功能允许当你改变样式的时候，客户端将自动刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

<script>less.watch();</script>

3.在服务器端使用

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install [email protected]

4.使用

只要安装了 LESS，就可以在Node中像这样调用编译器:

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

上面会输出

.class {
width: 2;
}

你也可以手动调用解析器和编译器:

var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});

5.配置

你可以向解析器传递参数:

var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});

6.在命令行下使用

你可以在终端调用 LESS 解析器:

$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.

二.less语法

1.变量
Less中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：

/*======== 定义变量===========*/
 @color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
    color: @color;
}
h2 {
    color: @color;
}

以上代码会编译为：

/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}

Less中的变量还具有计算功能，如：

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

编译为：

#header {color: #6c94be;}

注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。

2.混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class:

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

那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

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

.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

任何 CSS class, id 或者元素属性集都可以以同样的方式引入。怎么样，这样确实很方便很强大吧。

3.带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

然后在其他class中像这样调用它:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

所以现在如果我们像这样调用它的话:

#header {
  .border-radius;  
}

[email protected] 变量

Mixins还有一个重要的变量：@arguments。

@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例：

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
 
#header {
    .boxShadow(2px,2px,3px,#f36);
}

以上代码编译为：

#header {
    -moz-box-shadow: 2px 2px 3px #FF36;
    -webkit-box-shadow: 2px 2px 3px #FF36;
    box-shadow: 2px 2px 3px #FF36;
}

5.模式匹配

有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：

.mixin (@s, @color) { ... }
.class {
  .mixin(@switch, #888);
}

如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：

mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

现在，如果运行:

@switch: light;
.class {
  .mixin(@switch, #888);
}

就会得到下列CSS:

class {
  color: #a2a2a2;
  display: block;
}

如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。

具体实现如下：

第一个混合定义并未被匹配，因为它只接受dark做为首参

第二个混合定义被成功匹配，因为它只接受light

第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。

我们也可以匹配多个参数：

.mixin (@a) {
  color: @a;
}
.mixin (@a, @b) {
  color: fade(@a, @b);
}

6.导引表达式

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。

为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

以此例做为开始：

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

就会得到：

class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

7.导引比较运算
导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假：

.class {
  .truth(40); // Will not match any of the above definitions.
}

导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
导引可以无参数，也可以对参数进行比较运算：

 @media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

下面就是常见的检测函式：iscolor、isnumber、isstring、iskeyword、isurl

如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：ispixel、ispercentage、isem

最后，你可以使用关键词 and 在 guard 中加入额外的条件:：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

或者，使用关键词 not 否定条件：

.mixin (@b) when not (@b > 0) { ... }

8.嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

在 LESS 中, 我们就可以这样写:

#header {
  color: black;
 
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus。

例如：

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

输出：

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

9.运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:

 @base: 5%;
 @filler: @base * 2;
 @other: @base + @filler;
 
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5;

LESS 会输出 6px。

括号也同样允许使用:

width: (@var + 5) * 2;

并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

上一篇： Block全解

下一篇：问题全解

less全知全解

一.简介

二.less语法

小程序云开发实例教程，微信小程序云开发操作全解

小程序云开发实例教程，微信小程序云开发操作全解

PS制作医馆笑传宣传海报过程全解

2015年春运火车票预售时间及抢票攻略全解

激光打印机典型故障全解

Python入门之三角函数全解【收藏】

网站优化全解1:建站与优化全过程

网站优化全解2：解析搜索引擎收录问题

最近上传图片上传文件报413错误及仅Https下报413问题，IIS高版本的配置方案及Web.config配置全解

云知声 OpenDay 深圳站：全栈 AI 硬核技术助力产业落地