ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSプリプロセッサとは

CSSプリプロセッサとは

青灯夜游オリジナル: 2021-04-13 11:47:326617ブラウズ

CSS プリプロセッサは、CSS にいくつかのプログラミング機能を追加するために使用される特殊なプログラミング言語です (CSS 自体はプログラミング言語ではありません)。 CSS プリプロセッサは最終的に標準の CSS スタイルをコンパイルして出力するため、ブラウザーの互換性の問題を考慮する必要はありません。変数、単純な論理判断、CSS プリプロセッサの関数などの基本的なプログラミングスキルを使用できます。

CSSプリプロセッサとは

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

CSS(Cascading Style Sheet)とは、カスケードスタイルシートと訳されます。フロントエンド実務者にとっては馴染みのない専門用語です。業界では通常「スタイルスタイルシート」と呼ばれています。シート)"、主にWebページのスタイルデザインに使用されます。スタイルシートを設定することで、HTML（XHTML）内の各タグの表示属性を統一的に制御できます。これにより、Web ページ (または Web アプリケーション) の外観をより効果的に制御できるようになり、Web 要素の位置と外観、および特殊効果を作成する機能を正確に指定できます。 CSS は、Web ページのオブジェクトとモデルのスタイルを編集する機能があり、事前のインタラクティブなデザインを行うことができ、現在、テキスト表示に基づいた最高のパフォーマンスのデザイン言語です。 CSS は、さまざまなユーザーの理解力に応じて記述方法を簡素化または最適化することができるため、あらゆるタイプの人にとって読みやすいものになります。

CSS 自体に関する限り、ほとんどの Web フロントエンド実務者にとっては問題ありません。 CSS を勉強したことがある人なら誰でも、CSS がプログラミング言語ではないことを知っています。これを使用して Web ページのスタイルを開発することはできますが、プログラミングには使用できません。言い換えれば、CSS は基本的にデザイナーのツールであり、プログラマーのツールではありません。プログラマにとって、CSS は頭の痛い問題です。PHP、JavaScript などの他のプログラミング言語とは異なり、CSS には独自の変数、定数、条件文、および一部のプログラミング構文があります。単なる属性の行にすぎません。作成には非常に時間がかかり、コードを整理して保守するのは困難です。

当然のことながら、他のプログラミング言語と同様に、CSS にプログラミング要素を追加して、CSS が他のプログラミング言語と同様に所定の処理を実行できるようにできないかと考える人もいます。このように「CSSプリプロセッサ」というのがあります。

1. CSS プリプロセッサとは

CSS プリプロセッサは新しい言語を定義します。その基本的な考え方は、特殊なプログラミング言語を使用し、CSS にいくつかのプログラミング機能を追加し、ファイルを生成するターゲットとして CSS を使用すると、開発者はコーディング作業にこの言語を使用するだけで済みます。平たく言えば、CSS プリプロセッサは、特殊なプログラミング言語を使用して Web ページスタイルをデザインし、プロジェクトで使用するために通常の CSS ファイルにコンパイルします。 CSS プリプロセッサは、ブラウザの互換性の問題を考慮することなく、CSS にいくつかのプログラミング機能を追加します。たとえば、変数、単純なロジックプログラム、関数などを CSS で使用できます。プログラミング言語のいくつかの基本機能により、CSS の詳細を実現できます。簡潔、適応性が高く、読みやすく、保守が容易であるなど、多くの利点があります。

