less简单入门

官网地址

http://lesscss.org/

less手册

www.lesscss.net/

bootstrap官网less介绍 

http://www.bootcss.com/p/lesscss/

一、浏览器端环境搭建

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>

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

2、less的css样式处理

less内联样式和外联样式

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

内联样式如下：

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

外联样式引入如下：

Note:注意rel的值是stylesheet/less

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

二、语法

1、注释

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

2、变量

 Less中的变量有以下规则：

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

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

less源码

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

最终输出：

.dialog {
  background-color: #888;
  color: blue;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: ': hello there!';
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}

 

三、gulp编译less

1、安装

全局安装：npm install -g less

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

2、使用

var gulp=require("gulp");
var less=require("gulp-less");


gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});

 

参考：

http://www.cnblogs.com/fsjohnhuang/p/4187675.html

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5226739.html有问题欢迎与我讨论，共同进步。