CSS 彻底改变了 Web 页面的设计,但 CSS 仍然是静态的,而且在其句法发展方面受到限制。这些限制是有目的且合乎情理的,鼓励广泛加以实现。但开发人员和设计人员常常发现 CSS 使用起来很单调乏味。许多 Web 框架包含一些工具,这些工具使得人们更容易使用更灵活的特性创作 CSS,然后将结果编译成静态 CSS,以便部署到站点。最近的一些项目更侧重于创建旨在编译到 CSS 中的语言。Alexis Sellier 的开源项目 LESS 是这类语言中最受欢迎的一种语言。

LESS 在现有 CSS 语法之上添加了一些开发人员熟悉的特性,比如变量、mixins、运算符和函数。可以使浏览器中的 JavaScript 或通过服务器端 JavaScript 工具集的预处理将 LESS 编译到 CSS 中。LESS 在其他各种工具集中也得到了广泛应用,包括 JavaScript 的流行 Bootstrap 项目。在本文中,我要介绍的是 LESS,LESS 是为现代网站编写可读性的、可维护的 CSS 的一种方式。参见 下载部分,获取本文的示例代码。

Less是一个开发管理CSS的强大工具,强大在哪里呢?她给CSS增加了设置变量(variables)、引用(mixins)、嵌套(nested)、运算(operations)的功能。下面用实际代码来演示Less的作用。首先新建一个文件:example.less,less格式文件的语法和css文件格式一样,只要你有css基础,你就能很快地掌握less。设置变量(variables)设置变量(variables)功能和JavaScript文件中设置变量的形式差不多,一次设置,就可以重复使用。在新建的example.less输入如下代码:

@brand_color: #4D926F;

#header {
color: @brand_color;
}

h2 {
color: @brand_color;
}

经过编译后就能产生一个example.css文件,其内容如下:

#header {
color: #4D926F;
}

h2 {
color: #4D926F;
}

引用(mixins)
引用(mixins)功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容:

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners;
}

经过编译后产生的css文件内容如下:

.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

嵌套(nested)

嵌套(nested)功能可以加强管理css样式的层级关系,让css样式之间的关系更加清晰明了。比如你想写一个class值为logo的元素样式,而这个元素的一个祖元素的ID值为header,你可能会这样写这个样式的名称:#header .logo。现在不必了,你可以直接把.logo样式写在#header样式里,如下:

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

经过编译后产生的css文件内容如下:

#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}

运算(operations)

运算(operations)功能可以让你对css中的长宽值、颜色值等数值进行加减乘除运算,如有下less文件内容:

@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: @base-color + #111;
}

经过编译后就能产生的css文件内容如下:

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}

#footer {
color: #222;
}

LESS用法·的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一.使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法(结合光标移动命令,一些场合会非常方便)

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  10. [转]thinkphp 模板显示display和assign的用法

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

随机推荐

  1. N 皇后问题

    #include <set> #include <iostream> #include <string> #include <vector> #incl ...

  2. Centos安装桌面环境(一个命令搞定)

    # yum groupinstall "X Window System" "GNOME Desktop Environment"

  3. 【 2013 Multi-University Training Contest 4 】

    HDU 4632 Palindrome subsequence dp[x][y]表示区间[x,y]构成回文串的方案数. 若str[x]==str[y],dp[x][y]=dp[x+1][y]+dp[x ...

  4. AAS代码运行-第4章

    [root@node1 aas]# ls ch02 ch03 spark--bin-hadoop2. spark--bin-hadoop2..tgz [root@node1 aas]# cd spar ...

  5. memcpy函数用法

    memcpy函数用法 .分类: VC++ VC++ mfc matlab 2011-12-01 19:17 14538人阅读 评论(0) 收藏 举报 null 原型:extern void *memc ...

  6. python 中的高级函数filter()

    filter()函数是 Python 内置的另一个有用的高阶函数,filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filt ...

  7. 编译内核实现iptables防火墙layer7应用层过滤 (三)

    在前面的两篇文章中我们主要讲解了Linux防火墙iptables的原理及配置规则,想博友们也都知道iptables防火墙是工作在网络层,针对TCP/IP数据包实施过滤和限制,属于典型的包过滤防火墙.以 ...

  8. css3中transition和animation的回调处理

    弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...

  9. JS 笔记(一)

    1. 页面引入 1) 标签直接引入脚本(推荐): <script type="text/javascript"> 脚本语言 </script> 2) 标签引 ...

  10. css2----兼容----ie67的3像素bug

    发生条件:当浮动元素和非浮动元素相邻 时候,ie67下,两个元素就会多出3像素的间隔,其实是浮动元素产生的margin值 解决办法:1:让没有浮动的元素也浮动: 2:让浮动元素产生margin-*:- ...