sass_html/css_WEB-ITnose の使用

1. SASS とは

SASS は、多くの便利な記述方法を提供する CSS 開発ツールで、デザイナーの時間を大幅に節約し、CSS 開発をシンプルかつ保守しやすくします。

この記事では、SASS の主な用途をまとめています。私の目標は、この記事により、日常の一般的な使用では公式ドキュメントを読む必要がなくなることです。

2. インストールと使用

2.1 インストール

SASS は Ruby 言語で書かれていますが、この 2 つの構文は同じ関係ではありません。 Ruby を理解していなくても、使用できます。最初に Ruby をインストールしてから SASS をインストールするだけです。

Ruby がインストールされていると仮定して、コマンドラインに次のコマンドを入力します:

gem install sass

これで使用できるようになります。

2.2

SASS ファイルは通常のテキスト ファイルであり、その中で CSS 構文を直接使用できます。ファイルの拡張子は .scss で、Sassy CSS を意味します。

次のコマンドにより、.scss ファイルから変換された CSS コードを画面に表示できます。 (ファイル名はtestとする。)

sass test.scss

表示結果をファイルに保存したい場合は、その後ろに.cssファイル名を付けます。

sass test.scss test.css

SASS は 4 つのコンパイル スタイル オプションを提供します:

* ネスト: ネストされたインデントされた CSS コード。これはデフォルト値です。

* 展開: インデントされていない、展開された CSS コード。

* コンパクト: 簡潔な形式の CSS コード。

* 圧縮: 圧縮された CSS コード。

実稼働環境では、通常、最後のオプションが使用されます。

sass --style crash test.sass test.css

ソースファイルが変更されると、SASS がコンパイル済みバージョンを自動的に生成するようにすることもできます。

// ファイルを監視

sass --watch input.scss:output.css

// ディレクトリを監視

sass --watch app /sass:public/stylesheets

SASS の公式 Web サイトでは、オンライン コンバーターが提供されています。そこから、以下のさまざまな例を試すことができます。

3. 基本的な使用法

3.1 変数

SASS では変数の使用が許可されており、すべての変数は $ で始まります。

$blue : #1875e7;

div {
color : $blue;
}

変数を文字列に埋め込む必要がある場合は、必須 #{}内に記述する必要があります。

$side : left;

.rounded {
border-#{$side}-radius: 5px; 機能

SASS では、コード内の計算: body {

margin: (14px/2);

top: 50px + 100px;

right : $var * 10%;

}


3.3 ネスト

SASS ではセレクターをネストできます。たとえば、次の CSS コード: div h1 {

color : red;

}

は、次のように記述できます:

div {

こんにちは {

Color:red; 🎜> color: red;

}

}

ボーダーの後にコロンを追加する必要があることに注意してください。

ネストされたコード ブロック内では、& を使用して親要素を参照できます。たとえば、疑似クラス a:hover は次のように記述できます。

a {

🎜>

SASS には 2 つのコメント スタイルがあります。

標準 CSS コメント /* comment */ はコンパイルされたファイルに保持されます。

単一行のコメント // SASS ソースファイルにのみ保持されるコメントは、コンパイル後に省略されます。

これが「重要なコメント」であることを示すには、/* の後に感嘆符を追加します。圧縮モードでコンパイルする場合でも、このコメント行は保持され、通常は著作権情報を宣言するために使用できます。

/*!

重要な注意事項!

セレクター。たとえば、既存の class1:

.class1 {

border: 1px Solid #ddd;

} class2 が class1 を継承したい場合は、@extend コマンドを使用する必要があります。

.class2 {

C 言語のマクロと同様、再利用できるコードのブロックです。

@mixin コマンドを使用してコード ブロックを定義します。

@mixin left {

float: left;

margin-left: 10px;

}

このミックスインを呼び出すには @include コマンドを使用します。

div { @include left; }

mixin の利点は、パラメーターとデフォルト値を指定できることです。 @mixin left($value: 10px) {

float: left;

margin-right: $value;

}

を使用する場合、必要に応じてパラメータを追加します:

div {
@include left(20px);
}

以下はブラウザを生成するミックスインの例です。接頭語。

@mixinrounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz- border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

使用する場合は、次のように呼び出すことができます。

#navbar li { @includerounded(top, left) }

#footer { @includerounded(top, left, 5px); }

4.3 カラー関数

SASS は、一連の色を生成するためのいくつかの組み込みカラー関数を提供します。

明るくする(#cc3, 10%) // #d6d65c
暗くする(#cc3, 10%) // #a3a329
グレースケール(#cc3) // #808080
complement( #cc3) // #33c

4.4 ファイルの挿入

@import コマンド。外部ファイルを挿入するために使用されます。

@import "path/filename.scss";

.css ファイルが挿入されている場合は、css import コマンドと同等です。

@import "foo.css";

5. 高度な使用法

5.1 条件文

@if を使用して判断できます。

p {
@if 1 + 1 == 2 { border: 1px 実線; }
@if 5 < 3 { border: 2px dotted; }
}

@else コマンドもサポートされています:

@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}

5.2 ループステートメント

SASS は for ループをサポートしています:

@ for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px Solid blue;
}
}

はwhile ループもサポートされています:

$i: 6;

@while $i > 0 {
.item-#{$i} { width: 2em * $i }
$i: $i - 2;
}

for と同様の各コマンド:

@each $member in a, b, c, d {
. #{$member} {
background-image: url("/image/#{$member}.jpg");
}
}

5.3 カスタム関数

SASS を使用すると、ユーザーは独自の関数を作成できます。

@function double($n) {
@return $n * 2;
}

#sidebar {
width: double(5px);
}

(終了