less基本知识总结
> 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点
> [官网](http://lesscss.org/)
> [中文网](http://lesscss.cn/)
> http://www.w3cplus.com/css/less
一.概要
(1)为什么要有预处理CSS
CSS基本上是设计师的工具,不是程序员的工具。在程序员的眼里,CSS是很头痛的事情,它并不像其它程序语言,比如说PHP、Javascript等等,有自己的变量、常量、条件语句以及一些编程语法,只是一行行单纯的属性描述,写起来相当的费事,而且代码难易组织和维护。
很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理。这样一来,就有了“CSS预处器(CSS Preprocessor)”。
(2)什么是预处理CSS
a.CSS语言的超集,比CSS更丰满
a.CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
c.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预处理器。
二. 如何使用预处理Less
1. less.js
(1)> 网页运行阶段解析LESS文件
使用方式:less compiler
1 (切换路径)>lessc main.less>main.css
(2)> 开发阶段编译LESS文件成为CSS
使用方式:
- 安装Node.js
- 安装less
+ 命令行执行:npm install -g less
三.less的 注释
// 模板注释,这里的注释转换成CSS后将会删除
/* CSS 注释语法 转换为CSS后任然保留 */
四.定义变量
> 将需要重复使用或经常修改的值定义为变量,需要使用的地方引用
1 @变量名: 变量值; 2 @bgColor: #f5f5f5; 3 4 body{ 5 width: @变量名; 6 background-color: @bgColor; 7 } 8 body{ 9 width: 变量值; 10 background-color: #f5f5f5; 11 }
五.嵌套
> 如果你在CSS中经常使用子代选择器,那LESS的嵌套语法使用起来非常Happy
1 .container { 2 width: @containerWidth; 3 > .row { 4 height: 100%; 5 a{ 6 color: #f40; 7 &:hover{ 8 color: #f50; 9 } 10 } 11 } 12 div { 13 width: 100px; 14 .hello { 15 background-color: #00f; 16 } 17 } 18 }
1 .container { 2 width: 1024px; 3 } 4 .container > .row { 5 height: 100%; 6 } 7 .container > .row a { 8 color: #f40; 9 } 10 .container > .row a:hover { 11 color: #f50; 12 } 13 .container div { 14 width: 100px; 15 } 16 .container div .hello { 17 background-color: #00f; 18 }
六.混合Mixin
1 /* 定义一个类 */ 2 .roundedCorners(@radius: 5px) { 3 -moz-border-radius: @radius; 4 -webkit-border-radius: @radius; 5 border-radius: @radius; 6 } 7 /* 定义的类应用到另个一个类中 */ 8 #header { 9 .roundedCorners; 10 } 11 #footer { 12 .roundedCorners(10px); 13 }
七. Import
> 我们可以在开发阶段将样式放到多个文件中,最后通过@import 的方式合并;注意:异步请求的时候必须在http下面使用;
1 // main.less 2 @btnColor: red; 3 @import url('_buttom.less'); 4 5 body{ 6 width: 1024px; 7 } 8 9 // _buttom.less 10 .btn{ 11 color: @btnColor; 12 } 13 .btn{ 14 color: red; 15 } 16 body{ 17 width: 1024px; 18 }
案例代码:
1 // hello less 2 // 定义一个变量 3 // @mainColor: #e92322; 4 // @width: 200px; 5 // /* 公共样式 */ 6 // body { 7 // background-color: @mainColor; 8 // } 9 // .container { 10 // width: 1000px; 11 // background-color: #ff0; 12 // .row { 13 // height: @width; 14 // div { 15 // border-left: 1px solid @mainColor; 16 // > a { 17 // color: red; 18 // &:hover {//相当于this;不加&有空格,不实现效果 19 // color: green; 20 // } 21 // } 22 // } 23 // } 24 // } 25 /* 定义一个类 */ 26 // // 定义一个代码段,()里的内容是参数,参数中:后的内容是参数的默认值(没有传参数) 27 // .roundedCorners(@radius: 5px) { 28 // -moz-border-radius: @radius; 29 // -webkit-border-radius: @radius; 30 // border-radius: @radius; 31 // } 32 // /* 定义的类应用到另个一个类中 */ 33 // #header { 34 // .roundedCorners(); 35 // } 36 // #footer { 37 // .roundedCorners(10px); 38 // } 39 // 40 // @h: 100px; 41 // @import url('_p.less'); 42 body { 43 background-color: lighten(#000, 10%); 44 color: darken(#fff, 10%); 45 }
八.函数
内置函数
1 - lighten:将一个颜色变亮 2 + lighten(#000, 10%); // #1a1a1a 3 - darken:将一个颜色变暗 4 + darken(#000, 10%); // #e6e6e6
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;