Looking for sass Answers? Try Ask4KnowledgeBase
Looking for sass Keywords? Try Ask4Keywords

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は、次の2種類のコメントをサポートしています。

  • インラインコメント - これらは1行にまたがり、通常変数またはブロックを記述するために使用されます。構文は次のとおりです。// // Your comment here (二重スラッシュ( // )とその残りの行を付加します)はパーサーによって無視されます。

  • 複数のコメント - 複数の行にまたがり、通常、ドキュメントの上部に著作権またはライセンスを表示するために使用されます。 /* 複数行のコメントブロックを開くことができ、 */ 複数行のコメントブロックを閉じることができます。ここに例があります:

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

インポート

以下のシナリオを想定しましょう_variables.scsslayout.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を使用する場合は、ワークスペースを設定する方法は複数あります。コマンドラインツール(おそらく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;
}