码迷,mamicode.com
首页 > 其他好文 > 详细

简单的LESS Tutorial

时间:2014-05-04 17:15:20      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:less   css   stylesheets   tutorial   前端   

简单的LESS Tutorial

1. 什么是LESS?

LESS是一种动态的CSS语言,更专业的称呼是CSS preprocessor。作为CSS的扩展语言,LESS可以让CSS文件逻辑上更清晰,从而更容易维护和更新。LESS是开源的,诞生于2009年,采用javascript开发, LESS深受另外一种动态CSS语言SASS/SCSS的影响(SCSS是SASS的升级版) 。相对于SASS/SCSS或者其他CSS preprocessor, LESS的典型特征有两个,

  • 支持实时编译,例如网页或者应用可以直接应用less文件,通过嵌入less.js,browser支持less实时编译成css文件,并完成rendering

  • 支持纯CSS

2. 如何应用LESS?

在实际的开发中,可以有两种应用LESS的方式,直接应用LESS和间接应用LESS。如果选择直接应用LESS文件,则需要在相应的页面嵌入less.js, 浏览器会实时的把LESS文件编译为CSS文件并进行渲染,即页面中需要包含下面的代码,

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script  src="less.js"  type="text/javascript"></script>

如果选择间接的方式,则需要预先把LESS编译成CSS文件。

很多编辑器都有LESS的插件提供,例如笔者最喜欢的前端开发利器brackets上有一个插件LESS Auto Compile,在保存less文件的时候,这个插件能自动编译生成对应的css文件,不过需要在less文件开始插入如下的代码,

//out:./test.css,compress:false,stricMath:true

在IDE开发工具Netbeans上也有类似的功能提供。

在Ubuntu系统上,你可以安装LESS, 安装命令如下:

sudo npm install -g less

注意:LESS是运行在node中的,因此ubuntu系统中需要预先安装node.js

Ubuntu系统中编译less文件的命令如下:

lessc styles.less > styles.css

3. LESS的四个典型应用案例

3.1 Netsting

LESS代码如下:

.small-1 {
   display: block;
   zoom: 1;
   .test {
       font-size: 0;
       height: 0;
   }
}

编译完成对应的CSS代码如下:

.small-1 {
 display: block;
 zoom: 1;
}
.small-1 .test {
 font-size: 0;
 height: 0;
}


3.2 Variable

LESS代码如下:

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

编译完成对应的CSS代码如下:

body {
 color: #444;
 background: url("../img/white-sand.png");
}

3.3 Pseudo Selector

LESS代码如下:

.small-1{
   display: block;
   zoom: 1;
   &:after,&:before {
       content: " ";
       display: block;
       font-size: 0;
   }
}

编译完成对应的CSS代码如下:

.small-1,
{
 display: block;
 zoom: 1;
}
.small-1:after,
.small-1:before,
{
 content: " ";
 display: block;
 font-size: 0;
}

注意less中的 & 指的是parent selector, 在本例中指.small-1


3.4 Dynamic CSS Selector

LESS代码如下:

.grid-gen(3);
.grid-gen(@n,@i:1) when (@i =<@n) {
   [email protected]{i} {
       width: (@i *100% /@n);

   }
   .grid-gen(@n,(@i + 1));
}

编译完成对应的CSS代码如下:

.small-block-grid-1 {
 width: 33.33333333%;
}
.small-block-grid-2 {
 width: 66.66666667%;
}
.small-block-grid-3 {
 width: 100%;
}

本文出自 “我为楚狂” 博客,请务必保留此出处http://xjfengck.blog.51cto.com/8231459/1405860

简单的LESS Tutorial,布布扣,bubuko.com

简单的LESS Tutorial

标签:less   css   stylesheets   tutorial   前端   

原文地址:http://xjfengck.blog.51cto.com/8231459/1405860

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!