技术分享 2014-12-25:LESS CSS

一、CSS 知多少

CSS: Cascade Style Sheets

CSS 意为“级联样式表”,用于实现对 HTML 元素的表现进行定义。

先来吐槽:CSS 的短处

如果让大家先来吐槽一下,CSS 有什么不好,估计大家能够说出来一大堆。然后后面我们再来看一下 LESS,看看 LESS 能否帮我们解决这些“隐痛”。

  1. 无法嵌套,级联关系紊乱;
  2. 无法对有用的代码块实现重用;
  3. 对于一些新的效果(例如渐变)可能需要些好几个浏览器的兼容,前缀,甚至 CSS HACK
  4. 其他呢?

二、那么问题来了:LESS 又是啥

LESS: Less Css

也就是说,LESS 是用来写 CSS 代码的,目的是使用更少的代码实现同样的 CSS 效果。

难学吗

可以这么理解,LESS 的语法是 CSS 标准语法的超集。

超集是什么意思呢?就是说你没完全学会之前,只要掌握 CSS,完全可以把 LESS 当 CSS 来写。这样子的话,其实切换的成本可以说是 0。

此外,LESS CSS 最基础的一些功能,例如嵌套,会使你迅速喜欢,而且完全不费脑力理解,你会觉得,CSS 本来就应该这么写。

上面的问题能解决好吗?

当然,上面提到的三点“隐痛”,在 LESS 都可以自然而然的解决,而且,LESS 还人性化地增加了很多其他功能,尤其是关于颜色的函数,用起来特别的舒服。

三、言归正传,迅速介绍 LESS 的特性

下面按照最容易理解的顺序介绍一下 LESS 的特性:

1. 级联嵌套

先来看看 Markup:

<div id="page-index">
    <h1 class="header">Home</h1>
    <div class="content">
        ...
    </div>
</div>

<div id="footer">
    <div class="content">
    </div>
</div>

OK,我们写 CSS 的话大概会是这个样子:

#page-index {
  color: black;
}
#page-index .header {
  font-size: 24px;
}
#page-index .content {
  ...
}
#footer {
  ...
}

/* 如果一不小心像下面这样子就容易出问题了,事实上,这时有发生 */
.content {
  ...
}

看出来些什么问题吗?

很明显,如果 html markup 嵌套得比较深,前面一大串的父元素选择器串联在前面,既不好写也不好读。

例如上面的前三条 css,我们这样写的话,心里面总是隐约觉得,那几个重复的 #page-index 太啰嗦了,也许根本不应该是这个样子。

但是,不这样级联着写吧,一不小心,就让样式泄露出来影响到其他的元素了。

那么我们来看看如果用 LESS 怎么个写法:

#page-index {
  color: black;
  .header {
    font-size: 24px;
  }
  .content {
    ...
  }
}
#footer {
  ...
  .content { ... }
}

怎么样,有没有一种“秒懂”的感觉,就是这么简单,已经比 css 爽多了,你试想一下如果 markup 再嵌套得深一些?中间省略1000字。

这是最基本的级联嵌套,一学就会,完全不为过。

2. 变量定义及运算

下面再举一个例子:

先是 css:

#header {
    color: #6A7B2C;
    width: 1000px;
}
#content {
    width: 1000px;
}
#content .price {
    color: #6A7B2C;
}
#content .info {
    background: #6A7B2C;
}
#footer {
    width: 1000px;
}

上面呢,比较明显可以看到,这个 Magic Color #6A7B2C 很是讨厌,而且 1000px 这个也多次出现,这部分是冗余的代码,应该是将其抽象出来的,看看我们用 less。

// 通过这里定义一些变量以供后用
@color-main: #6A7B2C;
@body-width: 1000px;

#header {
    color: @color-main;
    width: @body-width;
}

#content {
    width: @body-width;
    .price { color: @color-main; }
    .info { background: @color-main; }
}

#footer {
    width: @body-width;
}

看出来好处了吗?这下子代码一下子就语义化了许多,而且一改全改,完全轻松应对。

也很简单吧?一说就明白,学习应用无负担!

3. Mixin 实现继承

好了,这里我们来将代码重用推进一个更高的层次:

很多时候,我们可能会这样。

<div class="primary clearfix">
    <a class="float-item">#item1</a>
    <a class="float-item">#item2</a>
    <a class="float-item">#item3</a>
