CSS強化装備！ Sass 整理notes_html/css_WEB-ITnose

サスとは何ですか?

Sass は、Syntactical Awesome Style Sheets の略称で、CSS をより言語のように見せる、CSS の開発ツールです。その主なアイデアは、プログラミングのアイデアに従って独自のスタイルを記述し、「コンパイラー」を使用して必要な CSS ファイルを生成できるようにすることです。

公式ウェブサイト

Sass と SCSS の違いは何ですか?

Sass と Scss は実際には同じもので、通常は Sass と呼ばれます。 2 つの違いは次のとおりです:

ファイル拡張子が異なります。 Sass は拡張子として「.sass」接尾辞を使用しますが、SCSS は拡張子として「.scss」接尾辞を使用します

文法の書き方が異なります。 Sass は、中括弧 "{}" やセミコロン ";" を使用しない、厳密なインデント文法規則に従って記述されていますが、SCSS の文法記述は CSS 文法記述と非常に似ています。

追記: この記事では SCSS についてのみ説明します。

SCSS と Sass の類似点と相違点 - Sass の中国語ドキュメント

Sass を選ぶ理由?

「LESS は解析に JavaScript に依存していますが、これは好きではありません。さらに、LESS 変数は @ で表されますが、これには慣れていません。」by Ruan Yifeng

SASS 使用ガイド - Ruan Yifeng

Sass、LESS と Stylus の簡単な比較

• 3 つはすべてオープンソース プロジェクトです。

• Sass は Ruby コミュニティによってサポートされ、Stylus は初期のサーバー NodeJS プロジェクト。2009 年に Less が登場し、その支持者は Ruby や NodeJS コミュニティをはるかに上回っています。一方、Stylus の構文は比較的厳格です。 LESS のほうが学習が早いため、
  Sass と LESS は相互に大きな影響を及ぼし、CSS と完全に互換性のある SCSS に進化しました。
• Sass と LESS はどちらも、翻訳を提供するサードパーティ ツールを備えています。特に、Sass と Compass は完全に一致しています。
  Sass、LESS、Style はすべて、変数、スコープ、ミックスイン、ネスト、継承、演算子、カラー関数、インポート、コメントの「変数」、「ミキシング」、「ネスティング」、「継承」、「カラー関数」の5つの基本機能がそれぞれの機能の実装機能となります。似ていますが、使用規則が異なります。 Sass と Stylus は、条件文やループ文などの同様の言語処理機能を備えていますが、LESS は when などのキーワードを使用してこれらの関数をシミュレートする必要があり、この点でわずかに劣ります。側面。
CSS プリプロセッサのデメリット
• 個人的には、CSS プリプロセッサ言語はプログラマーにとっておもちゃであり、プログラミングを通じて国境を越えて CSS の問題を解決したいと考えています。 CSS はすべての問題に対処する必要があると言えます。簡単に言えば、CSS プリプロセッサ言語は CSS ゲームプレイよりも高度になっていますが、同時に最終コードに対する制御が低下します。さらに致命的なのは、そのしきい値が上がったことです。まず始めのしきい値、次にメンテナンスのしきい値、最後にチーム全体のレベルと基準のしきい値が上がっています。これにより、初心者にとって学習コストも高くなります。

• CSS プリプロセッサ - Sass、LESS、Stylus の実践 [完全版] - W3CPlus - 2013-03-13

Sass を選んだ理由:

Sass も成熟した CSS プリプロセッサですツールの 1 つ、そしてそれを維持する安定した強力なチームがあります

• Sass には、特に Compass、rookies、Foundation など、いくつかの成熟した安定したフレームワークがあります

;

もう 1 つの理由は、Sass について議論している海外の同僚の数が少ないということです。

これらの理由から、問題に遭遇したときに参考資料があり、それを解決するのに役立つ友人がいると、Sass の学習や使用が容易になると思います。

SASS または LESS を使用する必要がありますか? - Da Mo - Zhihu - 2014-07-04

インストール

Sass は Ruby 言語で書かれていますが、この 2 つの構文は Ruby 言語とは何の関係もありません。 Ruby を理解していなくても、使用できます。ただし、最初に Ruby をインストールしてから、Sass をインストールする必要があります。

ruby のインストール

まず、公式 Web サイトから Ruby をダウンロードしてインストールします。インストールする際は、「Ruby 実行可能ファイルを PATH に追加」オプションをチェックしてください。そうしないと、今後コンパイルされたソフトウェアを使用するときに、 Ruby 環境が見つからないというメッセージが表示されます。

ダウンロード - 公式ウェブサイト

sass インストール

ruby をインストールしたら、スタート メニューでインストールしたばかりの Ruby を見つけ、Ruby でコマンド プロンプトを起動します

そしてコマンドに直接入力します行:

gem install sass

Enter キーを押して確認します。しばらく待つと、Sass が正常にインストールされたことが確認されます (壁のせいでインストールが失敗する場合は、以下を参照して Taobao RubyGems ミラーを使用して Sass をインストールしてください)。

淘宝網 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

Compile

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 に特定のファイルまたはディレクトリを監視させ、ソース ファイルが変更されるとコンパイルされたバージョンを自動的に生成することもできます。

すごいです

Sass コンパイル - W3CPlus

Sass の公式 Web サイトでは、さまざまなクリティカルなファイルを簡単に実行できるオンライン コンバーターも提供しています。

SassMeister | The Sass Playground!

基本構文

1. 変数

変数は、統合された変更とメンテナンスを容易にするために Sass で定義できます。

sass --style compressed test.scss test.min.css

2. ネスト

Sass は階層関係を表現するためにセレクターをネストできます。

// 监听文件// input.scss : scss文件// output.css : 编译后的css文件sass --watch input.scss:output.css// 监听目录 // sassFileDirectory : sass文件目录// cssFileDirectory : 编译后的css文件目录sass --watch sassFileDirectory:cssFileDirectory

3. インポート

Sass 他の Sass ファイルをインポートすると、それらは最終的に CSS ファイルにコンパイルされます。これは、純粋な CSS @import よりも優れています。

//sass style//-----------------------------------$gray: #666;body {  background-color: $gray;}//css style//-----------------------------------body {  background-color: #666; }

4.mixin

Mixin は Sass でいくつかのコード スニペットを定義するために使用でき、将来のニーズに応じて呼び出しを容易にするためにパラメーターを渡すことができます。 CSS 3 プレフィックスの互換性の処理が簡単かつ便利になりました。

//sass style//-----------------------------------ul {        li {        display: inline-block;    }}//css style//-----------------------------------ul li {  display: inline-block; }

5. 拡張/継承

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; }

6. 演算

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; }

7. カラー

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; }

8. コメント

Sass には 2 つのコメント スタイルがあります。

標準 CSS コメント /* comment */、コンパイル済みファイルに保持されます

• 単一行コメント // コメント、SASS ソースファイルにのみ保持され、コンパイル後に省略されます。

• ヒント: /* の後に感嘆符を追加して、これが「重要なコメント」であることを示します。圧縮モードでコンパイルした場合でも、このコメント行は保持されます。
通常、著作権を主張するために使用できます

。

//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 プロジェクト ファイル構造の管理

CSS プリプロセッサの機能の 1 つは、パフォーマンスに影響を与えることなくコードを多数のファイルに分割できることです。これはすべて Sass の @import コマンドのおかげで、開発環境で呼び出している限り、どれだけ多くのファイルを呼び出しても、最終的には CSS スタイル ファイルがコンパイルされます。

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 コンポーネントを書く- SegmentFault

Sass を使用して OOCSS を作成する - SegmentFault

以上、フィードバックをお願いします。