【转】 LESS CSS 框架简介

时间 2019-11-30

标签 css 框架简介栏目 CSS 繁體版

原文原文链接

简介

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被普遍应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。css

做为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 须要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤为对于非前端开发工程师来说，每每会由于缺乏 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，形成这些困难的很大缘由源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（做用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，而且下降了 CSS 的维护成本，就像它的名称所说的那样，LESS 可让咱们用更少的代码作更多的事情。前端

LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义本身的样式规则，这些规则最终会经过解析器，编译生成对应的 CSS 文件。LESS 并无裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：java

清单 1. LESS 文件

 @color: #4D926F; 

 #header { 
  color: @color; 
 } 
 h2 { 
  color: @color; 
 }

通过编译生成的 CSS 文件以下：node

清单 2. CSS 文件

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

从上面的例子能够看出，学习 LESS 很是容易，只要你了解 CSS 基础就能够很容易上手。git

LESS 能够直接在客户端使用，也能够在服务器端使用。在实际项目开发中，咱们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。程序员

客户端

咱们能够直接在客户端使用 .less（LESS 源文件），只须要从 http://lesscss.org下载 less.js 文件，而后在咱们须要引入 LESS 源文件的 HTML 中加入以下代码：github

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

LESS 源文件的引入方式与标准 CSS 文件引入方式同样：web

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

须要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点须要注意的是：LESS 源文件必定要在 less.js 引入以前引入，这样才能保证 LESS 源文件正确编译解析。npm

服务器端

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前经常使用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就能够在 node 环境中对 LESS 源文件进行编译。编程

在项目开发初期，咱们不管采用客户端仍是服务器端的用法，咱们都须要想办法将咱们要用到的 CSS 或 LESS 文件引入到咱们的 HTML 页面或是桥接文件中，LESS 提供了一个咱们很熟悉的功能— Importing。咱们能够经过这个关键字引入咱们须要的 .less 或 .css 文件。如：

@import “variables.less”;

.less 文件也能够省略后缀名，像这样：

@import “variables”;

引入 CSS 同 LESS 文件同样，只是 .css 后缀名不能省略。

使用编译生成的静态 CSS 文件

咱们能够经过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是彻底兼容 CSS 语法的，也就是说，咱们能够将标准的 CSS 文件直接改为 .less 格式，LESS 编译器能够彻底识别。

语法

变量

LESS 容许开发者自定义变量，变量能够在全局样式中使用，变量使得样式修改起来更加简单。

咱们能够从下面的代码了解变量的使用及做用：

清单 3 LESS 文件

 @border-color : #b5bcc7; 

 .mythemes tableBorder{ 
   border : 1px solid @border-color; 
 }

通过编译生成的 CSS 文件以下：

清单 4. CSS 文件

 .mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
 }

从上面的代码中咱们能够看出，变量是 VALUE（值）级别的复用，能够将相同的值定义成变量统一管理起来。

该特性适用于定义主题，咱们能够将背景颜色、字体颜色、边框属性等常规样式进行统必定义，这样不一样的主题只须要定义不一样的变量文件就能够了。固然该特性也一样适用于 CSS RESET（重置样式表），在 Web 开发中，咱们每每须要屏蔽浏览器默认的样式行为而须要从新定义样式表来覆盖浏览器的默认行为，这里可使用 LESS 的变量特性，这样就能够在不一样的项目间重用样式表，咱们仅须要在不一样的项目样式表中，根据需求从新给变量赋值便可。

LESS 中的变量和其余编程语言同样，能够实现值的复用，一样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为做用域），简单的讲就是局部变量仍是全局变量的概念，查找变量的顺序是先在局部定义中找，若是找不到，则查找上级定义，直至全局。下面咱们经过一个简单的例子来解释 Scope。

清单 5. LESS 文件

 @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

 }

通过编译生成的 CSS 文件以下：

清单 6. CSS 文件

 #homeDiv #centerDiv { 
  width: 30px; 
 } 
 #leftDiv { 
  width: 20px; 
 }

Mixins（混入）

Mixins（混入）功能对用开发者来讲并不陌生，不少动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另一个已经定义的 CLASS，就像在当前 CLASS 中增长一个属性同样。

咱们先简单看一下 Mixins 在 LESS 中的使用：

清单 7. LESS 文件

// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }

通过编译生成的 CSS 文件以下：

清单 8. CSS 文件

 #header { 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 } 
 #footer { 
 -moz-border-radius:10px; 
 -webkit-border-radius:10px; 
 border-radius:10px; 
 }

从上面的代码咱们能够看出：Mixins 实际上是一种嵌套，它容许将一个类嵌入到另一个类中使用，被嵌入的类也能够称做变量，简单的讲，Mixins 实际上是规则级别的复用。

Mixins 还有一种形式叫作 Parametric Mixins（混入参数），LESS 也支持这一特性：

清单 9. LESS 文件

// 定义一个样式选择器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定义的样式选择器
 #header { 
 .borderRadius(10px); // 把 10px 做为参数传递给样式选择器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 做为参数传递给样式选择器

 }

