使用LESS简化层叠样式表(CSS)的编写

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

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

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 编译器可以完全识别。

时间: 2024-09-24 22:26:10

使用LESS简化层叠样式表(CSS)的编写的相关文章

CSS代码编写技巧

CSS代码编写的两则小技巧 在一行内声明CSS 我们来对比下面两段代码: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}h2 {font-size:18px;border:1px solid blue;color:#000;background-color:#FFF;} 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以前我也是写成类似第二种

CLI+Terraform简化资源管理的模板编写

Terraform是一个比较强大的自动化资源编排管理工具,通过模板描述资源,通过apply命令创建/更新资源.详细的使用方法及特性可以参见公众号中关于Terraform的其他文章了解.本文将主要讲解如何利用CLI+Terraform简化模板的编写. Terraform的模板由几大结构组成:资源(resource).变量(variable).输出(output),他还有一个很重量级的结构:数据源(data).数据源是用来过滤资源中parameter的可选项的,举个例子,ECS的实例类型(insta

CSS教程:编写易于管理的css

越来越多的大型网站开始关注.使用css,对于管理多个复杂css文件显然是有异议的.下面是二系列内容中的第一部分,第一部分我们关注对于管理样式的观点,并在其基础上总结出可行的方案.第二部分我们将对以上结论进行对比.强大的css技术最近几年已经被广泛推广了.感谢Wired redesign(以及后来的high profile redesigns-,更多组织)和CSS Zen Garden(禅意花园).除此之外,有越来越多的设计师加强了对于css的学习,并通过学习让工作更容易.简单,或者他们本身就是?

CSS样式编写的简明指南

  代码如下: [selector]{ [property]:[value]; [<- Declaration ->] } < p>[选择器]{   [属性]:[值]; [<- 声明 ->] } 编写 CSS 样式时,我习惯遵守这些规则: class 名称以连字符(-)连接,除了下文提到的 BEM 命名法; 缩进 4 空格; 声明拆分成多行; 声明以相关性顺序排列,而非字母顺序; 有前缀的声明适当缩进,从而对齐其值; 缩进样式集从而反映 DOM; 保留最后一条声明结尾的

更有效率的css代码编写第1/3页_经验交流

这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间.   一.排版: 1.关键词和操作符之间加适当的空格. 2.相对独立的程序块与块之间加空行 3.较长的语句.表达式等要分成多行书写. 4.划分出的新行要进行适应的缩进,使排版整齐,语句可读. 5.长表达式要在低优先级操作符处划分新行,操作符放在新行之首. 6.循环.判断等语

css选择器: 编写高效的CSS选择器

高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题.很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能.然而,我们可以不考虑当你自认为会的太少而使用了低效的CSS这种情况.这些规则只真正用在性能要求很高的网站上,这些网站对速度要求很高,任何一个页面可能含有成百上千个DOM元素.但是实践出真理,不管你是在打造下一个facebook 还是在开发一个本地的展示网页,多学点总是好的....CSS 选择器CSS

简化你的ASP编写工作 (原数据库操作类clsdbCtrl.asp)

首先,认为ASP已经过时的人,请忽略此帖,谢谢.俺这里只是提供一种思路,希望能给很多还在学习和使用ASP的朋友一种方便.尽管俺现在也很少用ASP了,但俺相信只要能满足应用,就没有什么过时不过时的,也许它的语言没那么高级,但做出来的应用不一定就低级,呵呵.     EasyASP是一个方便快速开发ASP的类,其中包含了一个数据库控制类(原clsDbCtrl.asp,对原代码作了优化和修改,包含对数据库的各类操作及存储过程的调用,全部封装在Easp.db中,使用起来会更方便,调用也更简单).而Eas

CSS代码编写的两则小技巧

在一行内声明CSS 我们来对比下面两段代码: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; } 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以前我也是写成类似第二种方式,但是逐渐发

初学:CSS代码编写的两则小技巧

css|初学|技巧 在一行内声明CSS 我们来对比下面两段代码: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; } 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以前我也是写成类似第