</div>
<!-- 下面是另一个(可能)需要 clearfix 的块,但不确定 -->
<div class="secondary">
    ...
</div>

那么我们可能要专门为 clearfix 写一个 css 类:

.clearfix { clear: both; zoom: 1; }
.clearfix::before { content:""; display:table; }
.clearfix::after { content:""; display:table; clear:both; }

而且对于我们需不需要用 clearfix(这是一个表现的问题),我们需要去改 Markup(这是一个不好的耦合,一般认为外观表现应该完全由 css 决定,而与 HTML Markup 独立,这样才是好的习惯)。

我们来看看其实用 less 可以这样:

.clearfix {
  clear: both; zoom: 1;
  &::before { content:""; display:table; }
  &::after { content:""; display:table; clear:both; }
}

.secondary {
  .clearfix();
  ...
}

也就是说,我们可以用 .clearfix() 这样的方式来“继承”另一个 css 类!其实是把指向的 css 类(这里是 .clearfix)展开,把里面东西全部复制过去(这是一个很好的重用)。

看到没有?!这样妈妈就不用担心以后要把 clearfix 写到 Markup 里面去产生耦合了!Markup 写好就不用再怎么调整了!

细心留意下,在上面两个版本(less 和 css)的 clearfix 写法略有不同,在 less 里面我们还用了一个 & 变量,比较体会一下,这也是重用,超级方便的~

4. Mixin 实现函数功能

其实我们在定义 less 类的时候还可以带参数!下面举一个简单的例子大家就明白了!

.rounded-corners (@radius: 4px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.button { .rounded-corners(); }
.circle { .rounded-corners(100px); }

看到了吗,体会一下。

我们完全可以把所有乱七八糟的 css3 兼容写法定义成这样的函数,然后整个世界清净了!

5. less 提供的一些酷炫函数

我们可能有一个绿色的按钮,我们想 hover 的时候颜色变浅一点:

@color-button: darkgreen; // 深绿色
.button {
  color: white;
  background: @color-button;
  &:hover {
    background: lighten(@color-button, 10%);
  }
}

看看这个 Less 的内置函数 lighten,当 hover 的时候直接颜色亮度加 10%!神马色轮、取色器、计算器都可以退休了!

然后 less 的内置函数(尤其是颜色)很多,透明、色相、饱和度、亮度等等变换一应俱全,还可以直接函数生成 svg 渐变背景!用过就知道爽了。

好了,演示就到这里,下面我们来看看,怎么才能“用上” less。

四、使用 LESS

ok,既然这么好用,怎么应用到我们平时的工作中去呢?

1. Again, LESS 是什么?

如我所知,浏览器的标准是不认 LESS 的,浏览器只认 css。

所以其实 LESS 不是样式表,它只是样式的搬运工,它负责将你写下的 less 代码翻译成 css。

于是,用 LESS 有两种方法:

  1. 在 html 文档中直接引入 less 文件,然后引入 less.js,由它在网页加载之后在客户端将 less 翻译成内联的 css 样式表,这是调试模式。
  2. 另一种是通过 lessc 翻译程序生成最终的 css 文件,直接将最终的 css 放到 html 文档中,这是生产模式。

2. 调试模式

这样即可:

<script src="less.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />

注意在文档加载完的时候,样式大概还没有生成好,因此可能会看到页面中间凌乱那么一下子,另外样式比较多的时候会极大拖慢网页的加载速度。

很简单的,到官网下载 less.js 或者找 cdn 直接引用,请自行脑补。

3. 生产模式

如果是用 windows,直接下载一个 lessc.exe 就最快了,不过好像不好找,而且版本都不是最新的,可能用一些新特性的时候会有毛病。

或者用 Node 来安装,先把 Node.js 环境装上,然后用 npm 包管理器把 less 装上:

npm install less -g

然后用命令行就可以生成 css:

lessc [option option=parameter ...] <source> [destination]

至于选项参数神马的,大家来看官网吧!

至于用 Linux 或者 Apple 做开发环境的高手们,应该解决起来更容易的,我就不献丑了。

【全剧终】


【转载请附】愿以此功德,回向 >>

原文链接:https://www.huangwenchao.com.cn/2014/12/share-lesscss.html【技术分享 2014-12-25:LESS CSS】

发表评论

电子邮件地址不会被公开。 必填项已用*标注