标签归档：less

Less是一个开发管理CSS的强大工具，强大在哪里呢？她给CSS增加了设置变量（variables）、引用（mixins）、嵌套（nested）、运算（operations）的功能。下面用实际代码来演示Less的作用。 首先新建一个文件：example.less，less格式文件的语法和css文件格式一样，只要你有css基础，你就能很快地掌握less。 设置变量（variables） 设置变量（variables）功能和JavaScript文件中设置变量的形式差不多，一次设置，就可以重复使用。在新建的example.less输入如下代码： @brand_color: #4D926F; #header { color: @brand_color; } h2 { color: @brand_color; } 经过编译后就能产生一个example.css文件，其内容如下： #header { color: #4D926F; } h2 { color: #4D926F; } 样式#header和h2中引用的@brand_color值已经变成了#4D926F，有点意思了吧，别急，接着往下看。 引用（mixins） 引用（mixins）功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容： .rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header … 继续阅读 →

要想安装Less，您的电脑上必须要先配置好Ruby环境，还要安装Ruby的一个组件——RubyGems。因为在中国，Windows系统的安装率是最高的，那这里就介绍下在Windows系统下Less的安装步骤，在Linux下的安装步骤也大同小异。 首先下载Ruby的安装文件，可以到这里下载，建议选择“一步安装”程序。安装过程非常简单，和普通安装程序过程无异，但可以留心下安装组件步骤： 可以把里面Scite和Enable RubyGems两个选项去掉。Scite是一个文本编辑器，我一直用这个编辑器，功能很强大（嘿嘿，忍不住又夸奖几句），但Ruby的这个版本是面向于Ruby配置的，而我有很多种文件类型要编辑，所以我选用Scite官方发布的版本。