less简单入门(CSS 预处理语言)

less简单入门(CSS 预处理语言)

Less 是一门 css 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

官网地址

http://lesscss.org/

less手册

lesscss.net/

bootstrap官网less介绍

http://less.bootcss.com/

一、浏览器端环境搭建

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

1、js引入

搭建Less的学习环境非常简单，只需在

标签前通过引入处理器即可实现浏览器端中将less预编译为css样式。

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

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

2、less的css样式处理

less内联样式和外联样式

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

内联样式如下：

外联样式引入如下：

Note:注意rel的值是stylesheet/less

二、语法

1、注释

// 单行注释，不会作为最终输出

/*

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

*/

2、变量

Less中的变量有以下规则：

以@作为变量的起始标识，变量名由字母、数字、_和-组成

没有先定义后使用的规定；

以最后定义的值为最终值；

可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；

定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；

存在作用域，局部作用域优先级高于全局作用域。

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 ihttp://nstall 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']);

});

参考：//jb51.net/article/107875.htm

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。