SCSS-Sassのグレーズの新しい部分

最近、私は実際にレイアウトを行わず、SCSS（ S assy CSS ）拡張を実装するSass3出力を見逃しました。 これは、構文の歪みのないCSSの拡張です。つまり、有効なCSSドキュメントは完全に有効なSCSSドキュメントでもあります。 投稿では、 SassやLessなどの既存のプリプロセッサと比較します。 それについてはすでにハブラーに書かれていました： Sass 、 Less 。 しかし、その情報は少し古くなっています。特に、Sassの構文が変更されています。

はじめに

プリプロセッサの最初のものはSassによって作成されたもので、たとえルールが最初にコロンで示されていたとしても、多くの構文を怖がっていました。 Ruby Symdol型へのオマージュのようなものでしたが、CSSはRubyプログラマーによって書かれたものではありませんでした。 したがって、愛好家のグループは、Less、Sass機能（変数、Mixins、Inheritance、Arithmetic）+ネイティブ構文を作成しました。 Sassチームは後に構文を変更し、SCSSを作成しました。 Lessと同様、CSS構文とSass機能を備えた言語でした。

以下は、各プリプロセッサでの機能とその実装のリストです。

変数

サス

$blue: #3bbfce
$margin: 16px
.border
padding : $margin / 2
margin : $margin / 2
border-color : $blue


少ない

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


SCSS

$blue: #3bbfce ;
$margin: 16px ;
.border {
padding : $margin / 2 ;
margin : $margin / 2 ;
border-color : $blue;
}

コードから、原則として、変数の使用方法は明らかです。 私からは、色の割り当てに非常に便利であることに注意してください。 プロジェクトが色の変更を決定した場合、1つの変数の値を変更することは難しくありません。

継承

CSS

table .hl {
margin : 2em 0 ;
}
table .hl td .ln {
text-align : right ;
}


少ない/ SCSS

table .hl {
margin : 2em 0 ;
td .ln {
text-align : right ;
}
}


サス

table .hl
margin : 2em 0
td .ln
text-align : right

私の意見では、継承は素晴らしいです。

ミックスイン

CSS

CSSブレンドは、複数のHTML要素に割り当てられるクラスを作成するだけです。
clearfixを使用した例：

.clearfix:after {
content : "." ;
display : block ;
clear : both ;
visibility : hidden ;
line-height : 0 ;
height : 0 ;
}
.clearfix {
display : inline-block ;
}
html[xmlns] .clearfix {
display : block ;
}
* html .clearfix {
height : 1% ;
}

<div class = "clearfix" >


少ない

.rounded_corners ( @radius : 5px ) {
-moz-border-radius : @radius ;
-webkit-border-radius : @radius ;
border-radius : @radius ;
}
#header {
.rounded_corner ;
}
#footer {
.rounded_corners ( 10px );
}


SCSS

@mixin rounded_corners ( $radius ) {
-moz-border-radius : $radius ;
-webkit-border-radius : $radius ;
border-radius : $radius ;
}
#footer {
@include rounded_corners ( 10px );
}

サス

@mixin rounded_corners ( $radius )
-moz-border-radius : $radius
-webkit-border-radius : $radius
border-radius : $radius
#footer
@include rounded_corners ( 10px )


mixinで見たように、パラメーターを渡すことができます。これは時には非常に便利です。

算術

少ない

@the-border: 1px ;
#header {
border-left : @the-border;
border-right : @the-border * 2 ;
}

SCSS

$the-border: 1px ;
#header {
border-left : $the-border;
border-right : $the-border * 2 ;
}

サス

$the-border: 1px
#header
border-left : $the-border
border-right : $the-border * 2


これは最も原始的な例です。 これを適用できるオプションがすでにいくつかあると思います。

おわりに

Less構文を見ると、SCSSはCSS構文に似ており、これらのプリプロセッサでは追加のバンが控えめに提供されますが、方法は少し異なります。 たとえば、変数とミックスインは異なる方法で宣言されます。 同様に、SassとLessは、Sassの構文のみに従って互いにスクイーズし、セレクタールールのブロックは引用符ではなくインデントによって形成され、行末にセミコロンはありません。 これは優れた代替品だと思います。各ブロックの行を保存できます。

プリプロセッサは、Rubyのジャムとして配布されます。

SCSS、サス
gem install haml

少ない
gem install less