Sassを初めて使用する

MOOC.com (http://www.imooc.com/learn/364) で上級 materliu の Sass チュートリアルをご覧ください。ちなみに、先ほど完成したプロジェクトを再構成して、メモと経験をここに書き留めておきます〜

まずsassをインストールします。ここではSenior Desertのインストールチュートリアルhttp://www.w3cplus.com/sassguide/install.htmlを直接参照できます。

次に、compassをインストールして、rubyコマンド、gem install compassのコマンドを入力します。sassのビデオを見た後では、compassはscssファイルをコンパイルして圧縮するためにのみ使用されるように感じます。 css（霧）。

コンパスコマンド:

コンパス コンパスを作成します；

コンパスウォッチ;

Sass構文:

ファイルをコンパイルする必要がない場合は、接頭辞のアンダースコアを付けて名前を付けることができます。通常、関数または変数はフォルダーに配置されます。

import を使用してファイルをインポートすることができ、ファイル名の接尾辞を記述する必要はありません。ただし、これはネイティブ CSS インポートではありません。

ネイティブ CSS インポートの 2 つの主な欠点: 1. コードの先頭に配置する必要があります。 2. パフォーマンスに悪影響を及ぼします。どうしてもネイティブインポートを使用したい場合は、 1. CSS で終わる場合。 2. http:// で始めます。 3. URL() 関数。 4. メディアクエリを使用します。

Sass 変数: たとえば、色を探すたびにカラーコードを覚えられないのですが、変数を使用すると、カラーコードをゆっくり探す必要がなくなります。変数ファイルを見れば一目瞭然です。

特別な変数、特定の状況で使用される変数;

例：

リーリー

多値変数: 名前が示すように、複数の値を意味します。たとえば、0、1px、2px、3pxなどです。たくさんの関数がありますが、今のところは append($list,$value,[$separator]) だけを使用しています。

Mixin: @mixin を通じて宣言され、@include によって呼び出されます。

プロジェクトに取り組んでいたとき、フレキシブルを使用してこのようなスタイルをたくさん書きました

リーリー

こうやって書くのはめんどくさいので、sassを覚えた後、淘宝網で書かれているハイブリッドマクロを参考に自分で書きました

リーリー

css、sass生成コード:

リーリー

今日はここまでです。