CSS

table-layout: fixed

吴阳 No Comments

在固定宽度的td中,table使用了table-layout: fixed属性。表格宽度不会随内容而变化。

<html>
<head>
<style type=”text/css”>
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<table class=”one” border=”1″ width=”100%”>
<tr>
<td width=”20%”>1000000000000000000000000000</td>
<td width=”40%”>10000000</td>
<td width=”40%”>100</td>
</tr>
</table>

<br />

<table class=”two” border=”1″ width=”100%”>
<tr>
<td width=”20%”>1000000000000000000000000000</td>
<td width=”40%”>10000000</td>
<td width=”40%”>100</td>
</tr>
</table>

</body>
</html>

112

再配合使用word-wrap、word-break等方式保证文字不越界、不留白。

注意:Opera 不支持 word-break 属性。

理解伪元素 :before 和 :after–纯搬运

吴阳 No Comments

原文出处: Thoriq Firdaus   译文出处:听海阁(@听海JamiE)   欢迎分享原创到伯乐头条

理解伪元素 :before 和 :after

关于语法和浏览器支持

伪元素实际上在CSS1中就存在了,但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初,伪元素的语法是使用“:”(一个冒号),随着web的发展,在CSS3中修订后的伪元素使用“::”(两个冒号),也就是::before 和 ::after—以区分伪元素和伪类(比如:hover,:active等)

然而,无论你使用单冒号还是双冒号,浏览器都将能识别它们。由于IE8只支持单冒号的格式,安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧!

伪元素将会在内容元素的前后插入额外的元素,因此当我们添加它们时,使用以下的标记方式,他们在技术上是平等的。

必须含有content:”;属性。不然没用,内容可以为空。与真的元素无区别,只是不会出现在HTML手打结构里面。任然会在页面显示。

 

CSS Diner(测试对于CSS选择器的使用)

吴阳 No Comments

原文地址:http://www.imooc.com/article/1334 的第二个~CSS Diner
由浅入深的过程。
当然还有一些本人不知道的选择方法。比如本人做到第十二道题就已经开始学习了。呵呵。
测试方法:
1、观察上方跳动的元素,在左边输入跳动元素的标签或者class即可。
2、错误会抖动,正确会进入下一题。右边是提示。
11

记录

1、p + .intro

p + .intro will select every element with class="intro" that directly follows a <p>
div + a will select every <a> element that directly follows a <div>

2、A ~ B

A ~ B will select all B that follow a A

3、A > B

A > B will select all B that are a direct children A

4、:first-child

:first-child selects all first child elements.
p:first-child selects all first child <p>elements.
div p:first-child selects all first child <p>elements that are in a <div>.

5、:only-child

span:only-child selects the <span> elements that are the only child of some other element.
ul li:only-child selects the only <li>element that are in a <ul>.
注意:这里的":only-child",指的是该父级下唯一的子元素。比如这个“ul li:only-child”就是
<ul>
<li></li> <!-- 指的就是这个LI -->
</ul>

6、:last-child

:last-child selects all last-child elements.
span:last-child selects all last-child <span>elements.
ul li:last-child selects the last <li>elements inside of any <ul>.

7、:nth-child(A)

:nth-child(8) selects every element that is the 8th child of another element.
div p:nth-child(2) selects the second p in every div

8、:nth-last-child(A)

:nth-last-child(2) selects all second-to-last child elements.  倒数第二个元素。

9、:first-of-type

span:first-of-type selects the first <span> in any element.  页面所有span标签中的第一个<span>。

10、:nth-of-type(A)

div:nth-of-type(2)selects the second instance of a div. 第二个DIV

巧用chrome调色盘,取色器

吴阳 No Comments

QQ截图20150719173408

F12,打开CSS代码,点选颜色代码,会出现调色板。并且是rgba格式,相当好的福利,还可以调节透明度。

鼠标移除调色盘,还有取色功能,取色区域仅限html中。

真心强大的功能。

无论工作年头长短都应该必须掌握的知识点–前端开发工程师

吴阳 No Comments

原文地址:http://zhidao.baidu.com/link?url=D9MnX_71GErFXCRJ_UjVk8x87tU1UxF8tqDhmHkB1c0B9lUb-RKJXoLufUhB7KAf67ShMvzfAzrdYV1vbU6tQcVXK1cCFS8RzFUa31RjXIi

1、dom结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
document.documentElement 返回文档的根节点<html>
document.body <body>
document.activeElement 返回当前文档中被击活的标签节点(ie)
event.fromElement 返回鼠标移出的源节点(ie)
event.toElement 返回鼠标移入的源节点(ie)
event.srcElement 返回激活事件的源节点(ie)
event.target 返回激活事件的源节点(firefox)
当前对象为node
返回父节点:node.parentNode, node.parendElement,
返回所有子节点:node.childNodes(包含文本节点及标签节点),node.children
返回第一个子节点:node.firstChild
返回最后一个子节点: node.lastChild
返回同属下一个子节点:node.nextSibling
返回同属上一个子节点:node.previousSibling
parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持,所以大家只要记得有parentElement和children就行了

