sass learning_html/css_WEB-ITnose

私はそれまで Sass に触れたことはありませんでしたが、その後、偉大な専門家によって書かれたフロントエンドのナレッジ システム構造図の CSS プリコンパイル済みプロセッサーにこの魔法のようなものがあるのを知りました。 NetEase でインターンをしていた先輩が、私が一緒に書いた github Page プロジェクトで mcss (これも NetEase のマスターによって書かれた CSS プリコンパイラ) を使うよう勧めてくれました。もちろん (当時はそれが何なのか分かりませんでしたし、Baidu には存在しませんでした)、mcss と sass の原理は同じです
、同じ文法規則があります。 sass と scss の接続と違い
元々、Sass は別のプリプロセッサ Haml [注釈 1] の一部であり、Haml は Ruby を使用して設計および開発されました。さらに重要なのは、中括弧や二重引用符のない、Ruby に似た構文です。彼には厳密なインデント規則があります。インデントが間違っている限り、コンパイルは許可されません。 例:
$font-stack: Helvetica, sans-serif //変数を定義します
$primary-color: # 333 //変数を定義します

body
font: 100% $font-stack
color: $primary-color

そして、scssは第3版から導入され、正式名称はSassy Css、略称はscssで、その構文はcssに非常に近いですたとえば、次のように使用します。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary -color;
}

2. つまり、scss は sass の改良版であり、なぜ scss を使用するのでしょうか?
(1) css は常にページを美しくするための言語として使用されてきました。 sassはcssになるという要素を追加し、cssをプログラミング的な発想を持った言語にします
(2) 親要素と子要素の関係が明確に分かるので、cssの子要素の制限が軽減され、事前制限がたくさん追加されます次の scss コードのように、子要素の前に親要素を配置します。
#button{
width:400px;
text-align: center;
background: purple;
a {
使用する 使用する サス。スルー スルー オフ ' スルー スルー ' ‐ ‐ ‐‐‐‐ 0px;
text-align: center;
バックグラウンド: パープル;

a{
text-decoration: none;
color:red;
font -size: 14px;
font-weight:old;
}
}

コード構造 とてもわかりやすくなります
複数のsassファイルを1つのcssファイルに簡単にマージでき、コマンドラインを使ってコンパイルするだけです。

3. sassの使い方:
(1) sassをインストールします。sassはrubyで書かれているので、文法的にはあまり関係がありません。 sass をインストールする前に、ruby がインストールされていることを確認する必要があります。私は ububtu を使用しているので、コマンドを 1 行実行するだけで次のようになります

gem install sass

さらに、sass をインストールする別の方法もあります。git を使用してインストールします:

git clone git://github.com/nex3/sass.git
cd sass
rake install

sass -v

を使用してインストールが成功したかどうかをテストします。sass の基本的な構文は、http://www.th7.cn/web/html-css/201407/47710.shtml にあります。4.
通常、sass ファイルを作成するときは、ファイルの接尾辞名として .scss を使用してコンパイルします。コンパイル方法は次のとおりです。

単一のファイルをコンパイルする

sass test.scss test.css
こともできます。出力 CSS ファイルのスタイルを設定します

sass --style 圧縮 test.scss test.css
出力スタイル スタイルには 4 つの選択肢があり、デフォルトはnested です

nested: ネストされたインデント CSS コード
expanded: 複数の展開行の CSS コード
compact: 簡潔な形式の CSS コード
compressed: 圧縮された CSS コード

単一のファイルを監視

sass --watch test.scss: test.css
フォルダーを監視

sass --watch src:dest