CSS プリプロセッサテクノロジーは非常に成熟しており、Sass (SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS など、さまざまな CSS プリプロセッサ言語が登場しています。 CSS プリプロセッサは非常にたくさんあるため、「どの CSS プリプロセッサを選択すべきか?」という問題が最近インターネット上で話題になっており、Linkedin、Twitter、CSS-Trick、Zhihu および主要な技術フォーラムで多くの人がこれについて議論しています。これは、CSS プリプロセッサを使用すべきかどうかという以前のテーマから大きく前進しました。

これまでのところ、多くの優れた CSS プリプロセッサ言語の中で、Sass、LESS、Stylus が最も優れており、多くの議論と比較が行われています。この記事では、これら 3 つの CSS プリプロセッサ言語について、背景、インストール、使用構文、違い、その他の比較から紹介します。フロントエンド開発エンジニアは自分で選択すると思いますが、どの CSS プリプロセッサを選択すればよいでしょうか?

(学習ビデオ共有: css ビデオチュートリアル)

2. Sass、LESS、Stylus の背景紹介

これら 3 つをより深く理解するためにこれは人気のある CSS プリプロセッサです。その背景から始めて、それぞれの背景情報を簡単に理解しましょう。

1. Sass の背景の紹介

Sass は、CSS (Cascading Style Sheets) の構文を拡張したもので、2007 年に誕生し、最も古く、最も成熟したものです。 one. 変数、定数、ネスト、ミックスイン、関数、その他の関数を使用して CSS をより効率的かつ柔軟に作成できる CSS プリプロセッサ言語。 Sass は最終的にブラウザが使用できるように合法的な CSS をコンパイルします。つまり、Sass 自体の構文は標準の CSS 形式ではなく、構文内で動的変数を使用できるため、ブラウザが認識するのは容易ではありません。非常に単純な動的言語のようなものです。

実際、Sass には現在 2 つの文法規則があり、1 つは依然としてコードブロックを区別するための区切り文字としてインデントを使用しており、もう 1 つの規則セットは CSS. シンボルのような区切り文字として波括弧 ({}) を使用しています。後者の文法規則は SCSS とも呼ばれ、Sass3 以降のバージョンでサポートされています。

注: Sass 公式 Web サイトのアドレス: http://sass-lang.com

2. LESS の背景紹介

2009 年のオープンソースプロジェクトは、Sass の影響を大きく受けていますが、CSS 構文を使用しているため、ほとんどの開発者やデザイナーが簡単に始めることができます。。 LESS は、書かれたコードを標準 CSS コードにスムーズに変換するためのさまざまな方法を提供します。LESS は、多くの人気のあるフレームワークやツールでよく見られます (たとえば、Twitter の Bootstrap フレームワークは LESS を使用します)。

Wikipedia の紹介によると、LESS は実際には Sass の影響下で Alexis Sellier によって作成されたオープンソースプロジェクトです。当時、SASS はコードブロックを区別するための区切り文字として、CSS で広く使用されている中括弧 ({}) の代わりにインデントを使用していました。 CSS の既存ユーザーにとってより便利にするために、Alexis は LESS を開発し、CSS のような記述機能を提供しました。

注: LESS の公式 Web サイト: http://lesscss.org

3. スタイラスの背景の紹介

2010 年に作成されたスタイラス、 Node.js コミュニティは主に Node プロジェクトの CSS 前処理サポートを提供するために使用され、このコミュニティ内に一定の支持者がいますが、広い意味での人気は Sass や LESS ほどではありません。

Stylus は、ブラウザで使用する CSS を生成する効率的、動的、表現力豊かな方法を提供する革新的な新しい言語として宣伝されています。 Stylus は、インデントと CSS の通常のスタイルの記述ルールの両方をサポートします。

注: Stylus 公式 Web サイト: http://learnboost.github.com/stylus

3. Sass、LESS、Stylus の文法

どの言語にも独自の文法規則があり、CSS プリプロセッサ言語も例外ではありませんが、実際に CSS プリプロセッサ言語を使用する前に、文法の理解という不可欠な知識があります。幸いなことに、これら 3 つの CSS プリプロセッサ言語の構文と CSS 構文は似ています。

1.Sass 構文

Sass3.0 バージョンでは、SCSS と同じと言える標準の CSS 構文が使用され始めます。これにより、Sass コードを CSS コードに変換しやすくなります。デフォルトでは、Sass は「.scss」拡張子を使用します。 Sass 構文ルールは CSS のように記述できます。

/*style.sass新版语法规则*/
h1{
  color:#936;
  background-color:#333;
}

ご覧のとおり、Sass スタイルでは、このようなコードはこれ以上に単純ではありません。

重要な点は、Sass は古い構文もサポートしているということです。古い構文は通常の CSS 構文とは少し異なります。厳密な構文が必要です。インデントや文字エラーがあると、スタイルがコンパイルされる原因になります。間違いです。 Sass はコードの厳密なインデントと書式設定に完全に依存して中括弧 ({}) とセミコロン (;) を省略でき、ファイルには ".sass" 拡張子が使用されます。その構文は次のようになります:

/*style.sass*/
h1
  color:#936
  background-color: #333

2.LESS 構文

LESS は CSS の拡張形式であり、CSS の機能を骨抜きにするのではなく、既存の CSS 構文に多くの機能を追加します。構文規則に関しては、LESS は Sass と同様に CSS の標準構文を使用しますが、LESS のソースファイルの拡張子が「.less」である点が異なり、その基本構文は次のようになります。 ##3 .Stylus syntax

Stylus にはさらに構文トリックがあります。そのファイル拡張子は「.styl」です。Stylus は標準の CSS 構文も受け入れますが、Sass の古い構文ルールのような略語も使用します。同時に、Stylus は、以下に示すように、中括弧 ({}) とセミコロンのない構文も受け入れます。

/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}