2、dom操作——怎样添加、移除、移动、复制、创建和查找节点。
(1)创建新节点
createDocumentFragment() //创建一个dom片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

 

3、事件——怎样使用事件以及IE和dom事件模型之间存在哪些主要差别。
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
mozilla 1.0: div -> body -> html -> document -> window
(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
(3)dom事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及dom中的所有对象,从document对象开始,也在document对象结束。
dom事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

 

4、xmlHttpRequest——这是什么、怎样完整地执行一次get请求、怎样检测错误。
xmlHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。

<script type=”text/javascript”>
varxmlhttp;
functionloadxmlDoc(url){
xmlhttp=null;
if(window.xmlHttpRequest){ //code for all new browsers
xmlhttp=newxmlHttpRequest();
}elseif(window.ActiveXObject){ //code for IE5 and IE6
xmlhttp=newActiveXObject(“Microsoft.xmlHTTP”);
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open(“get“,url,true);
xmlhttp.send(null);
}else{
alert(“Your browser does not support xmlHTTP.”);
}
}

functionstate_Change(){
if(xmlhttp.readyState==4){ //4 = “loaded”
if(xmlhttp.status==200){ //200 = OK
//…our code here…
}else{
alert(“Problem retrieving xml data”);
}
}
}
</script>

 

5、严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
在标准模式中,浏览器根据规范呈现页面;
在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。
浏览器根据doctype是否存在以及使用的哪种dtd来选择要使用的呈现方法。如果xhtml文档包含形式完整的doctype,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格dtddoctype常常导致页面以标准模式呈现。包含过渡dtduridoctype也导致页面以标准模式呈现,但是有过渡dtd而没有uri会导致页面以混杂模式呈现。doctype不存在或形式不正确会导致HTML和xhtml文档以混杂模式呈现。

 

6、盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。
一个元素盒模型的层次从内到外分别为:内边距、边框和外边距
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

 

7、块级元素与行内元素——怎么用css控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
块级元素,用css中的display:inline;属性则变为行内元素
行内元素,用css中的display:block;属性则变为块级元素
影响:周围元素显示在同一行或换行显示,根据具体情况调整样式

 

8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用css中float属性来定义元素的浮动位置,left:往左浮动,right:往右浮动
浮动元素引起的问题:
(1)父元素的高度无法被撑开,影响与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
解决方法:
使用css中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:
.clearfix:after{content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

 

9、HTML与xhtml——二者有什么区别,你觉得应该使用哪一个并说出理由。
主要区别:
xhtml 元素必须被正确地嵌套
xhtml 元素必须被关闭,空标签也必须被关闭,如 <br> 必须写成 <br />
xhtml 标签名必须用小写字母
xhtml 文档必须拥有根元素
xhtml 文档要求给所有属性赋一个值
xhtml 要求所有的属性必须用引号””括起来
xhtml 文档需要把所有 < 、>、& 等特殊符号用编码表示
xhtml 文档不要在注释内容中使“–”
xhtml 图片必须有说明文字
XHTML 文档中用id属性代替name属性

 

10、json——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
json(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
json建构于两种结构:
“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

less–搬砖

吴阳 No Comments

原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

简介

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。


本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。下面是一个简单的例子:

清单 1. LESS 文件
 @color: #4D926F; 

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

经过编译生成的 CSS 文件如下:

清单 2. CSS 文件
 #header { 
  color: #4D926F; 
 } 
 h2 { 
  color: #4D926F; 
 }

从上面的例子可以看出,学习 LESS 非常容易,只要你了解 CSS 基础就可以很容易上手。

LESS 可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。

客户端

我们可以直接在客户端使用 .less(LESS 源文件),只需要从 http://lesscss.org下载 less.js 文件,然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

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

LESS 源文件的引入方式与标准 CSS 文件引入方式一样:

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

需要注意的是:在引入 .less 文件时,rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。

服务器端

LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期,我们无论采用客户端还是服务器端的用法,我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中,LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如:

@import “variables.less”;

.less 文件也可以省略后缀名,像这样:

@import “variables”;

引入 CSS 同 LESS 文件一样,只是 .css 后缀名不能省略。

使用编译生成的静态 CSS 文件

我们可以通过 LESS 的编译器,将 LESS 文件编译成为 CSS 文件,在 HTML 文章中引入使用。这里要强调的一点,LESS 是完全兼容 CSS 语法的,也就是说,我们可以将标准的 CSS 文件直接改成 .less 格式,LESS 编译器可以完全识别。


语法

变量

LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用:

清单 3 LESS 文件
 @border-color : #b5bcc7; 

 .mythemes tableBorder{ 
   border : 1px solid @border-color; 
 }

经过编译生成的 CSS 文件如下:

清单 4. CSS 文件
 .mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
 }

从上面的代码中我们可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。

该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。

LESS 中的变量和其他编程语言一样,可以实现值的复用,同样它也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释 Scope。

清单 5. LESS 文件
 @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

 }

