SASS
（
SCSS
）についての記事、Habrahabrについては既に十分ですが、私の意見では、実際には少ししか実践できないような十分なものはありません。 このギャップを埋めようとします。 約1年前、
SASS
記事の1つに「夢中になりました」。それ以来、このテクノロジーに非常に夢中になり、通常の
CSS
コードを手動で入力するのは時間の無駄に思えます。 この記事は、SCSSについて聞いたことがない、またはまだ試していないタイプセッター（またはWebプログラマー）を対象としています。 より経験豊富な同志は、それにとらわれることは何もないと信じています。
SCSSとは
SCSS
はSASS言語の「方言」です。 SASSとは何ですか？ SASSはHAML （非常に簡潔なテンプレートエンジン）に似た言語ですが、CSSコードの作成を簡素化するように設計されています。 簡単に言えば、SASSはコードが特別なルビープログラムを使用して通常のCSSコードに変換される言語です。 この言語の構文は非常に柔軟であり、CSSで非常に望まれている多くのささいなことを考慮に入れています。 さらに、ロジック（@if、 each ）、数学（数字、線、色を追加できます）も備えています。 おそらく、SCSSの一部の機能は冗長に見えるかもしれませんが、私の意見では、それらは不要ではなく、「予備」のままです。
SCSSとSASSの違いは、SCSSが通常のCSSコードに似ていることです。 SASSコード例：
$blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue
また、SCSSでも同じです。
$blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }
私は、SCSSにまだ慣れていない同僚にとって理解しやすいという事実を考慮して、SCSSを選択しました。 通常のCSSコードがSCSS構文に適合することにも注意する必要があります。
インストールと使用
最初にrubyをインストールする必要があります。 次に、
sass-gem
をインストールする必要があります（コンソールで
gem install sass
）。 すべてが順調に進んだ場合、
sass
コンソールプログラムが使用可能になりました。 使用法のすべてのニュアンスについては、こちら
sass --help
ご覧ください。 2つの基本的な機能についてのみ説明します。
-ウォッチ
--watch
キーでsassを実行すると、プログラムは指定したファイルを監視します。 それらが変更された場合、必要なすべてのcssファイルを自動的に再コンパイルします（まったくではなく、変更に関連するもののみ）。
次のプロジェクト構造があるとします。
-- css ---- scss ------ style.scss ---- style.css
sassは
css/scss/*
すべての変更を追跡し、結果を
css/*.css
css/scss/*
保存する必要があります。 この場合、次のようにsassを実行します
sass --watch css/scss:css/.
。 つまり sass
--watch []:[]
。
-更新
cssファイルを一度更新する必要がある場合は、--
--watch
代わりに
--watch
使用し
--update
。 監視は行われず、更新の必要性もチェックされません。
Less
とは異なり、
SASS
ブラウザでコードを直接コンパイルできないことに注意してください。 私の意見では、そのようなアプローチ（サーバーまたはPCコーダーでのコンパイル）が唯一の真のアプローチです。
練習する
だから、私たちは最も重要なことになります。
@import
から始めましょう。
@import
最初は、SCSSを使用する前に、サービスとして使用しなければならないエンジンのすべてのCSSコードは、最初の巨大なstyle.cssファイルにありました。 私のIDE（Netbeans（ちなみに、構文の強調表示用のプラグインです））は、かなりのブレーキをかけて動作しました。 しかし、誰もそれを多くの小さなファイルに分割し、必要に応じてそれらを1に接着することを望みませんでした。 SCSSはこの問題を自動的に解決します。
1つのニュアンスに注目する価値があります。 sassが特定のソースファイルではなくディレクトリにフィードされる場合、
_
始まるファイルのcssファイルは生成されません。 つまり
style.scss
ファイルが存在すると
style.scss
が作成されますが、
style.scss
ファイルは存在しません。
したがって、
_template.scss
ファイルまたは
template.scss
ファイルの内容を含めるために、次のように記述します。
@import "template"; //
最終的に、最初の大きな
style.css
ファイルの代わりに、100を超える小さな
scss
ファイルを
scss
しました。 一見すると、そのような量は大きすぎてひどい苦痛につながるように見えるかもしれません。 ただし、必要なファイルは、便利なディレクトリ構造に基づいてすぐに見つかります。 さらに、キャッシングにより、このような「スキーム」の方が生産性が高いと思います。
@ネスト
最も望ましいCSS機能の1つは、セレクターのネストです。 例：
#some { border: 1px solid red; .some { background: white; } } /* => */ #some { border: 1px solid red; } #some .some { background: white; }
別の例：
input { border: 1px solid gray; background: white; &[type=text] { color: black; } &.some_class { display: none; } } /* => */ input { border: 1px solid gray; background: white; } input[type=text] { color: black; } input.some_class { display: none; }
&
記号は、親セレクターと同等です。 ブラウザーとして
Internet Explorer 7
がある場合、
ie_7
クラスを持つ<body>タグがあるとします。 次のコードを使用すると、すべての「ハック」と特別なコメントを取り除くことができます。
$IE_7: 'body.ie_7'; //... .some { display: inline-block; #{$IE_7} & { zoom: 1; display: inline; } } /* => */ .some { display: inline-block; } body.ie_7 .some { zoom: 1; display: inline; }
$変数
変数は便利なものです。 それらは次のように定義されます。
$some: red;
変数は定数ではなく、コードの過程で変更できます。最初の考えの1つは、
_const.scss
ファイルになりました。
_const.scss
ファイルには、すべての基本的な色、フォントサイズなどが含まれています。
$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $input_color: #4E4D4D; $input_color_placeholder: #959595; $text_color: black; ...
サイトのリンクの色は
$link
と思われます。
a { color: $link; } span.link { color: $link; text-decoration: underline; }
将来、リンクの色が変更されたことが判明した場合は、変数を1つ変更するだけです（CSSの場合、ファイルごとに、場合によっては選択的に自動置換する必要があります）。 突然、一部の
contacts
モジュールでリンクの色が異なることが判明したとします。 少なくとも2つの解決策があります。
最初のもの：
$contacts_link: orange; // $contacts_link $link
第二
$__link: $link; $link: orange; // $link: $__link;
変数は類型化されていないため、同様に成功すると、文字列、数字、色を含めることができます。
@数学
数学は、色と数字の2つのカテゴリに分類されます。 数字から始めましょう。 簡単な例：
.block { $block_width: 500px; padding: 5px; border: 1px solid black; width: $block_width - ( 5px * 2 ) - ( 1px * 2 ); }
必要に応じて、境界線を使用した埋め込みを変数に設定することもできます。 それはすべて、レイアウトの複雑さに依存します。
別の例：
.block { $count: 10; $margin_left: 5px; $all_width: 1000px; width: $all_width; .sub_element { width: ( $all_width / $count ) - $margin_left; margin: 0 0 0 $margin_left; } }
この種の操作は非常に頻繁に使用されることに注意してください。 それらがなければ私は足がありません。
そして今、色。 色を追加、乗算できます：
.some { $color: #010203; color: $color; border-color: $color - #010101; &:hover { color: #010203 * 2; } } /* => */ .some { color: #010203; border-color: #000102; } .some:hover { color: #020406; }
色を選ぶのが面倒なときは非常に便利です。
opacify
や
transparentize
などの機能も利用できます（ 詳細 ）。
@行
SASSは行をスタックでき、
#{}
構築もサポートします
$image_dir: 'images/web/'; $page: 12; .some { background-image: url( $image_dir + 'pen.gif' ); &:before { content: " #{ $page }!"; } } /* => */ .some { background-image: url("images/web/pen.gif"); } .some:before { content: " 12!"; }
文字列操作の最大の使用法は、@ mixinや画像パスなどを示す変数に見られると思います。
記事
記事は非常に膨大であることが判明したため、私はそれを2つの部分に分けることにしました。 次の記事で検討します（構文と範囲）：
-
@mixin
カスタム関数 -
@if
条件 -
@each
ループ - 1つのサイトの複数のデザイン
- 読者の要望で