LESS CSS フレームワークの概要_html/css_WEB-ITnose

はじめに

CSS (Cascading Style Sheets) は、HTML とともに World Wide Web で広く使用されている長い歴史を持つマークアップ言語です。 HTML は主にドキュメント構造の定義を担当し、CSS はドキュメントの表示形式やスタイルの定義を担当します。

CSS はマークアップ言語としては比較的単純な構文を持ち、ユーザーの要件も低いですが、いくつかの問題も伴います。CSS は、一見非論理的に見える大量のコードを記述する必要があり、保守や拡張が不便で、役に立ちません。再利用は、特にフロントエンド開発エンジニア以外にとっては、CSS 作成の経験が不足しているため、よく整理されて保守しやすい CSS コードを書くことが難しいことがよくあります。その主な理由は、CSS にあります。は非プログラム言語であり、変数、関数、SCOPE（スコープ）などの概念がありません。 LESS は、CSS の構文をベースに、変数、Mixin (混合)、演算、関数などの機能を導入し、CSS の記述を大幅に簡素化し、CSS のメンテナンスコストを削減します。名前が示すように、LESS を使用すると、少ないコードでより多くのことを実行できます。

LESS の原理と使用法

基本的に、LESS には一連のカスタム文法とパーサーが含まれており、これらのルールは最終的にパーサーによってコンパイルされ、生成されます。 。 LESS は CSS の元の機能を切り取ったり、CSS を置き換えたりするのではなく、既存の CSS 構文に基づいてプログラム言語機能を CSS に追加します。以下は簡単な例です:

リスト 1. LESS ファイル

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

コンパイルされた CSS ファイルは次のとおりです:

リスト 2. CSS ファイル

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

上記の例からわかるように、LESS の学習は非常に簡単です。 CSS の基本を理解していれば、簡単に始めることができます。

LESS は、クライアント側またはサーバー側で直接使用できます。実際のプロジェクト開発では、3 番目の方法である LESS ファイルを静的 CSS ファイルにコンパイルし、HTML ドキュメントに適用することをお勧めします。

クライアント

.less (LESS ソース ファイル) をクライアントで直接使用できます。 http://lesscss.org からless.js ファイルをダウンロードし、必要な HTML に次のコードを追加するだけです。 LESS ソース ファイルを導入するには、コード:

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

LESS ソース ファイルは、標準の CSS ファイルと同じ方法で導入されます:

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

.less ファイルを導入するときは、rel 属性を設定する必要があることに注意してください。 「スタイルシート/レス」にします。もう 1 つ注意すべき重要な点は、LESS ソース ファイルが正しくコンパイルおよび解析されることを保証するために、less.js を導入する前に LESS ソース ファイルをインポートする必要があることです。

サーバー側

サーバー側での LESS の使用は、主に LESS ソース ファイルをコンパイルして最終的な CSS ファイルを生成する LESS コンパイラーに依存します。現在一般的な方法は、ノード パッケージ マネージャー (npm) を使用して LESS をインストールすることです。インストールが成功すると、ノード環境で LESS ソース ファイルをコンパイルできるようになります。

プロジェクト開発の初期段階では、クライアント側を使用するかサーバー側を使用するかに関係なく、使用したい CSS または LESS ファイルを HTML ページまたはブリッジ ファイルに導入する方法を見つける必要があります。LESS は非常に便利なツールを提供します。おなじみの機能 - 入力。このキーワードを使用して、必要な .less または .css ファイルを導入できます。 例:

@import “variables.less”;

.less ファイルは、次のようにサフィックスを省略することもできます:

@import “variables”;

CSS の導入は、. css サフィックスは省略できません。

コンパイルによって生成された静的 CSS ファイルを使用します

LESS コンパイラーを使用して、LESS ファイルを CSS ファイルにコンパイルし、それを HTML 記事に導入できます。ここで強調すべきことの 1 つは、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 开发。