Sass入門(一)

2240 ワード

Sass入門(慕課)チェン一峰
CSSプリプロセッサ
ブラウザの互換性の問題を考慮することなく、CSSのプログラミング機能を追加します」と述べた.例えば、CSSでは変数、簡単な論理プログラム、関数などのプログラミング言語の基本的な特性を使用することができます.
SassとSCSSの違いは何ですか?
初歩的な感覚は、本質的に違いない.接尾辞が違うと書き方が違います.SCSSは括弧付き、セミコロン付き.一方、Sassは、括弧やセミコロン(Rubyの表記規範を継続)を持たず、厳格なインデント文法規則で書かれています.△ある牛のことを考えると、言語を書く人は先端を簡単にしたいと思っています.先端は自分で括弧を大きくしなければなりません.
インストール
(お金があったら最初にmacを買う==)
  • 先装Ruby
  • 再装着Sass
  • 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」フォルダに配置することを示します.
  • 「watch」機能をオンにすると、コードを保存して修正すれば、コードの変化を自動的に監視し、
  • を直接コンパイルすることができます.
    sass --watch <    Sass    >/style.scss:<   CSS    >/style.css

    4つのコンパイルスタイル
  • ネスト出力方式nested
  • 展開出力方式expanded
  • コンパクト出力方式compact
  • 圧縮出力方式compressed
  • 生産環境ではcompressedが望ましい
    sass --watch test.scss:test.css --style compressed