第128天：less简单入门_less28722106025005-优快云博客

本文介绍 LESS CSS 预处理器的基本概念及其优势，包括变量、注释等语法特点，并提供安装指南及使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，预处理

1，官网文件

>一款比较流行的预处理CSS，支持变量，混合，函数，嵌套，循环等特点
> [官网]（http://lesscss.org/）
> [中文网]（http://lesscss.cn /）
> http://www.w3cplus.com/css/less

[less手册] www.lesscss.net/

[bootstrap官网少介绍] http://www.bootcss.com/p/lesscss/

2，为什么要有预处理CSS

CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP，Java脚本等等，有自己的变量，常量，条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。

很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处（CSS预处理器）“。

3，什么是预处理CSS

- CSS语言的超集，比CSS更丰满

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行网站页面样式设计，然后再编译成正常的CSS文件，以供项目使用.CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量，简单的逻辑程序，函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。

CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS），LESS，Stylus，Turbine，Swithch CSS，CSS Cacheer，DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在LinkedIn，Twitter的，CSS帽子戏法，知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。

到目前为止，在众多优秀的CSS预处理器语言中就属无礼，LESS和手写笔最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景，安装，使用语法，异同等几个对比之处向你介绍这三款CSS预处理器语言相信前端开发工程师会做出自己的选择-我要选择哪款CSS预处理器。

4，如何使用预处理减

less.js

>网页运行阶段解析LESS文件

使用方式：

少编译器

>开发阶段编译LESS文件成为CSS

使用方式：

安装

　　- 安装Node.js
　　- 安装少
+命令行执行：npm install -g less

　　编译操作

　　语法

　　注释

``` 少
　　//模板注释，这里的注释转换成CSS后将会删除
　　/ * CSS注释语法转换为CSS后任然保留* /
```

　　定义变量

　　>将需要重复使用或经常修改的值定义为变量，需要使用的地方引用

二，浏览器端环境搭建

github下载地址：https：//github.com/less/less.js

1，JS引入

搭建Less的学习环境非常简单，只需要</ body>标签前通过<script type =“text / javascript”src =“less.js”> </ script>引入处理器即可实现浏览器端中将少预编译为CSS样式。

更有效的方式是通过如下代码监测少样式，自动编译为CSS样式，从而减少我们修改较少代码后需按F5后才看到实际效果的繁琐步骤。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

2，较少的CSS样式处理

更少的内联样式和外联样式

基于我们现在使用的是浏览器端进行预编译，因此不太可用于内联样式和外联样式当中。

内联样式如下：

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

外联样式引入如下：

注意：注意版本的值是样式表/更少

三，语法

1，注释

// 单行注释，不会作为最终输出
/* 
    多行注释，以原生CSS的/*注释....*/形式作为最终输出
 */

2，变量

少中的变量有以下规则：

以@作为变量的起始标识，变量名由字母，数字，_和-组成
没有先定义后使用的规定;
以最后定义的值为最终值;
可用于规则值，规则属性，规则属性部件，选择器，选择器部件，字符串拼接;
定义时“ @变量名：变量值 ;” 的形式; 引用时采用“ @变量名 ”或“ @ {变量名} ”的形式;
存在作用域，局部作用域优先级高于全局作用域。

注意：注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。

少源码

 1 @color: color;
 2   @dialog: .dialog;
 3   @suffix: fix;
 4   // 空格将被忽略，若要保留空格则需要使用单引号或双引号
 5   @hi: 'hello ';
 6   @dear: there  ;
 7       
 8   .dialog{
 9   // 用于 rule属性部件，必须使用"@{变量名}" 的形式
10      background-@{color}: #888;
11      // 用于 rule属性，必须使用"@{变量名}" 的形式
12      @{color}: blue;
13   }
14   // 用于 选择器，必须使用"@{变量名}" 的形式
15   @{dialog}{
16      width: 200px;
17   }
18   @{dialog}::after{
19      content: ': @{hi}@{dear}!';    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
20   }
21   @h: 1000px;
22   // 用于 选择器部件，必须使用"@{变量名}" 的形式
23   .ie-@{suffix}{
24      @h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
25      height: @h; // 用于 属性值，两种形式均可使用
26      line-height: 30px;
27   }
28       
29   // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
30   // 2. 没有先定义后使用的规定；
31   @dialog-border-color: #666;
32   @dialog-border-width: 10px;
33   @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

最终输出：

 1 .dialog {
 2   background-color: #888;
 3   color: blue;
 4 }
 5 .dialog {
 6   width: 200px;
 7 }
 8 .dialog::after {
 9   content: ': hello there!';
10 }
11 .ie-fix {
12   height: 30px;
13   line-height: 30px;
14 }

四，一饮而尽编译少

1，安装

全局安装：npm install -g less

项目内安装：npm install gulp-less --save-dev

2，使用

 1 var gulp=require("gulp");
 2 var less=require("gulp-less");
 3 
 4 
 5 gulp.task("less",function(){
 6 gulp.src('src/css/*.less')
 7 .pipe(less())
 8 .pipe(gulp.dest("src/css"));
 9 });
10 
11 //监视文件的变化
12 gulp.task("watch",function(){
13 gulp.watch("src/css/*.less",['less']);
14 });

具体的node.js的和更少的安装方法，下一篇会详细介绍http://www.cnblogs.com/le220/p/8146480.html