CSS プリプロセッサ sass の使用に関するチュートリアル (複数の画像の警告)

CSS プリプロセッサは、変数、関数、操作、継承、ネストなどの CSS 動的言語機能を提供し、スタイル ファイルをより適切に整理および管理し、プロジェクトをより効率的に開発するのに役立ちます。 CSS プリプロセッサにより、CSS コードの保守と管理がより簡単になり、Web ページ全体がより柔軟で変更可能になります。プリプロセッサに関しては、広く使用されているものは少なく、生々しいものです。ここでは比較することはできません。Sass は Ruby 言語で記述されているため、sass ファイルをコンパイルするには Ruby 環境が必要です。 sass を使用するために Ruby 言語について詳しく知る必要はありません。Ruby 環境をインストールするだけで済みますが、主にノード環境で実行されることは少なく、関数構文は似ています。この記事では主にRubyでのsassの使い方を紹介します。

Rubyのダウンロードとインストール:

1. http://rubyinstaller.org/

にログインします。

2. [ダウンロード] をクリックしてこのページに移動し、64 ビット Windows コンピューターの場合は、矢印で示されたバージョンをダウンロードします。

3. 完了したらすぐにインストールします

「完了」をクリックした後、インストールが完了した場合でも、インストールが成功したかどうかを確認するためにコマンドラインに移動する必要があります。cmd のコマンドラインではなく、ruby コマンドラインに注意してください。

開いたらコマンドラインを入力します:

次に、ruby に sass をインストールします: コマンド gem install sass を入力します

「sass -v」と入力すると、バージョン番号が表示されます。これは、インストールが成功したことを意味します。

ダウンロードとインストールが完了し、環境がセットアップされました。構文と関連する手順を以下に紹介します。

サスの使用。

より多くの人が実際に Sass の使い方を学べるようにするために、まず新しいファイルを作成し、段階的にデモを行いました。

1. デスクトップに sasstest というフォルダーを作成し、その中にサフィックス sass.scss が付いた新しいファイルを作成しました。 (新しいテキストドキュメントを作成した後、名前のサフィックスを sass.scss に変更します)

ここで説明しますが、sass の接尾辞はなぜ scss なのでしょうか?実際、sass には 2 つの文法形式があります。

1 つ目は scss で、これは構文の接尾辞形式です。この形式は CSS3 構文を拡張したものであり、各 CSS スタイル シートが同等の SCSS ファイルであることを意味します。さらに、SCSS は、ほとんどの CSS ハックとブラウザ固有のプレフィックス構文もサポートしています。この構文のスタイル シート ファイルには、拡張子として が必要です。 .scss

もう 1 つの最も古い構文は、インデント構文と呼ばれます。 CSS をより簡潔に記述する方法を提供します。ネストされたセレクターを表すために中括弧の代わりにインデントを使用し、属性を区切るためにセミコロンの代わりに改行を使用します。これは、SCSS よりも読みやすく、書き込みが速いと感じる人もいます。インデント構文には Sass のすべての機能が含まれていますが、構文に若干の違いがあります。 この構文を使用するスタイル シート ファイルには、拡張子として が必要です。 .sass

実際、どの構文が使用されているかに関係なく、任意の構文のファイルを別の構文のファイルに直接インポートして使用することができ、同時に sass-convert コマンドラインを通じて相互に変換することもできます。道具。

これらの違いについては気にする必要はないと思います。最初のものに慣れているので、この記事では常に scss 構文を使用してきました。

2. 2 番目のステップは、もちろん sass.scss を開きます。この記事では、どのエディターでも使用できます。

Sass を実行したい場合は、命令を使用する必要があります。ここでは構文のことは忘れて、CSS にコンパイルできるかどうかを確認してください。

それを入力した後、新しく作成されたフォルダーを確認すると、何もないことがわかりますが、まだ同じです

もちろん、Sass コードを監視して実行していない場合、どうやって変更が加えられるでしょうか? Ruby のコマンドライン ウィンドウを覚えていますか?はい、sass が CSS コードを生成できるように、そこに run コマンドを入力する必要があります。

sass ファイルを実行します: sass input.scss Output.css (左側は Sass 入力ファイルを表し、右側は CSS 出力ファイルを表します)