通过编译生成的 CSS 文件以下：

清单 10. CSS 文件

 #header { 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
 .btn { 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 }

咱们还能够给 Mixins 的参数定义一人默认值，如

清单 11. LESS 文件

.borderRadius(@radius:5px){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 .btn { 
 .borderRadius; 
 }

通过编译生成的 CSS 文件以下：

清单 12. CSS 文件

 .btn { 
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px; 
 border-radius: 5px; 
 }

像 JavaScript 中 arguments同样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示全部的变量，不少状况下，这个参数能够省去你不少代码。

清单 13. LESS 文件

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }

通过编译生成的 CSS 文件以下：

清单 14. CSS 文件

 #header { 
 -moz-box-shadow: 2px 2px 3px #FF36; 
 -webkit-box-shadow: 2px 2px 3px #FF36; 
 box-shadow: 2px 2px 3px #FF36; 
 }

Mixins 是 LESS 中很重要的特性之一，咱们这里也写了不少例子，看到这些例子你是否会有这样的疑问：当咱们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？若是你是 java 程序员或 C++ 程序员，我猜你确定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，因而乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：

清单 15. LESS 文件

 #mynamespace { 
 .home {...} 
 .user {...} 
 }

这样咱们就定义了一个名为 mynamespace 的命名空间，若是咱们要复用 user 这个选择器的时候，咱们只须要在须要混入这个选择器的地方这样使用就能够了。#mynamespace > .user。

嵌套的规则

在咱们书写标准 CSS 的时候，遇到多层的元素嵌套这种状况时，咱们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中咱们能够这样写：

清单 16. HTML 片断

 <div id="home"> 
 <div id="top">top</div> 
 <div id="center"> 
 <div id="left">left</div> 
 <div id="right">right</div> 
 </div> 
 </div>

清单 17. LESS 文件

 #home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
    } 
 }

通过编译生成的 CSS 文件以下：

清单 18. CSS 文件

 #home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
  width: 90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
 }

从上面的代码中咱们能够看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使咱们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操做更为方便。

清单 19. LESS 文件

a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

通过编译生成的 CSS 文件以下：

清单 20. CSS 文件

 a { 
 color: red; 
 text-decoration: none; 
 } 
 a:hover { 
 color: black; 
 text-decoration: underline; 
 }

运算及函数

在咱们的 CSS 中充斥着大量的数值型的 value，好比 color、padding、margin 等，这些数值之间在某些状况下是有着必定关系的，那么咱们怎样利用 LESS 来组织咱们这些数值之间的关系呢？咱们来看这段代码：

清单 21 . LESS 文件

 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
 color: @transition; 
 }

通过编译生成的 CSS 文件以下：

清单 22. CSS 文件

 .switchColor { 
  color: #222222; 
 }

上面的例子中使用 LESS 的 operation 是特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操做提供一组函数。下面是 LESS 提供的针对颜色操做的函数列表：

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: 上述代码引自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions

使用这些函数和 JavaScript 中使用函数同样。

清单 23 LESS 文件

init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

通过编译生成的 CSS 文件以下：

清单 24. CSS 文件

 #body { 
  background-color: #f04615; 
 }

从上面的例子咱们能够发现，这组函数像极了 JavaScript 中的函数，它能够被调用和传递参数。这些函数的主要做用是提供颜色变换的功能，先把颜色转换成 HSL 色，而后在此基础上进行操做，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性，好比组件切换时的渐入渐出。

Comments（注释）

适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法同样，咱们这里不作详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，因此若是你的注释是针对样式说明的请使用多行注释。

LESS VS SASS

同类框架还有 SASS : http://sass-lang.com/, 与 LESS 相比，二者都属于 CSS 预处理器，功能上大同小异，都是使用相似程序式语言的方式书写 CSS, 都具备变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法，更多二者之间的比较，请参考这篇帖子：https://gist.github.com/674726。

结束语

本文提到的只是 LESS 的基本功能，更高级的功能如：字符串插值，服务器端使用配置，JavaScript 表达式，避免编译等能够参看 LESS 的官方网站。

LESS 以 CSS 语法为基础，又借用了不少咱们熟知编程式语言的特性，这对于咱们开发人员来说学习成本几乎能够忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为咱们提供了一种新的编写样式表的方法，咱们能够根据咱们的项目特性选择使用 LESS 的部分特性，咱们只需用不多的成本就能够换了很大的回报，一句话，Less is more，借助 LESS 能够更便捷的进行 Web 开发。

1. LESS CSS 框架简介
2. LESS CSS 框架简介使用 LESS 简化层叠样式表（CSS）的编写
3. Less 简介
4. less框架
5. Spring框架简介（转）
6. H2O框架简介(转载)
7. CSS“反转”为LESS
8. CSS预处理框架：less，scss
9. 1wifi 简介（框架）
10. Less与Sass框架
更多相关文章...
• Thymeleaf简介 - Thymeleaf 教程
• jQuery Mobile 简介 - jQuery Mobile 教程
• Github 简明教程
• Java Agent入门实战（一）-Instrumentation介绍与使用