第128天:less简单入门

  1. 云栖社区>
  2. 博客>
  3. 正文

第128天:less简单入门

半指温柔乐 2017-12-28 23:16:00 浏览723
展开阅读全文

 

一、预处理 Less

1、官网文件

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

[less手册]www.lesscss.net/

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

2、为什么要有预处理CSS

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

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

3、什么是预处理CSS

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

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

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

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

4、如何使用预处理Less

     less.js

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

   使用方式:

    less compiler

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

    使用方式:

    安装

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

  编译操作

  语法

  注释

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

  定义变量

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

二、浏览器端环境搭建

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

1、js引入

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

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

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

2、less的css样式处理

less内联样式和外联样式

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

内联样式如下:

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

外联样式引入如下:

Note:注意rel的值是stylesheet/less

三、语法

1、注释

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

2、变量

 Less中的变量有以下规则:

  1. @作为变量的起始标识,变量名由字母数字_-组成
  2. 没有先定义后使用的规定;
  3. 以最后定义的值为最终值;
  4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
  5. 定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
  6. 存在作用域,局部作用域优先级高于全局作用域

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

less源码

 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 }

四、gulp编译less

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和less的安装方法,下一篇会详细介绍http://www.cnblogs.com/le220/p/8146480.html

网友评论

登录后评论
0/500
评论
半指温柔乐
+ 关注