SASS_html/css_WEB-ITnoseを一緒に学びましょう

原文 http://ayqy.net/blog/Let's learn Sass together/

前に書いてます

Sass は約 4 年前 (2011 年) の新しい技術です。インストールガイド、学習チュートリアル、文法詳細ドキュメントなど、非常に包括的かつ明確です

Sass を学ぶ必要があるのはなぜですか? JD.com の JDF や Taobao の KISSY など、多くのフロントエンド自動化ツールが sass をサポートしているため、実際の製品開発では sass が頻繁に使用され、sass 構文は非常に単純で学習コストも高くありません

。

sassとlessに関しては、実際のところ、違いはそれほど大きくなく、機能は似ていますが、構文の詳細に違いがあります。そして、機能の点では、sass は劣るよりもわずかに優れているため、sass を検討してみても損はありません

1. Sass とは何ですか?

公式声明によると、Sass (Syntactical Awesome Style Sheets) は CSS 拡張言語です

私たちが知っている CSS は単なるマークアップ言語であり、変数、関数、論理フロー制御などをサポートしていないなど、プログラム可能な機能が欠けています。これらの機能により、CSS コードの保守と変更が困難になります。sass は、これらのプログラム可能な機能を CSS に拡張することです

同様のものには、less と stylus が含まれます。3 つの違いについては、オープンソースの中国語コミュニティ: 詳細な比較を確認してください。プロセッサ (フレームワーク): Sass、LESS、Stylus

2. sass と scss の違い

scss (Sassy CSS) は、実際には、sass の新しいバージョンです。主な違いは構文形式にあります。sass では中括弧やセミコロンは必要ありません。ネスト関係を示すためにインデントを使用します。それだけです

追伸: おそらく css 形式からの移行が簡単であるため、一般的に scss 形式を使用します

3. Sass特定の構文

P.S. 完全なテストがここにあります。 コードと詳細はコメントにあります。理解するには、sass オンライン編集を開いて、生成された CSS コードと比較することをお勧めします。コードを見て話すこの方法が気に入らない場合は、W3CPlus: sass 構文を確認してください。画像とテキストで説明されています

コードはシンプルで明確なので、個人的にはコードを読んで話すことを好みます。 、ナンセンスではありません。コード例が適切であればもっと良いでしょう

4. オンラインリソース

Sass 公式 Web サイト: 最も標準的で権威のある

• W3CPlus: 写真と非常に詳細な紹介記事があります。テキスト (上記にも記載)

• sass オンラインエディタ: Ruby をインストールしたくない場合でも、sass を使用する必要があります。そのまま使用してください

• RubyInstaller: Windows では Ruby をインストールできませんか?ここに便利な exe があります

• 参考資料