less

　　less是一个css预处理语言，赋予了动态语言的特性，如变量集成，运算，函数。less既可以在客户端(koala)上运行，也可以在服务端运行(借助Node.js),也可以在浏览器上运行。 　　1.使用less的基本步骤 　　1）在引入less.js之前要先把样式文件先引入 　　　　 <link rel= "stylesheet/less" type= "text/css" href= "styles.less"> 　　　 　 <script src= "less.js" type= "text/javascript"></script> 　　 less源文件一定要在less.js 引入之前引入，less源文件才可以正常的变异解析 　　2)创建一个less文件(style.less)，在style.css的中写css样式。 　　3)然后将style.less文件进行编译为style.css，然后生成到css上。 　2.变量 　　　定义变量的作用：定义变量可以单独定义一些样式，然后在我们需要的时候再去调用它。更少的更改代码。 　　　定义变量： @变量名：变量值； 比如 @color: #4D926F; 　3.混合嵌套 　　作用：可以将一个定义好的class A 引入到class B中，然后可以简单的实现B继承A的所有属性。也可以进行参数的调用，就像使用函数一样的方便

一.定义 1.浏览器只会认HTML，css，JavaScript;而完全不认识less；所以在写less后要对它进行编译，让浏览器认识他。 2.less特点：语法简单 3.使用less的三种方法： （1）在node中使用； （2）在浏览器的环境中使用less （3）可以使用客户端（koala工具） （补充：在less文件是以.less结尾的插件） 二.less的语法 1.定义变量 —— @后加变量名 ： @testwidth：100px; div{ width:@testwdith; } (变量名可以被调用)——补充：less支持双斜线注释，但是编写css的时候会自动过滤掉 2.混合（mixins） ul{ div;（ 可以直接把上面定义好的变量拿来用） } 3.带参数混合（象函数一样定义一个参数的属性集合） .border-radius（@radius） { .border-radius：@radius； } .header { .border-radius（5px）——实参转入 } 还可以给参数设置默认值 .border-radius（@radius；5px）; 4.匹配模式（它相当于但又不完全是JS中的if，只有满足条件后才能匹配） 定义一些浮动方向的样式： // 传参 r ，对应 右浮 ； .flo(r){ float: right; } // 传参 l ，对应匹配 左浮动

为什么要使用css预处理器Less Less是一门CSS预处理语言 ，对CSS语言进行了扩展，增加了变量、函数、Mixin等特性，使得CSS通过Less编写更容易维护和扩展。 通过@定义变量 css中需要统一维护，或出现次数较多的可以提取成变量的形式，便于维护。变量可以用在常规css规则中，也可以用在选择器名称、属性名称、URL和@import语句中 // 在常规css规则中使用变量 @link-color: #f00; // 定义变量 a, link { color: @link-color; } // 编译为 a, link{ color: #f00; } // 使用@{}插值的方式使用变量，作为class名 @cusMenu: menu; .@{cusMenu} { line-height: 40px; } // 编译为 .menu{ line-height: 40px; } // URL中使用 @images: "../img"; body{ background: url("@{images}/logo.png"); } // 在@import语句中使用 @themes: "../css/themes"; @import "@{themes}/pc.less"; // 作为属性使用 @property: color; .widget { @{property}: #eee

一、介绍 Less （Leaner Style Sheets 简洁的样式表） 是一门向后兼容的 CSS 预处理语言 ，它扩展了CSS 语言。 less is more. 好处： 1、具有部分编程语言的功能，提高编码效率 2、提供模块化 3、结构清晰、易于拓展 4、完全兼容 css 缺点： 1、学习成本提高了些 2、让调试变的复杂起来（但其实有办法解决，不赘述了） 几种 css 预处理语言的诞生先后顺序： Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。 Less 诞生于 2009 年， 受 Sass 的影响 创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。 二、安装 & 使用 less 即可在客户端运行，也可在服务器端运行。 1、在 Node.js 环境 ： npm install -g less > lessc styles.less styles.css 2、在浏览器环境 ： <link rel="stylesheet