CSS可编程化-LESS

CSS(层叠样式表)是一门历史悠久的标记性语言,是页面布局和样式展现的核心,到了css3功能已经很强大了,纯css结合html5就算不依靠javascript已经能做出比较酷炫的效果了,但是css一直有一个诟病,那就是一门非程序式语言,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,说白了就是纯堆一些无脑的样式代码。这个时候less应运而生。LESS 原理及使用方式本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性.快速入门:LESS 文件


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

经过编译生成的 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 源文件正确编译解析。服务端使用方法 :

服务器端主要就是通过npm(node包管理器)来安装less,然后通过less将less文件编译成css文件安装命令:$ npm install -g less编译命令:$ lessc xx.less > xx.css(需要cd到指定less目录再打这个命令)常用例子:

变量 :LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。我们可以从下面的代码了解变量的使用及作用:


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

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


.mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。混入:我们先简单看一下 Mixins 在 LESS 中的使用:LESS 文件

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

经过编译生成的 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 其实是规则级别的复用。嵌套规则:在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:HTML 片段


&lt;div id="home"&gt; 
&lt;div id="top"&gt;top&lt;/div&gt;
&lt;div id="center"&gt; 
&lt;div id="left"&gt;left&lt;/div&gt; 
&lt;div id="right"&gt;right&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt;

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 文件如下: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 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。运算及函数:在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码: LESS 文件


@init: #111111; 
@transition: @init*2; 
.switchColor { color: @transition; }

经过编译生成的 CSS 文件如下: 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

总结:LESS 以 CSS 语法为基础,又借用了很多我们熟知编程式语言的特性,这对于我们开发人员来讲学习成本几乎可以忽略,它在保留 CSS 语法的基础上扩展了更多实用的功能,LESS 为我们提供了一种新的编写样式表的方法,我们可以根据我们的项目特性选择使用 LESS 的部分特性,我们只需用很少的成本就可以换了很大的回报,一句话,Less is more,借助 LESS 可以更便捷的进行 Web 开发。更多less语言特性和内置函数请猛击下面两个链接:http://lesscss.org/features/http://lesscss.org/functions/

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论