Sass ファイルを監視するための Sass の手順は次のとおりです:

いわゆるモニタリングとは、sass ファイルが変更されるたびに、それに応じて css ファイルが生成されることを意味します。これは、1 回限りであり、継続的に監視される実行とは異なります。

特定の Sass ファイルを監視します: sass --watch input.scss:output.css (左側は Sass 入力ファイルを表し、右側は CSS 出力ファイルを表します)

フォルダー全体を監視します: sass --watch sass:css (左側は監視フォルダーのパスを表し、右側は出力フォルダーのパスを表します)

次に、scss コードを実行して、生成された CSS を確認します。私が望んでいるのは、簡単に管理できるように、CSS ファイルを保存するための CSS フォルダーを sasstest フォルダーの下に生成することです。

1) 現在のフォルダーを見つけます。デスクトップなのでパスは以下の通りです

注意: プレートを横切る場合は、次のように特定のプレートを直接入力してください:

上記3種類に従って、対応する指示を書きます。

2) 実行: 実行時に css フォルダーを生成できません。この場合、css フォルダーを手動で追加する必要があります。

この例のコマンド:

手順: まず sasstest フォルダーに入り、コマンドを入力します。

結果の写真:

最初のファイルは生成されたキャッシュ ファイルです。CSS として開くと、

が表示されます。

CSS に加えて、マップ ファイルもあります。 Sass ファイルはソース ファイルに相当し、CSS はコンパイルされたファイルに相当します。変更されたのはsassファイル、このマップ 2つのファイル間の対応表です。

2 つのファイルを別々に開きます:

CSSが出てきたのがわかりますが、そのファイルは対応関係表だけなので気にしないでください。

3) ファイルを監視します。図に示すように、フォルダーを初期状態に復元します。

sass.scss ファイル sass --watch sass.scss:csssass.css を監視します。監視により、対応するフォルダーが生成されます。手動で作成する必要はありません。 (この方法で監視できるのは sass.scss という 1 つのファイルだけであることに注意してください。sasstest の下に他の sass ファイルがある場合、それらは監視できません)

効果は同じです:

フォルダーを初期状態に戻し、生成されたフォルダーを削除し、フォルダーを監視するコマンドを試しました。実際、最も実用的なのはフォルダーを監視することです。

フォルダーを監視するには、パスをフォルダーの前のレベル (この記事ではデスクトップ) に戻す必要があります。

さて、操作については以上です。

CSS 出力形式に関して、Sass はネスト、展開、コンパクト、圧縮の 4 つのタイプを提供します。

指示の書き込み:

nested: ネストされた (ネストされた) 形式は、CSS スタイルと HTML ドキュメント構造を反映するため、Sass のデフォルトの出力形式です。各属性は独自の行を占めますが、インデントは固定されていません。各ルールは、ネストの深さに基づいてインデントされます。

展開: 展開された (展開された) 形式は手書きの CSS スタイルに似ており、各属性とルールが独自の行を占めます。ルール内のプロパティはインデントされますが、ルールには特別なインデントはありません。

コンパクト: コンパクト形式は、ネストされた形式または拡張された形式よりも占有するスペースが少なくなります。この形式は、プロパティではなくセレクターに焦点を当てています。各 CSS ルールには独自の行があり、定義された各プロパティも含まれています。ネストされたルールは新しい行で始まり、ネストされていないセレクターは区切り文字として空白行を出力します。

圧縮: 圧縮された (圧縮された) 形式は、ファイルの最後に改行があり、必要な区切り文字セレクターを除いて、基本的に余分なスペースがありません。また、その他の小さな圧縮も含まれます。 、最小の色の表現を選択するなど。つまり可読性が低いということです。

sass 構文:

時間は限られているので、私が実際に使用した文法コードを投稿します:

リーリー

以下はボタンスタイルの制作例です:

リーリー

HTMLで呼び出すだけです。

リーリー

この記事は仕事中にこっそり時間をかけて書きましたが、皆様のお役に立てれば幸いです。なお、転載の際は出典を明記してください。 -------ブログガーデンです

水魚《》です。

Sass 中国語ドキュメント: http://www.css88.com/doc/sass/