`
WonLen
  • 浏览: 50991 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

[Flex]用编程的方式来写CSS - LESS的应用(一)

    博客分类:
  • Flex
阅读更多

详细请看:http://s.k-zone.cn/less1

我是一个
Flex开发人员,因此就无法避免与HTMLJavascriptCSS打交道。 
如果使用HTML Javascript的话,我一般采用JQuery的方式,毕竟对于像我这样“半吊子”的Web开发者来说,JQuery是一个非常不错的选择。
但是对于
CSS来说,就不是那么方便了,只能一点一点的写CSS

无意中发现了一个比较有意思的应用:
LESS

那么什么是LESS呢?
简言之:使用编程的方法是来写CSS

举例说明:
CSS方式:
#header { color: #4D926F; } 
h2 { color: #4D926F; }

LESS方式:
@brand_color: #4D926F;
#header { color: @brand_color; } 
h2 { color: @brand_color; }

是不是很简单?那么LESS如何使用和安装?

使用LESS需要有
ruby的环境的支持!关于如何安装ruby,就不是本篇文章的内容了,具体大家可以G一下:)
当安装完ruby后,则需要安装lessc,地址:
http://s.k-zone.cn/lessdown

编译方式: $lessc style.less style.css

LESS具有如下几种语法,我大致翻译一下,原文在:
http://s.k-zone.cn/less

变量 (variables)
对不同地方同一个值进行变量描述,然后统一定义并且在需要的地方赋值。

CSS写法:
#header { color: #4D926F; } 
h2 { color: #4D926F; }

LESS写法:

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

引用(mixins)
在一个类中可以引用另一个类的名称做为该类的属性。(在这点上与variables有些相似,只不过variables定义的变量,而mixins定义的属性集合)
 
CSS写法:
#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
LESS写法:
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
 
#header {
  .rounded_corners;
}
 
#footer {
  .rounded_corners;
}

嵌套规则(nested rules)
将相同的内容放到一起,这样避免CSS块过长,不易阅读。
 
CSS写法:
#header {
  color: red;
}
 
#header a {
  font-weight: bold;
  text-decoration: none;
}
 
LESS写法:
#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

表达式(operations)
可以通过一些简单的计算来设定属性。
 
CSS写法:
#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
 
#footer {
  color: #222;
}
 
LESS写法:
@the-border: 1px;
@base-color: #111;
 
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
 
#footer {
  color: @base-color + #111;
}
注释:其中@the-border和@base-color使用了变量 (variables)方式。

使用上述四种就可以大大简化你的CSS开发了。是不是很简单呢?
 
那么LESS并不是万能的,它也是具有一些缺点的,下一篇文章我将叙述一下LESS的缺点。

分享到:
评论
2 楼 caiceclb 2009-08-24  
其他地方看过,但没理过。因为需要ruby才能支持。。。貌似一个比较不恰当的说法:对多数人是 鸡肋。 除非css从标准上就支持这种写法
1 楼 satanest 2009-08-24  
不觉得有简化,你还要学它,
只要你熟悉了css,那些问题都不是问题。

相关推荐

    弹性布局-less--综合案例

    在本综合案例中,我们将探讨如何使用弹性布局(Flexbox)和LESS预处理器来构建响应式的现代网页。弹性布局是CSS3中的一项重要技术,它为网页元素的布局提供了强大的灵活性,尤其在处理多设备、多屏幕尺寸的场景下...

    CSS-zeal官方文档

    CSS(Cascading Style Sheets)是一种用于描述网页及应用程序用户界面呈现方式的样式表语言。Zeal是一款强大的离线文档浏览器,它为开发者提供了快速查阅各种编程语言和框架文档的便利。在这个“CSS-Zeal官方文档”...

    CSS-elementary-manual-.rar_Elementary

    - 盒模型布局(display: block/inline-block/flex/grid):更现代的布局方式,Flexbox用于一维布局,Grid则适用于二维布局。 6. **CSS响应式设计** - 媒体查询(media queries):允许内容根据设备的视口大小变化...

    css参考手册_v4.2.7_作者:飘零物语

    1. **CSS基本概念**:包括CSS的定义、作用,以及如何通过内联、内部和外部样式表来应用CSS。 2. **选择器**:如ID选择器 (#id)、类选择器 (.class)、元素选择器 (element)、属性选择器、伪类和伪元素等,它们是CSS...

    CSS 案例(CHM) 软件大小:4.77MB.rar

    《CSS案例(CHM)》是一本专注于CSS编程实践的资源集合,软件大小为4.77MB,以rar格式压缩。这个压缩包包含了数百个CSS的实例,旨在帮助Web页面设计师进行参考和学习,解决他们在实际工作中遇到的各种样式布局问题。这...

    css开发字典

    - 可以通过CSS的`display`和`flex`属性来控制布局。 **Document(文档)** - HTML和CSS共同构成的网页文件。 - 可以通过CSS来增强文档的可读性和美观性。 **Father(父元素)** - DOM树中某元素的直接上级元素。 -...

    book-CSS语法手册

    4. **选择器层次**:使用`>`、`+`、`~`等操作符来指定元素之间的关系。 **五、CSS3新特性** 1. **过渡(Transitions)**:平滑地改变一个或多个属性的值。 2. **动画(Animations)**:通过关键帧定义更复杂的动效...

    html+css+js前端知识点

    * CSS 布局是指使用 CSS 来实现网页的布局,常见的 CSS 布局方式包括: + 盒模型布局 + flex 布局 + grid 布局 + float 布局 六、CSS 定位 * CSS 定位是指使用 CSS 来实现元素的定位,常见的 CSS 定位方式包括...

    网页设计之css样式表手册

    最后,CSS预处理器如Sass和Less,可以提升编写和维护大型样式表的效率,它们允许变量、嵌套规则、混合和函数等编程概念,使得CSS代码更加模块化和可维护。 总的来说,“网页设计之css样式表手册”应该是一本全面的...

    十分漂亮的纯CSS透明展开菜单打包

    【标题】:“十分漂亮的纯CSS透明...总的来说,这个“十分漂亮的纯CSS透明展开菜单打包”是一个实用的网页设计资源,它结合了美观与功能,可以帮助开发者快速构建出吸引人的交互式菜单,而且无需复杂的JavaScript编程。

    MyHTML-CSS-项目

    8. **CSS预处理器**:如Sass或Less,它们允许更高级的组织和复用代码。 通过这个项目,你将有机会实战这些HTML和CSS知识点,并提升自己的网页设计能力。无论是创建静态网站,还是为复杂的前端框架打下基础,这个...

    CSS API。CSS 不熟么? 不用再上网查了。这里有API

    首先,我们要明白CSS API并不是一个传统的编程接口,而是指通过JavaScript对CSS进行操作的各种方法。这些方法主要来自于CSSOM(CSS Object Model),允许我们在运行时动态修改样式,实现更复杂的交互和动画效果。 1...

    css 超酷的分页效果

    此外,还可以使用CSS预处理器如Sass或Less来组织代码,提高可维护性和复用性。例如,你可以创建一个包含通用样式和特定状态样式的mixin。 总的来说,创建超酷的CSS分页效果并不复杂,关键在于理解HTML结构和CSS的...

    html-css-digitalocean

    例如,我们可以使用`color`属性设置文本颜色,`font-size`调整字体大小,`background-color`设定背景色,以及使用`display`属性来处理元素的布局模式,如`block`、`inline`或`flex`。 【响应式设计】 随着移动设备...

    css详解

    11. **CSS预处理器(Preprocessors)**:如Sass和Less,它们扩展了CSS的功能,引入变量、嵌套规则、混合(mixins)等编程特性,使CSS编写更高效且易于维护。 12. **Flexbox**:弹性盒布局模型,用于创建灵活的、...

    css 参考手册大全

    `media queries`允许根据设备特性(如屏幕尺寸、分辨率)来应用不同的CSS样式。手册会介绍如何创建自适应的布局,确保网页在不同设备上都能良好显示。 五、CSS3新特性 1. 颜色和背景:渐变(gradient)、阴影(shadow...

    CSS彻底设计研究

    此外,作者还可能深入讲解CSS预处理器(如SASS、LESS)的使用,它们可以增加CSS的可读性、可维护性以及扩展性。利用预处理器,开发者可以使用更高级的编程功能(比如变量、混合、函数等)来编写更为复杂和模块化的...

    css 教程,快速学习样式表

    Sass、Less和Stylus等CSS预处理器允许使用变量、嵌套规则、函数等编程特性,提升CSS的可维护性和复用性。 八、CSS优化与性能 优化CSS包括减少选择器复杂度、避免使用@import、合并CSS文件、使用Sprite图等,以提高...

    网页开发技术必备CSS教程

    1. Sass/LESS:CSS预处理器,引入变量、嵌套、混合等编程特性,提高代码复用性和可维护性。 2. PostCSS:CSS后处理器,通过插件扩展CSS功能,支持未来的CSS语法,转换为浏览器可识别的样式。 通过本教程的学习,你...

    我的一个CSS的html的网页

    3. **布局技术**:CSS提供了多种布局方式,如流体布局、网格布局(`display: grid`)、Flexbox(弹性盒子布局,`display: flex`)和CSS Grid。 4. **响应式设计**:利用媒体查询(`@media`规则)来根据设备的视口大小...

Global site tag (gtag.js) - Google Analytics