经过编译生成的 CSS 文件如下:

清单 6. CSS 文件
 #homeDiv #centerDiv { 
  width: 30px; 
 } 
 #leftDiv { 
  width: 20px; 
 }

Mixins(混入)

Mixins(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixins(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。

我们先简单看一下 Mixins 在 LESS 中的使用:

清单 7. LESS 文件
// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }

经过编译生成的 CSS 文件如下:

清单 8. CSS 文件
 #header { 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 } 
 #footer { 
 -moz-border-radius:10px; 
 -webkit-border-radius:10px; 
 border-radius:10px; 
 }

从上面的代码我们可以看出:Mixins 其实是一种嵌套,它允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。

Mixins 还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:

清单 9. LESS 文件
// 定义一个样式选择器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定义的样式选择器
 #header { 
 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

 }

经过编译生成的 CSS 文件如下:

清单 10. CSS 文件
 #header { 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
 .btn { 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 }

我们还可以给 Mixins 的参数定义一人默认值,如

清单 11. LESS 文件
.borderRadius(@radius:5px){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 .btn { 
 .borderRadius; 
 }

经过编译生成的 CSS 文件如下:

清单 12. CSS 文件
 .btn { 
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px; 
 }

像 JavaScript 中 arguments一样,Mixins 也有这样一个变量:@arguments。@arguments 在 Mixins 中具是一个很特别的参数,当 Mixins 引用这个参数时,该参数表示所有的变量,很多情况下,这个参数可以省去你很多代码。

清单 13. LESS 文件
 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }

经过编译生成的 CSS 文件如下:

清单 14. CSS 文件
 #header { 
 -moz-box-shadow: 2px 2px 3px #FF36; 
 -webkit-box-shadow: 2px 2px 3px #FF36; 
 box-shadow: 2px 2px 3px #FF36; 
 }

Mixins 是 LESS 中很重要的特性之一,我们这里也写了很多例子,看到这些例子你是否会有这样的疑问:当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces,LESS 也采用了命名空间的方法来避免重名问题,于是乎 LESS 在 mixins 的基础上扩展了一下,看下面这样一段代码:

清单 15. LESS 文件
 #mynamespace { 
 .home {...} 
 .user {...} 
 }

这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。

嵌套的规则

在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:

清单 16. HTML 片段
 <div id="home"> 
 <div id="top">top</div> 
 <div id="center"> 
 <div id="left">left</div> 
 <div id="right">right</div> 
 </div> 
 </div>
清单 17. LESS 文件
 #home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
    } 
 }

经过编译生成的 CSS 文件如下:

清单 18. CSS 文件
 #home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
  width: 90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
 }

从上面的代码中我们可以看出,LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。

清单 19. LESS 文件
a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

经过编译生成的 CSS 文件如下:

清单 20. CSS 文件
 a { 
 color: red; 
 text-decoration: none; 
 } 
 a:hover { 
 color: black; 
 text-decoration: underline; 
 }

运算及函数

在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:

清单 21 . LESS 文件
 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
 color: @transition; 
 }

经过编译生成的 CSS 文件如下:

清单 22. CSS 文件
 .switchColor { 
  color: #222222; 
 }

上面的例子中使用 LESS 的 operation 是 特性,其实简单的讲,就是对数值型的 value(数字、颜色、变量等)进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表:

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: 上述代码引自 LESS CSS 官方网站,详情请见 http://lesscss.org/#-color-functions

使用这些函数和 JavaScript 中使用函数一样。

清单 23 LESS 文件
init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

经过编译生成的 CSS 文件如下:

清单 24. CSS 文件
 #body { 
  background-color: #f04615; 
 }

从上面的例子我们可以发现,这组函数像极了 JavaScript 中的函数,它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能,先把颜色转换成 HSL 色,然后在此基础上进行操作,LESS 还提供了获取颜色值的方法,在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性,比如组件切换时的渐入渐出。

Comments(注释)

适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。

LESS VS SASS

同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法,更多两者之间的比较,请参考这篇帖子:https://gist.github.com/674726


结束语

本文提到的只是 LESS 的基本功能,更高级的功能如:字符串插值,服务器端使用配置,JavaScript 表达式,避免编译等可以参看 LESS 的官方网站。

LESS 以 CSS 语法为基础,又借用了很多我们熟知编程式语言的特性,这对于我们开发人员来讲学习成本几乎可以忽略,它在保留 CSS 语法的基础上扩展了更多实用的功能,LESS 为我们提供了一种新的编写样式表的方法,我们可以根据我们的项目特性选择使用 LESS 的部分特性,我们只需用很少的成本就可以换了很大的回报,一句话,Less is more,借助 LESS 可以更便捷的进行 Web 开发。

中文官网:http://www.1024i.com/demo/less/index.html 吓尿了,又是一堆堆的代码。