Posts Tagged ‘ less

Less——强大的css开发管理利器

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;
}

样式#headerh2中引用的@brand_color值已经变成了#4D926F,有点意思了吧,别急,接着往下看。

引用(mixins)

引用(mixins)功能可以让一样式引用另一个样式中的所有css语句。下面给出less文件内容:

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

经过编译后产生的css文件内容如下:

阅读全文

Less安装步骤

要想安装Less,您的电脑上必须要先配置好Ruby环境,还要安装Ruby的一个组件——RubyGems。因为在中国,Windows系统的安装率是最高的,那这里就介绍下在Windows系统下Less的安装步骤,在Linux下的安装步骤也大同小异。

首先下载Ruby的安装文件,可以到这里下载,建议选择“一步安装”程序。安装过程非常简单,和普通安装程序过程无异,但可以留心下安装组件步骤:

Ruby 安装组件

可以把里面SciteEnable RubyGems两个选项去掉。Scite是一个文本编辑器,我一直用这个编辑器,功能很强大(嘿嘿,忍不住又夸奖几句),但Ruby的这个版本是面向于Ruby配置的,而我有很多种文件类型要编辑,所以我选用Scite官方发布的版本。
阅读全文