Stylus スタイルでは、同じスタイルファイルルールで異なる構文を使用することもできます。次の記述方法は使用できません。エラーを報告:

/*style.styl*/
/*类似于CSS标准语法*/
h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
  color:#963
  background-color:#333

4. Sass、LESS、Stylus の機能

これら 3 つの CSS プリプロセッサ言語には、いくつかの共通の機能があります。ネスト、関数など。このセクションでは、これら 3 つの CSS プリプロセッサ言語のさまざまな機能の類似点と相違点、およびそれらの使用方法を比較します。

1. 変数

開発者にとって、変数は親友の 1 つであるはずです。 CSS プリプロセッサ言語では、変数を宣言してスタイルシート全体で使用することもできます。 CSS プリプロセッサ言語は、あらゆる変数 (色、数値、テキストなど) をサポートします。そうすれば、どこでも変数を参照できるようになります。

a) Sass 変数

Sass 変数は「$」で始まり、その後に変数名と変数値が続く必要があります。また、変数名と変数値には次の値を使用する必要があります。コロン (:) で区切られます。 CSS プロパティ設定と同様:

/*style.styl*/
h1 {
  color  #963
}
h2 
  font-size:1.2em

b) LESS 変数

LESS スタイルでの変数の宣言と変数の呼び出しは Sass と同じですが、唯一の違いは、変数名「@」文字が使用されます:

/*声明变量*/
 
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
 
/*调用变量*/                              |  /*转译出来的CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;
  max-width: $siteWidth;                  |    max-width: 1024px;
}                                         |  }	                                       |  }

c) スタイラス変数

スタイラススタイルでの変数の宣言には制限はありません。「$」記号。末尾のセミコロン (;) はオプションですが、変数名と変数値の間の等号 (=) は必須です。注意すべき点の 1 つは、「@」記号を使用して (0.22.4) 変数を宣言すると、Stylus はコンパイルしますが、対応する値が変数に割り当てられないことです。つまり、Stylus では先頭に「@」記号を付けて変数を宣言しないでください。 Stylusでの変数の呼び出し方法はLESSやSassと全く同じです。

/*声明变量*/

@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;

/*调用变量*/                            |  /*转译出来的CSS*/
----------------------------------------+-------------------------------
body {                                  |  body {
  color: @mainColor;                    |    color:#963;
  border:1px @borderStyle @mainColor;   |    border:1px dotted #963;
  max-width: @siteWidth;                |    max-width:1024px;
}                                       |  }

Stylus には、変数に値を割り当てずに参照プロパティを定義できる独自の機能もあります:

/*水平垂直居中*/                    |  /*转译出来的CSS*/
------------------------------------+------------------------------------
#logo                               |   #logo {
  position  absolute                |     position:absolute;
  top  50%                          |     top:50%;
  left  50%                         |     left:50%;
  width  w = 150px                  |     width:150px;
  height  h = 80px                  |     height:80px;
  margin-left  -(w / 2)             |     margin-left:-75px;
