LESS、Sass、Stylus の類似点と相違点の分析_html/css_WEB-ITnose

前書き: CSS 前処理言語

CSS 前処理言語は、CSS にさらにプログラミング機能を追加し、CSS をターゲットとしてファイルを生成できます。

これらの言語は、プログラミング効率を効果的に向上させ、CSS をより簡潔で、適応性があり、読みやすくし、プロジェクトの保守を容易にすることができます。

この記事では、現在主流の CSS 前処理言語である LESS、Sass、Stylus の類似点と相違点を、開発者の視点から表の水平比較を用いて客観的に分析します。

これらの言語のインストールやコンパイルなどは紹介しません。デフォルトでは、読者はすでに CSS に精通しており、上記の CSS 前処理言語の少なくとも 1 つを使用したことがある可能性があります。

Sass 言語には現在、ファイル名接尾辞として「.sass」と「.scss」を含む 2 つの文法規則セットがあるという事実を考慮して、この記事では、Scss で表される Sass3 以降のバージョンのみを紹介します。

基本的な違い

LESS Scss Stylus/sta?l?s/ サフィックス コンパイル メソッド 特別な項目

*.less	*.scss	*.styl
は、そのメソッドを介して渡すことができますそれぞれ *.css ファイルにローカルでコンパイルする方法 これらの形式のファイルを *.css ファイルにコンパイルできるサードパーティのコンパイル ツールが多数あります
以下を使用して、HTML ファイルにless.js ファイルを導入できます。 imports like * .css ファイルと同じ方法で *.less ファイルを導入し、ブラウザを通じてコン​​パイルします (パフォーマンスが少し消費される可能性があります)。	最初にRubyをインストールする必要があります

基本構文

Scss Stylus サポートされていません

/*支持不包含花括号与分号的编写风格，仅通过缩进表示嵌套*/h1  color: #000

サポートされていません

/*支持省略冒号*/h1  color #000

/*均支持CSS风格语法*/h1{ color:#000;}

変数とスコープ

LESS Scss スタイラス

/*以“@”开头*/@maxWidth:1024px;

/*以“$”开头*/$maxWidth:1024px;

/*可以以“$”开头，也可无前缀符号直接声明变量*/maxWidth=1024px;

変数を定義する場合は、コロン「:」を使用して変数名と変数値を区切りますで区切ります"= 変数名と変数値 は他の言語スコープの概念に似ており、変数を見つけるために湧き出てきます グローバル変数の概念はなく、後で定義された同じ名前の変数は変数を完全に上書きします最初に定義 LESS と同じ

Mixins

Mixins は、CSS プリプロセッサの言語で最も強力な機能です。

ミックスインは、再利用する必要があるいくつかのスタイルを抽出できます。それらは一度定義するだけでよく、多くのセレクターで再利用できます。

LESS Scss Stylus クラスまたは ID セレクター名を直接呼び出して、特別な宣言をせずにセレクター内の属性を再利用できます ミックスの定義は「@mixin」で始める必要があります。リファレンスミックスは「@include」で始まる必要がありますプレフィックスは必要ありませんパラメータを定義し、パラメータのデフォルト値を設定できます

/*声明混合*/.setColor(@mainC:#000){  color:@mainC;}/*直接以默认值调用混合*/.sBox{  .setColor();}/*调用混合且传入自定义参数值*/.bBox{  .setColor(#fff);}

/*声明混合*/@mixin setColor($mainC:#000){  color:$mainC;}/*直接以默认值调用混合*/.sBox{  @include setColor();}/*调用混合且传入自定义参数值*/.bBox{  @include setColor(#fff);}

/*声明混合*/setColor(mainC=#000){  color:mainC;}/*直接以默认值调用混合*/.sBox{  setColor();}/*调用混合且传入自定义参数值*/.bBox{  setColor(#fff);}

りー

子孫セレクターのネストされた実装

LESS Scss Stylus ネスト構文は同じで、中括弧 "{}" 間の階層関係によってネストを実現できます。 「&」記号を使用して親セレクターを参照することもできます。

/*编译成CSS后*/.sBox{  color:#000;}.box{  color:#fff;}

div{  margin:10px 5px;  a{    color:red;    &:hover{      color:blue;    }  }}

継承

SSS スタイラス を削減

明示的なプレフィックスは必要ありません	「@extend」で始まり、その後に継承されたセレクターが続きます
div{ margin:10px 5px;}div a{ color:red;}div a:hover{ color:blue;}	れー
れー	れー

条件语句

LESS Scss Stylus

使用关键字“when”实现条件语句	可以使用@if、@else、@else if语句实现判断	与其它编程语言类似，不过可以省略大括号
@type: link;.mixin(@type) when ( @type == link ){ color:blue;} .mixin(@type) when not ( @type == link ){ color:black;}	$type: link;p { @if $type == link { color: blue; } @else { color: black; }}	type: link;p{ if type==linkcolor:blue; else color:black;}
/*编译后的CSS*/p {color:blue;}

循环语句

LESS Scss Stylus

通过when模拟循环功能	使用@for关键字，配合“from”和“through”	使用for/in对表达式进行循环
.funClass (@i) when (@i>0){ .item-@{i}{ width:2em*@i;}/*递归*/.funClass(@i-1);}/*停止循环*/.funClass (0) {}/*输出*/.funClass (3);	@for &i from 1 through 3{ .item-#{$i} { width:2em*$i; }}	for i in 1 2 3 .item-{i} width 2em*i
/*编译后的CSS*/.item-1{ width:2em;}.item-2{ width:4em;}.item-3{ width:6em;}
	还支持each循环语句、while循环语句

综合对比

1. 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
2. Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；
3. Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；
4. Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；
5. Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
6. 使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。