Sass入門(一)
2240 ワード
Sass入門(慕課)チェン一峰
CSSプリプロセッサ
ブラウザの互換性の問題を考慮することなく、CSSのプログラミング機能を追加します」と述べた.例えば、CSSでは変数、簡単な論理プログラム、関数などのプログラミング言語の基本的な特性を使用することができます.
SassとSCSSの違いは何ですか?
初歩的な感覚は、本質的に違いない.接尾辞が違うと書き方が違います.SCSSは括弧付き、セミコロン付き.一方、Sassは、括弧やセミコロン(Rubyの表記規範を継続)を持たず、厳格なインデント文法規則で書かれています.△ある牛のことを考えると、言語を書く人は先端を簡単にしたいと思っています.先端は自分で括弧を大きくしなければなりません.
インストール
(お金があったら最初にmacを買う==)先装Ruby 再装着Sass
Sassが正常にインストールされたかどうかを確認
Sassの更新
Sassのアンインストール(削除)
Sassコンパイル(コマンドライン)単一ファイルコンパイル マルチファイルコンパイル
プロジェクト内の「sass」フォルダ内のすべての「.scss」(.sass」)ファイルを「.css」ファイルにコンパイルし、これらのCSSファイルをプロジェクト内の「css」フォルダに配置することを示します.「watch」機能をオンにすると、コードを保存して修正すれば、コードの変化を自動的に監視し、 を直接コンパイルすることができます.
4つのコンパイルスタイルネスト出力方式nested 展開出力方式expanded コンパクト出力方式compact 圧縮出力方式compressed 生産環境ではcompressedが望ましい
CSSプリプロセッサ
ブラウザの互換性の問題を考慮することなく、CSSのプログラミング機能を追加します」と述べた.例えば、CSSでは変数、簡単な論理プログラム、関数などのプログラミング言語の基本的な特性を使用することができます.
SassとSCSSの違いは何ですか?
初歩的な感覚は、本質的に違いない.接尾辞が違うと書き方が違います.SCSSは括弧付き、セミコロン付き.一方、Sassは、括弧やセミコロン(Rubyの表記規範を継続)を持たず、厳格なインデント文法規則で書かれています.△ある牛のことを考えると、言語を書く人は先端を簡単にしたいと思っています.先端は自分で括弧を大きくしなければなりません.
インストール
(お金があったら最初にmacを買う==)
gem install sass
sudo gem install sass (mac)
Sassが正常にインストールされたかどうかを確認
sass -v
Sassの更新
gem update sass
Sassのアンインストール(削除)
gem uninstall sass
Sassコンパイル(コマンドライン)
sass < Sass >/style.scss:< CSS >/style.css
sass sass/:css/
プロジェクト内の「sass」フォルダ内のすべての「.scss」(.sass」)ファイルを「.css」ファイルにコンパイルし、これらのCSSファイルをプロジェクト内の「css」フォルダに配置することを示します.
sass --watch < Sass >/style.scss:< CSS >/style.css
4つのコンパイルスタイル
sass --watch test.scss:test.css --style compressed