フロントエンド CSS フレームワーク SASS の使用方法tutorial_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 コード。これがデフォルト値です。

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

* Compact: 簡潔な形式の 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;
}

変数を文字列に埋め込む必要がある場合は、#{} に記述する必要があります。 D i $ サイド: 左

.rounded {

border-#{$ サイド} -radius: 5px;

{
margin: (
余裕: ( 14px/2);
top: 50px + 100px;
right: $var * 10%;

}

3.3 ネスト

SASS ではセレクターのネストが可能です。たとえば、次の CSS コード:

div h1 {
color : red;

}

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

div {
hi {
}
}

属性は、 border など、ネストすることもできます。 color 属性は次のように記述できます:

p {
border: {
color: red;
}
}

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

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

a {
&:hover { color: #ffb3ff; }
}

3.4 コメント

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

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

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

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

/*
重要な注意！
*/

4. コードの再利用

4.1 継承

SASS では、あるセレクターが別のセレクターを継承できます。たとえば、既存の class1:

.class1 {
border: 1px Solid #ddd;
}

class2 class1 を継承するには、@extend コマンドを使用します:

.class2 {
@extend .class1;
font-size : 120%;
}

4.2 Mixin

Mixin は、再利用可能なコード ブロックである 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
補色(#cc3) // #33c

4.4ファイルの挿入

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

@import "path/filename.scss";

.css ファイルを挿入した場合は、css import コマンドと同等です。

@import "foo.css";

5. 高度な使い方

5.1 条件文

@if は次の判定に使用できます。 }

@if 5 < 3 { border: 2px dotted; }

}


@if lightness($color) > 30% {

} @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);
}