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 文件

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;

}

时间: 2024-10-24 11:27:47

LESS CSS 框架简介的相关文章

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

LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作 为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前

LESS CSS 框架简介(转)

简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作 为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CS

转:LESS CSS 框架简介

原文来自于:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对

OSGi原理与最佳实践:第一章 OSGi框架简介(2)

OSGi原理与最佳实践:第一章 OSGi框架简介(2) 由  ValRay 发布 已被浏览4884次 共有3条评论 已被3个人收藏 2013-08-16 21:23 顶(0) 踩(0) osgi原理与最佳实践 1.1.4 开发传统类型的应用 1.1.4.1 B/S 我们首先来看一下,如何基于 OSGi 来开发 B/S 结构的应用.B/S 结构应用程序的开发,可有两个选择:一个是在 OSGi 的框架中嵌入 Http 服务器,另外一个是在 Servlet 容器中嵌入 OSGi 框架.下面分别介绍这两

JEESZ分布式框架简介---技术介绍文档

摘要: Jeesz主要定位于互联网企业架构,已内置企业信息化系统的基础功能和高效的代码生成工具,包括:系统权限组件.数据权限组件.数据字典组件.核心工具 组件.视图操作组件.工作流组件.代码生成等.采用分层设计.双重验证.提交数据安全编码.密码加密.访问验证.数据权限验证. 介绍 1.      项目核心代码结构截图 <modules>        <!-- jeesz 工具jar -->        <module>jeesz-utils</module&g

atitit。html&#160;css框架Bootstrap&#160;&#160;Foundation的比较与不同&#160;attilax大总结

atitit.html css框架Bootstrap  Foundation的比较与不同 attilax大总结 1. Bootstrap  Foundation的比较与不同1 2. Bootstrap 教程2 2.1. Bootstrap 简介2 2.2. Bootstrap CSS2 2.3. Bootstrap 布局组件2 2.4. Bootstrap 插件3 2.5. Bootstrap 其他3 3. Bootstrap 的attilax总结3 4. 参考3 1. Bootstrap  F

常用的CSS框架

常用的CSS框架 之前在写自己的个人网站的时候,由于自己Web前端不是特别好,于是就去找相关的CSS框架来搭建页面了. 找到以下这么一篇文章(列出了很多常用的CSS框架): http://w3schools.wang/report/top-UI-open-source-framework-summary.html Bootstrap Semantic-ui Foundation Materialize Material-ui Phantomjs Pure Flat-ui Jquery-ui Re

Django框架简介与使用注意事项

一.Django框架简介 MVC框架和MTV框架 MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),具有耦合性低.重用性高.生命周期成本低等优点. Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间的耦合性. Django框架的不同之处在于它拆分的三部分为:Model(模型).Template(模板)和View(视

Vue框架简介,实例成员,事件,过滤器,文本、事件和属性指令

目录 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue 为什么要学Vue 如何使用Vue Vue实例成员 1.el: 实例 2.data: 数据 3.methods: 方法 Vue事件 面向对象js Vue过滤器 Vue指令 文本指令 事件指令 属性指令 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue vue框架:渐进式JavaScript框架 ? vue一个环境:可以只控制页面中一个标签,可以控制一组标签,可以控制整个页面,可以控制整个项目