スタイラスと sass_html/css_WEB-ITnose の比較に関する簡単な説明

私たちが知っているのは、これら 2 つは CSS の事前コンパイル ツールですが、どちらもコンパイル ツールですが、まだ違いがあります

1 変数

Sass は変数を $xxx:10 として定義します。この形式で定義されており、スタイラスの定義は

に近いです

スタイラスの定義は JavaScript の式と同じです (js を書く人にとってはより直感的かもしれません)

p.s sass では、グローバル変数があり、ローカル変数が同じ名前である場合、ローカル変数はグローバル変数を上書きします

-------------  sass1 -----------------

$white :#fffbody{    $white : #ccc;    color : $white}.nav{    color : $white}------------ sass 1 ------------------

-------------  sass2 -----------------

$white :#fff//加上了！global 属性之后,上一行这个$white :#fff删掉也不会报错。 !global 在sass3.3及以后的版本才实现body{    $white : #ccc !global; //这样子写的话就算没有第一行的#fff 亦不会编译错误，因为!global 指定这个变量为全局变量了,    color : $white}.nav{    color : $white}------------ sass 2 ------------------

---------------- 输出 -----------------

body{ color : #ccc; } .nav{ color : #ccc; }

スタイラスでは、変数のスコープがより適切です。同じレベルの変数のスコープが良いです 1 つの変数だけが上書きされます (以下のコードなど) 異なるレベルで上書きされるリスクはありません

-------------  stylus -----------------white = #fffbody{    white = #ccc;    color : white}.nav{    color : white}---------------- 输出 -----------------body{    color : #ccc}.nav{    color : #fff}

2. 継承、継承メソッドと両方の結果は同じで、どちらも @extend .xxxx を介して次のように継承します:

生成されたコードは次のとおりです:

p.s: 上記のコンパイルされていないコードには N 行があると仮定します。 、行の 1 つが p のマージンも変更する場合、p のスタイルは p への最後の変更に基づいてコンパイルされます (これはあまり良いことではないと思います。おそらく誰かが実際に追加したものです)。その日の行では、スタイルは間違っています)、しかし、less ではこのようにはならず、生成された結果は、 p ul, ol のスタイルにこの .block のスタイルが含まれています

もう 1 つの点: Sass はサポートしていません。ネストされた継承:

------------------------------- sass ----------------------form  button    padding: 6pxa.button  @extend form button 

------------------------------- sass ----------------------

Syntax error: Can't extend form button: can't extend nested selectors // 解析错误： 无法继承自 button: 不能继承嵌套选择器 on line 6 of standard input Use --trace for backtrace.

Stylus では、セレクターが一致する限り有効になります:

------------------------------- stylus ----------------------

form input[type=text]   padding: 5px   border: 1px solid #eee   color: #dddtextarea @extends form input[type=text] padding: 10px

------------------------------- stylus ----------------------

Generate:

form input[type=text],form textarea {  padding: 5px;  border: 1px solid #eee;  color: #ddd;}textarea {  padding: 10px;}

3.

スタイラスで関数を定義するのは比較的簡単です render(args...) , render(type =padding,n = 5px) 簡単に言うと、名前を書いて括弧を追加するだけで完了です。 JavaScript と非常に似ています。つまり、関数本体で引数オブジェクトを使用できます。これは、Sass と Less が提供するものではありません。

Sass では関数を定義する際には @mixins xxx($parent,$n) を使用するのが一般的であり、@mixins xxx{} のパラメータは $ で始まる必要があり、関数内で取得できるパラメータは関数のパラメータのみです。数値を超えた場合は無視されます

4. 判定ステートメント:

stylus の判定ステートメントは、unknown

disable-padding-override = truepadding(args...)　　unless disable-padding-override is defined and disable-padding-override //第一种用法  　　padding(x, y)    　　margin y x

negative(n) //第二种用法  unless n is a 'unit' //unit是数字的意思    error('无效数值')  if n < 0    yes  else    no

body padding 5px 10px

を使用する、coffee-script と非常によく似ています。 sass 個人的にはこちらの方が簡潔でわかりやすいです:

$lte7: true;$type: monster;.ib{    display:inline-block;    @if $lte7 {        *display:inline;        *zoom:1;    }}p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

5. for ループ

Sass はテンプレートと同様の関数を使用します。 、スタイラスは基本的に JavaScript と同じです

-------------------sass ------------------------@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; } //for循环里头需要通过#{$xxx}的方式取到for上面$i的值，这个写法虽然复杂，但是容易区分。}

--------------------- stylus ---------------body  fonts = Impact Arial sans-serif  for font, i in fonts    foo i font //for循环里面直接就能取到循环上面的数值，这个稍微会直接点

フォローアップには多くの異なる点があります。必要に応じて、次の 2 つのリンクをクリックして詳細を確認できます。

http://www .w3cplus.com /sassguide/syntax.html

http://www.zhangxinxu.com/jq/stylus/

2 つを要約すると:

Sass コンパイルは CSS のネイティブな記述方法に近く、スタイラスの方法はコーヒースクリプトに近いですが、達成される効果には若干の違いがありますが、個人の状況に応じて使用してください。 sass は、日常生活で使用されるテクニックにもっと関連しています (たとえば、$aaa : xxx などの for ループの #{$i} など) が使いやすいようです。個人的にはスタイラスは少し使いにくいと感じますが、コーヒースクリプトを書いたことがある人にとっては良い選択でもあります。