LESS学习笔记（初学实用）

来源：互联网发布：深入浅出数据分析微盘编辑：程序博客网时间：2024/05/22 15:44

一、什么是less？

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
LESS官网（中文）：http://lesscss.cn/

二、less怎么用？

方式一：直接通过引入less.js文件，通过浏览器端来编译.less文件（类css文件），当然先要下载less.js文件放在项目文件中，目录就来个简单的。
—-less
—-images
—-js
index.html

<link rel="stylesheet/less" type="text/css" href="less/style.less">  <script src="js/less-1.3.3.min.js" type="text/javascript"></script>

.less文件是一定要在less.js文件之前引入的。我们也可以把.js文件放在</body>的前面。

方式二：通过编译工具将.less文件编译成css文件之后，在html文件中直接引用。
常用的编译工具有（新人知道这个就好了）Koala（考拉，国人自己开发）
–http://koala-app.com/index.html

三、less怎么写？

其实要写的话，你直接全部按照css去写也可以。当然，如果这样写的话就不需要less了，他主要是增加了变量、混合、函数、嵌套、命名空间、作用域等方便编码的写法。
比如：

@color:red;  #header {      color: @color;  }  h2 {      color: @color;  }

编译之后就是

@color:red;  #header {      color: red;  }  h2 {      color: red;  }

这样是不是对于好多相同的样式设置都不用写好多遍了。

1.注释（Comments）
和js一样，单行“//”和多行“/* /”。编译时会删除“//”保留“/ */”。
2.变量（Variables）

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {  color: @light-blue;}//编译输出#header {  color: #6c94be;}

3.混合（Mixins）

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  .bordered;}//编译输出#menu a {  color: #111;  border-top: dotted 1px black;  border-bottom: solid 2px black;}

4.嵌套（Nested Rules）

#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;    &:hover{        color:red;//&表示父级    }  }}//编译输出#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}#header .logo:hover {  color:red;}

5.匹配模式

.border{border: 2px solid #ccc; border-radius: 4px;}//编译会出现在css文件中，如果是.border(){}则只会引用不会编译到css文件中。  .header {.border;}  //调用时一定要传参数，没有默认参数一定要带参数  .border(@width, @color, @radius){border: @width solid @color; border-radius: @radius;}  .header{.border(2px, #ccc, 4px);}  //带默认参数，有默认参数可以带参数或者使用默认的 .border(@width:2px, @color:#ccc, @radius: 4px){  border: @width solid @color; border-radius: @radius;  }  .header {.border(4px, #f00, 2px);}  //@arguments 指所有参数  .border (@width:1px, @style:solid, @color:#ccc){border: @arguments;}

6.地址（把地址当成常量）

// Variables@images: "../img";// Usagebody {  color: #444;  background: url("@{images}/white-sand.png");}

写到这里基础写法就不介绍了，大家上官网大概看一遍API就OK了，然后在工作中慢慢写慢慢学吧。
初学的话我建议先看一遍API然后写点简单的例子，然后看看bootstrap的less源码，你就知道那些你常用到的类是怎么写的了。展示一些常用的给大家看下。

.clearfix {  *zoom: 1;  &:before,  &:after {    display: table;    content: "";    line-height: 0;  }  &:after {    clear: both;  }}.ie7-inline-block() {  *display: inline; /* IE7 inline-block hack */  *zoom: 1;}.text-overflow() {  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}// Border Radius.border-radius(@radius) {  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @radius;}// Transitions.transition(@transition) {  -webkit-transition: @transition;  -moz-transition: @transition;  -o-transition: @transition;  transition: @transition;}// Opacity.opacity(@opacity) {  opacity: @opacity / 100;  filter: ~"alpha(opacity=@{opacity})";}

以后像这种代码就不用重复写了是不是很爽。特别是那种要写内核兼容的。

开始用less写过几个页面之后就可以看看bootstrap中less和z.less是怎么写的了。然后也可以参照他们的写法调整到自己的工作用。
z.less:http://www.aibusy.com/zless/index.html

1 0