sass チュートリアル => サスの始まり

備考

このセクションでは、sassの概要と、なぜ開発者がそれを使いたいのかを概説します。

また、大括りの中にある大きなテーマについても言及し、関連するトピックにリンクする必要があります。 sassのドキュメンテーションは新しいものなので、それらの関連トピックの初期バージョンを作成する必要があります。

なぜSASSですか？

継承機能
条件文を使用できます
従来のCSSよりも機能的です
CSSを書くための効率的かつ明確な方法

バージョン

バージョン	発売日
3.4.22（現在）	2016-03-28
3.4.0	2014-08-18
3.3.0	2014-03-07
3.2.0	2012-08-10

セットアップ

SASSを使用する場合は、ワークスペースを設定する方法は複数あります。コマンドラインツール（おそらくLinuxの人々）を使いたい人もいれば、GUIアプリケーションを使う人もいます。私は両方をカバーします。

コマンドラインツール

sass-lang.com 'SASSのインストール'ページでこれをsass-lang.com説明しています。 SASSをRuby（Linuxのパッケージマネージャからインストールすることも、Windowsでインストーラをダウンロードすることもできます）で使用することができます。 macOSにはRubyがプリインストールされています。

Rubyをインストールしたら、SASSをインストールする必要があります（ sudoが必要ない場合もあります）。

sudo gem install sass

最後に、SASSをsass -vインストールしたことを確認できます。

GUIアプリケーション

あなたが使用できるいくつかのGUIアプリケーションがありますが、私はScout-Appを推奨します。それはあなたのためのあなたのためのあなたのCSSファイルを自動構築し、圧縮し、ファイルの保存およびサポートmacOS、WindowsおよびLinux。

変数

頻繁に使用する値がある場合は、変数に格納できます。たとえば、これを使用してカラースキームを定義することができます。スキームを一度定義してから、スタイルシート全体で使用することができます。

変数を定義するには、その名前の前に$記号を付ける必要があります。（PHPの場合と同じです。）

任意の有効なCSSプロパティ値を変数内に格納できます。色、フォント、URLなど。

例1：

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}

インポート

以下のシナリオを想定しましょう： _variables.scssとlayout.scss 2つのスタイルシートがありlayout.scss 。論理的には、すべての変数を変数スタイルシート内に保持しますが、レイアウトスタイルシートから変数にアクセスする必要があります。

注：変数スタイルシートには名前の前にアンダースコア（ '_'）が付いています。これは、それが部分的なものである、つまりインポートされることを意味するためです。

sass-lang.comは部分的なことについて次のように述べています。他のSassファイルに含めることができるCSSのスニペットを含む部分的なSassファイルを作成することができます。これは、CSSをモジュール化し、物事をより簡単に維持するのに役立つ素晴らしい方法です。 [...]アンダースコアは、ファイルが部分的なファイルであり、CSSファイルに生成されるべきではないことをSassに知らせます。 Sass部分は@importディレクティブとともに使用されます。

このシナリオでは、SCSS変数が優れています。 _variables.scssが次のようになっているとしましょう：

$primary-color: #333;

@importインポートし、次にスタイルシートの名前を引用符でインポートできます。あなたのレイアウトスタイルシートは次のようになります（インポート時にアンダースコアやファイル拡張子がないことに注意してください）。

@import 'variables';
body {
  color: $primary-color;
}

これは次のようなものを出力します：

body {
  color: #333;
}

ネスティング

layout.scss

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        li {
            margin: 0 5px;
           }
       }
}

出力

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0 5px;    
}

SASSは、次の2種類のコメントをサポートしています。

インラインコメント - これらは1行にまたがり、通常変数またはブロックを記述するために使用されます。構文は次のとおりです。// // Your comment here （二重スラッシュ（ // ）とその残りの行を付加します）はパーサーによって無視されます。
複数のコメント - 複数の行にまたがり、通常、ドキュメントの上部に著作権またはライセンスを表示するために使用されます。 /*複数行のコメントブロックを開くことができ、 */複数行のコメントブロックを閉じることができます。ここに例があります：

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

sass チュートリアル
サスの始まり

サーチ…

備考