margin-top  -(h / 2)                |     margin-top:-40px;
                                    |   }

从上面的代码中我们可以看出，CSS预处理器语言中的变量是值级别的重复使用，可以将相同的值定义成变量统一管理起来。

CSS预处理器语言中变量的特性适用于定义主题（也就是我们常说的换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。

2.作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款CSS预处理器的作用域使用。

a)Sass的作用域

Sass中作用域在这三款预处理器是最差的，可以说在Sass中是不存在什么全局变量。具体来看下面的代码：

/*Sass样式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

先看转译出来的CSS样式：

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
}

示例明显的告诉我们，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

b)LESS的作用域

LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在LESS下所起的变化。

/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}

转译出来的CSS样式：

.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
}

c)Stylus的作用域

Stylus虽然起步比较晚，但其作用域的特性和LESS一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。

3.混合(Mixins)

Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

a)Sass的混合

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。

在选择器调用定义好的Mixins需要使用“@include”，然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法，就是使用加号“+”调用Mixins，在“+”后紧跟Mixins名。

一起来看个简单的例子，比如说在你的Sass样式中定义了一个名叫“error”的Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

b)LESS的混合

在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

不过LESS样式中声明Mixins和Sass声明方法不一样，他更像CSS定义样式，在LESS可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。

正如Sass混合是的示例，同样在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}

c)Stylus的混合

Stylus中的混合和前两款CSS预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号（=）来连接。

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}

三个示例都将会转译成相同的CSS代码：

.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

4.嵌套（Nesting）

CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。

section {
  margin:10px;
}
section nav {
  height:25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的，非常的方便吧！

5.继承（Inheritance）

对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：

p,ul,ol{/*样式写在这里*/}

这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。

a)Sass和Stylus的继承

Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

上面的代码转译成CSS：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

b)LESS的继承

LESS支持的继承和Sass与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

转译出来的CSS代码：

.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}

正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。

6.运算符（Operations）

CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了，例如：

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

上面代码是LESS的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：

border: (@width / 2) solid #000;

Sass在数字运算上要比LESS更专业，他可以直接换算单位了。Sass可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。

7.颜色函数

颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。

a)Sass颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

这只是Sass中颜色函数的一个简单列表，更多详细的介绍可以阅读Sass文档。

颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/
}

b)LESS颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

LESS的完整颜色函数功能，请阅读LESS文档。

下面是LESS中如何使用一个颜色函数的简单例子：

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

c)Stylus的颜色函数

lighten(color, 10%); /* 返回的颜色在&#39;color&#39;基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在&#39;color&#39;基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在&#39;color&#39;基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在&#39;color&#39;基础上饱和度降低10% */

有关于Stylus的颜色函数介绍，请阅读Stylus文档。

下面是Stylus颜色函数的一个简单实例：

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)

从上面展示的部分颜色函数可以告诉我们，Sass、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。

8.导入（Import）

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

Sass、LESS和Stylus三款CSS预处理器语言，导入样式的方法都是一样：

被导入文件的样式：

/* file.{type} */
body {
  background: #EEE;
}

需要导入样式的文件：

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}

转译出来的CSS代码：

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

9.注释（Comment）

CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。

a)Sass、LESS和Stylus的多行注释

多行注释和CSS的标准注释，他们可以输出到CSS样式中，但在Stylus转译时，只有在“compress”选项未启用的时候才会被输出来。

/*
 *我是注释
*/
body
  padding 5px

b)Sass、LESS和Stylus的单行注释

单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。

//我是注释
@mainColor：#369;//定义主体颜色

在Stylus中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。

/*!
*给定数值合体
*/
add(a, b)
  a + b

上面从九个常用的特性对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款CSS预处理器语言有所方向和帮助。

更多编程相关知识，请访问：编程视频！！

以上がCSSプリプロセッサとはの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSイタリック体の書き方次の記事：CSSイタリック体の書き方

続きを見る