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文件内容如下:

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

#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文件里,样式#header#footer里所引用的.rounded_corners语句会自动变成样式.rounded_corners里所有的css语句。

嵌套(nested)

嵌套(nested)功能可以加强管理css样式的层级关系,让css样式之间的关系更加清晰明了。比如你想写一个class值为logo的元素样式,而这个元素的一个祖元素的ID值为header,你可能会这样写这个样式的名称:#header .logo。现在不必了,你可以直接把.logo样式写在#header样式里,如下:

#header {
  color: black;
  .navigation {
    font-size: 12px;
    }
  .logo {
    width: 300px;
  }
}

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

#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

有没有觉得这样管理css文件更加方便清晰?

运算(operations)

运算(operations)功能可以让你对css中的长宽值、颜色值等数值进行加减乘除运算,如有下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;
}

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

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}

#footer {
  color: #222;
}

看完了这些有没有觉得Less的强大,如果你觉得她对你有用的话就好好利用吧,安装步骤可以看这里。不过Less需要有Ruby的支持,所以你想利用她必须先配置好Ruby环境,她的更多使用方法请查看Less官方网站

此条目发表在 前端 分类目录,贴了 , 标签。将固定链接加入收藏夹。