码迷,mamicode.com
首页 > Web开发 > 详细

LESS CSS 框架简介

时间:2017-06-22 21:55:03      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:例子   程序   作用   mixin   script   函数   问题:   tin   pac   

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 文件
1
2
3
4
5
6
7
8
@color: #4D926F;
 
#header {
 color: @color;
}
h2 {
 color: @color;
}

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

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

LESS CSS 框架简介

标签:例子   程序   作用   mixin   script   函数   问题:   tin   pac   

原文地址:http://www.cnblogs.com/z1h2/p/7067210.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!