Less
是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
官网地址
less手册
bootstrap官网less介绍
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
less手册
bootstrap官网less介绍
前通过
Note:注意你的less样式文件一定要在引入less.js前先引入。
less内联样式和外联样式
基于我们现在使用的是浏览器端进行预编译,因此Less可用于内联样式和外联样式当中。
内联样式如下:
外联样式引入如下:
Note:注意rel的值是stylesheet/less
Less中的变量有以下规则:
以@
作为变量的起始标识,变量名由字母、数字、_和-组成
没有先定义后使用的规定;
以最后定义的值为最终值;
可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
存在作用域,局部作用域优先级高于全局作用域。
Note:注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。
less源码
// 1. 以@作为变量的起始标识,变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定;
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值;
最终输出:
全局安装:npm install -g less
项目内安装:npm install gulp-less --save-dev
//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});