Sass は、Syntactical Awesome Style Sheets の略称で、CSS をより言語のように見せる、CSS の開発ツールです。その主なアイデアは、プログラミングのアイデアに従って独自のスタイルを記述し、「コンパイラー」を使用して必要な CSS ファイルを生成できるようにすることです。
公式ウェブサイト
Sass と Scss は実際には同じもので、通常は Sass と呼ばれます。 2 つの違いは次のとおりです:
ファイル拡張子が異なります。 Sass は拡張子として「.sass」接尾辞を使用しますが、SCSS は拡張子として「.scss」接尾辞を使用します
文法の書き方が異なります。 Sass は、中括弧 "{}" やセミコロン ";" を使用しない、厳密なインデント文法規則に従って記述されていますが、SCSS の文法記述は CSS 文法記述と非常に似ています。
SCSS と Sass の類似点と相違点 - Sass の中国語ドキュメントSass を選ぶ理由?
SASS 使用ガイド - Ruan Yifeng
Sass、LESS と Stylus の簡単な比較
CSS プリプロセッサ - Sass、LESS、Stylus の実践 [完全版] - W3CPlus - 2013-03-13
Sass も成熟した CSS プリプロセッサですツールの 1 つ、そしてそれを維持する安定した強力なチームがあります
Sass には、特に Compass、rookies、Foundation など、いくつかの成熟した安定したフレームワークがあります
もう 1 つの理由は、Sass について議論している海外の同僚の数が少ないということです。これらの理由から、問題に遭遇したときに参考資料があり、それを解決するのに役立つ友人がいると、Sass の学習や使用が容易になると思います。
Sass は Ruby 言語で書かれていますが、この 2 つの構文は Ruby 言語とは何の関係もありません。 Ruby を理解していなくても、使用できます。ただし、最初に Ruby をインストールしてから、Sass をインストールする必要があります。
まず、公式 Web サイトから Ruby をダウンロードしてインストールします。インストールする際は、「Ruby 実行可能ファイルを PATH に追加」オプションをチェックしてください。そうしないと、今後コンパイルされたソフトウェアを使用するときに、 Ruby 環境が見つからないというメッセージが表示されます。
sass インストール
ruby をインストールしたら、スタート メニューでインストールしたばかりの Ruby を見つけ、Ruby でコマンド プロンプトを起動します
gem install sass
Enter キーを押して確認します。しばらく待つと、Sass が正常にインストールされたことが確認されます (壁のせいでインストールが失敗する場合は、以下を参照して Taobao RubyGems ミラーを使用して Sass をインストールしてください)。
国内ネットワークの理由により (ご存じのとおり)、Amazon S3 に保存されている Rubygems.org のリソース ファイルが断続的に接続できませんでした。
現時点では、source コマンドを使用してソースを設定できます。まず、デフォルトの https://rubygems.org ソースを削除します:
gem source --remove https://rubygems.org/
次に、タオバオのソース https://ruby.taobao.org/ を追加します:
gem source -a https://ruby.taobao.org/
次に、現在どのソースが使用されているかを確認します。タオバオからのものであれば、Sass インストール コマンド gem install sass を入力できることを意味します。
最後に、バージョン チェック コマンドを使用して、インストールが成功したことを確認します。
sass -v
Sass インストール - W3CPlus
SASS ファイルは通常のテキスト ファイルであり、その中で CSS 構文を直接使用できます。ファイル拡張子は .scss で、Sassy CSS を意味します。
次の内容で新しい test.scss ファイルを作成します:
$blue : #1875e7;div{ color: $blue;}次に、コマンド ラインに次のコマンドを入力すると、.scss ファイルから変換された CSS コードが画面に表示されます:
sass test.scss
表示された結果をファイルとして保存したい場合は、 .css ファイル名を続けます:
sass test.scss test.css
その後、ファイルはデフォルトで現在のディレクトリに生成されます。
Sass は 4 つのコンパイル スタイル オプションを提供します:
nested: ネストされたインデントされた CSS コード (デフォルト値)
expanded: インデントされていない展開された CSS コード。コードイン簡潔な形式;
compressed: 圧縮された CSS コード。
実稼働環境では、通常、最後のオプションが使用されます。
そうですSass コンパイル - W3CPlus
Sass の公式 Web サイトでは、さまざまなクリティカルなファイルを簡単に実行できるオンライン コンバーターも提供しています。SassMeister | The Sass Playground!
基本構文1. 変数
sass --style compressed test.scss test.min.css
Sass は階層関係を表現するためにセレクターをネストできます。
// 监听文件// input.scss : scss文件// output.css : 编译后的css文件sass --watch input.scss:output.css// 监听目录 // sassFileDirectory : sass文件目录// cssFileDirectory : 编译后的css文件目录sass --watch sassFileDirectory:cssFileDirectory
Sass 他の Sass ファイルをインポートすると、それらは最終的に CSS ファイルにコンパイルされます。これは、純粋な CSS @import よりも優れています。
//sass style//-----------------------------------$gray: #666;body { background-color: $gray;}//css style//-----------------------------------body { background-color: #666; }Mixin は Sass でいくつかのコード スニペットを定義するために使用でき、将来のニーズに応じて呼び出しを容易にするためにパラメーターを渡すことができます。 CSS 3 プレフィックスの互換性の処理が簡単かつ便利になりました。
//sass style//-----------------------------------ul { li { display: inline-block; }}//css style//-----------------------------------ul li { display: inline-block; }Sass は @extend を使用してコードの組み合わせ宣言を実装し、コードをより優れた、簡潔にすることができます。
//sass style//-----------------------------------// reset.scsshtml,body,ul,ol { margin: 0; padding: 0;}//sass style//-----------------------------------// test.scss@import 'reset';body { font-size: 100%; background-color: #efefef;}//css style//-----------------------------------html,body,ul,ol { margin: 0; padding: 0; }body { font-size: 100%; background-color: #efefef; }Sass は単純な加算、減算、乗算、除算などの演算を実行できます。
//sass style//-----------------------------------@mixin box-sizing ($sizing) { -webkit-box-sizing: $sizing; -moz-box-sizing: $sizing; -box-sizing: $sizing;}.box-border { border: 1px solid #ccc; @include box-sizing(border-box);}//css style//-----------------------------------.box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -box-sizing: border-box; }Sass は、色の変更を簡単にするために多数のカラー関数を統合しています。
//sass style//-----------------------------------.bar-left { border: 1px solid #ccc;}.bar-right { @extend .bar-left; color: #999;}//css style//-----------------------------------.bar-left, .bar-right { border: 1px solid #ccc; }.bar-right { color: #999; }Sass には 2 つのコメント スタイルがあります。
標準 CSS コメント /* comment */、コンパイル済みファイルに保持されます
単一行コメント // コメント、SASS ソースファイルにのみ保持され、コンパイル後に省略されます。
ヒント: /* の後に感嘆符を追加して、これが「重要なコメント」であることを示します。圧縮モードでコンパイルした場合でも、このコメント行は保持されます。
Sass プロジェクト ファイル構造の管理 CSS プリプロセッサの機能の 1 つは、パフォーマンスに影響を与えることなくコードを多数のファイルに分割できることです。これはすべて Sass の @import コマンドのおかげで、開発環境で呼び出している限り、どれだけ多くのファイルを呼び出しても、最終的には CSS スタイル ファイルがコンパイルされます。//sass style//-----------------------------------$defaultFontSize: 10px;.msg { position: absolute; top: (800px/2); left: 200px + 200px; font-size: $defaultFontSize * 2;}//css style//-----------------------------------.msg { position: absolute; top: 400px; left: 400px; font-size: 20px; }ログイン後にコピーSass プロジェクト ファイル構造の管理 - Desert - W3CPlus
gulp-ruby-sass と gulp-sass
gulp-ruby-sass は sass を呼び出すため、Ruby 環境が必要であり、一時ディレクトリと一時ファイルを生成する必要があります。
gulp-sass は、node.js 環境で十分です。コンパイル プロセスには一時ディレクトリやファイルは必要なく、バッファーの内容を通じて直接変換されます。
gulp-ruby-sass と gulp-sass - SegmentFault
その他sass 入門 - sass チュートリアル
sass|Blog Free Tag|W3CPlus
Sass->10 分で Sass コンポーネントを書く- SegmentFaultSass を使用して OOCSS を作成する - SegmentFault
以上、フィードバックをお願いします。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
