标签：less css stylesheets tutorial 前端
简单的LESS Tutorial1. 什么是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) {
.small-block-grid-@{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 css stylesheets tutorial 前端
原文地址：http://xjfengck.blog.51cto.com/8231459/1405860
