首页 > 代码库 > 简单的LESS Tutorial

简单的LESS Tutorial

2024-07-02 21:37:31   228人阅读

简单的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="http://www.mamicode.com/styles.less" />
<script  src="http://www.mamicode.com/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






























        

            
                
                  
                
                

                    联系

                    我们