less简单入门(CSS 预处理语言)
2017-03-08 20:20
555 查看
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
官网地址
less手册
bootstrap官网less介绍
一、浏览器端环境搭建
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" rel="external nofollow" />
二、语法
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 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']); });
相关文章推荐
- LESS,强大的CSS预处理语言
- CSS预处理语言--Less
- CSS预处理语言Less常用语法
- CSS预处理语言 less (一) 初识less
- Sublime Text 支持 CSS预处理语言 LESS
- less(css)语言快速入门
- 一个CSS简单入门网站
- 简单易懂的程序语言入门小册子(3):基于文本替换的解释器,let表达式,布尔类型,if表达式
- less让css具有动态语言的特性
- 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
- 【HTML、JAVASCRIPT、CSS】1、HTML语言入门1
- 简单易懂的程序语言入门小册子(1):基于文本替换的解释器,lambda演算
- 简单易懂的程序语言入门小册子(2):基于文本替换的解释器,加入整数类型
- 网页设计语言 HTML,XHTML,CSS,JavaScript 入门简介
- 简单易懂的程序语言入门小册子(7):基于文本替换的解释器,加入continuation,重构解释器
- 简单易懂的程序语言入门小册子(8):基于文本替换的解释器,小结
- 简单易懂的程序语言入门小册子(4):基于文本替换的解释器,递归,如何构造递归函数,Y组合子
- 动态的样式表lesscss:简单学习lesscss语法
- 简洁 DIV+CSS布局入门之四 ( DIV+CSS常用 常用CSS DIV+CSS实例 简单DIV+CSS DIV+CSS布局分析 DIV+CSS流程)
- 汇编语言的简单入门--Loop and output,input