Sass入門（インタラクティブな例を使用）
序章
あなたはいつもSassを学びたいと思っていましたが、まったく動きませんでしたか？ あなたはSassユーザーですが、ブラッシュアップを使用できると思いますか？ それでは、読み進めてください。今日は、Sassの機能と、Sassを使用して実行できるいくつかの優れた機能を確認します。
Sassとは何ですか？
Sass（構文的に素晴らしいスタイルシート）はCSSプリプロセッサです。 CoffeeScriptがJavascriptに対して何であるかは、CSSにとってです。 Sassは、スタイルシートのマークアップに機能セットを追加して、スタイルの作成を再び楽しくします。
それで、ええと、それはどのように機能しますか？
おかしいあなたが尋ねるべきです。 Sassをコンパイルする方法はいくつかあります。
- オリジナルのRubySassバイナリ。
gem install sassでインストールし、sassc myfile.scss myfile.cssを実行してコンパイルします。 - Hammer 、 CodeKit 、CompassなどのGUIアプリ
- 私の個人的なお気に入りのlibsassは、Cで書かれた非常に高速なSassコンパイラです。 node-sass （
npm install node-sass）を使用してNPM経由でlibsassをインストールすることもできます。
どちらを使うべきですか？ それはあなたがしていることに依存します。
私は大規模なeコマースコードベースを使用しているため、大規模なソースセットをコンパイルする場合、RubySassは少し遅くなります。 ビルドシステムでnode-sassを使用していますが、libsassがRubySassと100% featureの同等ではないという事実に注意する必要があります。
コマンドラインユーザーでない場合は、GUIアプリが最適です。 .scssファイルを監視するように設定できるため、編集すると自動的にコンパイルされます。
ただねじ込んだり、例を共有したりしたい場合は、Sassmeisterを強くお勧めします。 これは、この記事全体で使用するWebベースのSassプレイグラウンドです。
.sassと.scssの関係はどうですか？
Sassが最初に登場したとき、メインの構文はCSSとは著しく異なっていました。 中括弧の代わりにインデントを使用し、セミコロンを必要とせず、省略演算子がありました。 つまり、Hamlによく似ていました。
一部の人々は新しい構文にあまり優しくしませんでした、そしてバージョン3でSassはその主要な構文を.scssに変更しました。 SCSSはCSSのスーパーセットであり、基本的にまったく同じように記述されていますが、すべての楽しい新しいSass機能を備えています。
とはいえ、必要に応じて元の構文を引き続き使用できます。 私は個人的に.scssを使用しており、この記事では.scss構文を使用します。
なぜSassを使うのですか？
良い質問。 Sassを使用すると、保守可能なCSSを簡単に作成できます。 より少ないコードで、より読みやすく、より短い時間で、より多くのことを成し遂げることができます。
それ以上の理由が必要ですか？
設定
それ以上の苦労なしに、このパーティーを始めましょう。 従いながらこれらの概念のいくつかを試してみたい場合は、次のいずれかを実行してください。
- 選択したコンパイル方法をインストールし、
style.scssファイルを作成します。
または
- Sassmeisterをフォローしてください
変数
そうです、変数。 Sassは変数をCSSにもたらします。
変数の許容値には、数値、文字列、色、null、リスト、およびマップが含まれます。
Sassの変数は、$シンボルを使用してスコープされます。 最初の変数を作成しましょう：
$primaryColor: #eeffcc;
これをコンパイルしようとしてCSSに何も表示されなかった場合は、正しく実行されています。 変数を独自に定義しても、実際にはCSSは出力されず、スコープ内に設定されるだけです。 それを表示するには、CSS宣言内で使用する必要があります。
$primaryColor: #eeffcc;
body {
background: $primaryColor;
}
悪魔（スコープ）と言えば、Sassのスコープが可変であることをご存知ですか？ そうです、セレクター内で変数を宣言すると、そのセレクター内でスコープが設定されます。 見てみな：
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
コンパイルすると、段落セレクターの色は#eeccffになります。
しかし、宣言内からグローバルに変数を設定したい場合はどうでしょうか。 Sassは、!globalフラグを提供します。
$primaryColor: #eeccff;
body {
$primaryColor: #ccc !global;
background: $primaryColor;
}
p {
color: $primaryColor;
}
コンパイルすると、段落セレクターの色は#cccになります。
特にミックスインを作成するときに役立つもう1つのフラグは、!defaultフラグです。 これにより、変数が提供されていない場合に、変数のデフォルト値があることを確認できます。 値が指定されている場合、それは上書きされます。
$firstValue: 62.5%;
$firstValue: 24px !default;
body {
font-size: $firstValue;
}
コンパイル時の本文のフォントサイズは62.5%です。
以下のいくつかの変数を試して、作成しているSassがCSSにコンパイルされる方法を確認してください。
算数
CSSとは異なり、Sassでは数式を使用できます。 これはミックスイン内で非常に役立ち、マークアップを使用していくつかの本当にクールなことを行うことができます。
サポートされている演算子は次のとおりです。
| オペレーター | シンボル |
|---|---|
| 添加 | + |
| 減算 | – |
| 分割 | / |
| 乗算 | * |
| モジュロ | % |
| 平等 | == |
| 不平等 | ！= |
先に進む前に、Sass数学の2つの潜在的な「落とし穴」に注意したいと思います。
まず、/記号はfont: 14px/16pxなどの省略形のCSSフォントプロパティで使用されるため、非変数値で除算演算子を使用する場合は、次のように括弧で囲む必要があります。
$fontDiff: (14px/16px);
次に、値の単位を混在させることはできません。
$container-width: 100% - 20px;
上記の例は機能しません。 代わりに、この特定の例では、レンダリング時に解釈する必要があるため、CSScalc関数を使用できます。
数学に戻り、ベースコンテナの幅に基づいて動的な列宣言を作成しましょう。
$container-width: 100%;
.container {
width: $container-width;
}
.col-4 {
width: $container-width / 4;
}
Output .container {
width: 100%;
}
.col-4 {
width: 25%;
}
素晴らしいですよね？ 以下の例で、Sass数学をさらに活用してマージンを追加する方法を確認してください。 値を試して、例の変更を確認してください。
関数
私の意見では、Sassの最良の部分はその組み込み関数です。 完全なリストはここで見ることができます。 EXTENSIVEです。
かっこいいボタンを作りたいと思ったことはありませんか。それから、時間をかけてカラーホイールをいじり、「影付き」のパーツに適した色合いを見つけようとしましたか。
darken()機能に入ります。 あなたはそれに色とパーセンテージを渡すことができます、そしてそれはそれを待って、あなたの色を暗くします。 このデモをチェックして、これがクールな理由を確認してください。
ネスティング
Sassの最も有用で誤用されている機能の1つは、宣言をネストする機能です。 大いなる力には大きな責任が伴うので、少し時間を取って、これが何をするのか、そして悪意を持って、それがどのような悪いことをする可能性があるのかを理解しましょう。
基本的なネストとは、宣言の中に宣言を含める機能を指します。 通常のCSSでは、次のように記述できます。
.container {
width: 100%;
}
.container h1 {
color: red;
}
しかし、Sassでは、次のように書くことで同じ結果を得ることができます。
.container {
width: 100%;
h1 {
color: red;
}
}
それはバナナです！ では、親を参照したい場合はどうでしょうか。 これは、アンパサンド記号を使用することで実現されます。 これを活用して、アンカー要素に疑似セレクターを追加する方法を確認してください。
a.myAnchor {
color: blue;
&:hover {
text-decoration: underline;
}
&:visited {
color: purple;
}
}
これでネストの方法がわかりましたが、ネストを解除する場合は、@at-rootディレクティブを使用する必要があります。 次のようにネストを設定するとします。
.first-component {
.text { font-size: 1.4rem; }
.button { font-size: 1.7rem; }
.second-component {
.text { font-size: 1.2rem; }
.button { font-size: 1.4rem; }
}
}
2番目のコンポーネントが他の場所で使用される可能性があることに気付いた後、私たちはピクルスを手に入れました。 まあ、そうではありません。 @at-rootが救助に：
かっこいい？ ネストは、時間を節約してスタイルを読みやすくするための非常に優れた方法ですが、ネストしすぎると、選択やファイルサイズが大きくなりすぎるという問題が発生する可能性があります。 sassが何にコンパイルされるかを常に確認し、「開始ルール」に従うようにしてください。
インセプションルール：4レベルを超えて深くならないでください。 経由http://thesassway.com/
可能であれば、4つ以上のレベルをネストしないでください。 あなたがピンチで5レベル深く行かなければならない場合、ハンプトンカトリンはあなたの家に来てあなたと戦うつもりはありません。 しないようにしてください。
輸入
簡単にSassの2番目に好きな部分であるインポートを使用すると、スタイルを別々のファイルに分割して、相互にインポートできます。 これは、編集の構成と速度に驚異的です。
@importディレクティブを使用して.scssファイルをインポートできます。
@import "grids.scss";
実際、拡張機能は本当に必要ありません。
@import "grids";
Sassコンパイラには、「部分」と呼ばれる概念も含まれています。 .sassまたは.scssファイルの前にアンダースコアを付けると、CSSにコンパイルされません。 これは、ファイルがマスターstyle.scssにインポートされるためだけに存在し、明示的にコンパイルされていない場合に役立ちます。
拡張とプレースホルダー
Sassでは、@extendディレクティブは、既存のスタイルを継承するための優れた方法です。
input-errorクラスがある場合は、@extendディレクティブを使用して、入力のスタイルを拡張します。
.input {
border-radius: 3px;
border: 4px solid #ddd;
color: #555;
font-size: 17px;
padding: 10px 20px;
display: inline-block;
outline: 0;
}
.error-input {
@extend .input;
border:4px solid #e74c3c;
}
これは、スタイルを.inputから.error-inputにコピーしないことに注意してください。 この例でコンパイルされたCSSを見て、インテリジェントに処理される方法を確認してください。
しかし、まだ存在していない一連のスタイルで宣言を拡張したい場合はどうでしょうか。 プレースホルダーセレクターをご覧ください。
%input-style {
font-size: 14px;
}
input {
@extend %input-style;
color: black;
}
プレースホルダーセレクターは、選択したクラス名の前に%記号を付けることで機能します。 完全にレンダリングされることはなく、拡張要素の結果のみが単一のブロックにレンダリングされます。
前の例がプレースホルダーでどのように機能するかを以下で確認してください。
Mixins
ミックスインディレクティブは、@extendと同じ方法でスタイルを含めることができるという点で、Sassの非常に便利な機能ですが、引数を指定して解釈する機能を備えています。
Sassは@mixinディレクティブを使用してミックスインを定義し、@includeディレクティブを使用してミックスインを使用します。 メディアクエリに使用できる簡単なミックスインを作成しましょう！
最初のステップは、ミックスインを定義することです。
@mixin media($queryString){
}
ミックスインmediaを呼び出し、$queryString引数を追加していることに注意してください。 ミックスインを含めると、動的にレンダリングされる文字列引数を指定できます。 内臓を入れましょう：
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
文字列引数をそれが属する場所にレンダリングする必要があるため、Sass補間構文#{}を使用します。 中括弧の間に変数を入れると、評価されるのではなく印刷されます。
私たちのパズルのもう1つのピースは、@contentディレクティブです。 中かっこを使用してコンテンツをミックスインでラップすると、ラップされたコンテンツは@contentディレクティブを介して利用できるようになります。
最後に、@includeディレクティブでミックスインを使用しましょう。
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}
以下のデモをチェックして、新しいミックスインがメディアクエリをレンダリングする方法を確認してください。
機能ディレクティブ
Sassの関数ディレクティブはミックスインに似ていますが、マークアップを返す代わりに、@returnディレクティブを介して値を返します。 これらを使用して、コードを乾燥させ（繰り返さないでください）、すべてを読みやすくすることができます。
先に進んで、グリッドデモからグリッド計算をクリーンアップする関数ディレクティブを作成しましょう。
@function getColumnWidth($width, $columns,$margin){
@return ($width / $columns) - ($margin * 2);
}
これで、以下のコードでこの関数を使用できます。
$container-width: 100%;
$column-count: 4;
$margin: 1%;
.container {
width: $container-width;
}
.column {
background: #1abc9c;
height: 200px;
display: block;
float: left;
width: getColumnWidth($container-width,$column-count,$margin);
margin: 0 $margin;
}
かなりかっこいいですね
デモ
これらすべてのツールを自由に使用できるようになったので、独自の構成可能なグリッドフレームワークを構築してみませんか？ レッツ・ロール：
設定のマップを作成することから始めましょう：
$settings: (
maxWidth: 800px,
columns: 12,
margin: 15px,
breakpoints: (
xs: "(max-width : 480px)",
sm: "(max-width : 768px) and (min-width: 481px)",
md: "(max-width : 1024px) and (min-width: 769px)",
lg: "(min-width : 1025px)"
)
);
次に、フレームワークをレンダリングするミックスインを作成しましょう。
@mixin renderGridStyles($settings){
}
ブレークポイントごとにマークアップをレンダリングする必要があるので、ブレークポイントを繰り返し処理して、メディアミックスインを呼び出します。 map-getメソッドを使用してブレークポイント値を取得し、@eachディレクティブを使用してブレークポイントを反復処理してみましょう。
@mixin renderGridStyles($settings){
$breakpoints: map-get($settings, "breakpoints");
@each $key, $breakpoint in $breakpoints {
@include media($breakpoint) {
}
}
}
反復内で実際のグリッドマークアップをレンダリングする必要があるため、renderGridミックスインを作成しましょう。 map-getメソッドを使用してマップ値を取得し、@whileディレクティブを使用して$iをインデックスとして列を反復処理してみましょう。 補間を使用してクラス名をレンダリングします。
@mixin renderGrid($key, $settings) {
$i: 1;
@while $i <= map-get($settings, "columns") {
.col-#{$key}-#{$i} {
float: left;
width: 100% * $i / map-get($settings,"columns");
}
$i: $i+1;
}
}
次に、コンテナと行のスタイルを追加しましょう。
.container {
padding-right: map-get($settings, "margin");
padding-left: map-get($settings, "margin");
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: map-get($settings, "margin") * -1;
margin-left: map-get($settings, "margin") * -1;
}
生きてる！ 以下のフレームワークのデモをご覧ください。
結論
この時点に到達して、かなりの量のSassをカバーしたと思うかもしれませんが、実際にはそれは氷山の一角にすぎません。 Sassは非常に強力なツールであり、非常に優れた機能を使用できます。 高度な概念に関する記事をフォローアップすることを楽しみにしていますが、それまではHappy Sassingを使用して、以下のリソースを確認してください。
資力
- The SassWay-Sassチュートリアルの驚異的なソース。
- ヒューゴジローデル -Sassに熱心に取り組んでいる素晴らしいテクニカルライター兼Sassウィザード。
- SassNews -スチュワート・ロブソンが管理するTwitterアカウントで、最新情報を入手できます。
