広告が嫌いですか? 行く広告なし今日 

SCSS / Sass フォーマッター＆ビューティファイア

開発者文章

広告・取り除く？

入力

自動処理

出力

クライアント側

広告・取り除く？

ガイド

SCSS / Sass フォーマッター＆ビューティファイア

SCSSコードを即座にフォーマットおよび美化します。乱雑または圧縮されたスタイルシートを貼り付けると、正しいネスト、一貫したスペース、整理されたat-rulesを備えた、クリーンで適切にインデントされた出力が得られます。展開、コンパクト、圧縮された出力モードをサポートしています。

使い方

SCSSコードを入力エリアに貼り付けます。好みのインデントサイズ、出力形式、ブレーススタイルを選択してください。フォーマットされたコードは出力パネルで即座に更新されます。ワンクリックでコピーできます。読みやすい出力か、本番環境向けの出力かによって、展開、コンパクト、圧縮モードを切り替えます。

特徴

SCSSネストサポート – 深くネストされたセレクタ、親セレクタ ("&")、および次のようなネストされたat-rulesを正しくフォーマットします。 @media そして @supports.
変数 & ミックスイン処理 – SCSS変数 ("$variable), @mixin, @include, @extend, @use、そして @forward ") ディレクティブを正しくフォーマットします。
3つの出力モード – 展開 (1行に1宣言、完全に読みやすい)、コンパクト (1行に1ルール)、および圧縮 (本番用にすべての空白を削除)。
設定可能なインデント – 2スペース、4スペース、またはタブから選択します。
ブレーススタイルオプション – 同じ行または次の行に開始ブレースを配置します。
空白正規化 – コロンの後、ブレースの前、およびルールブロック間の、一貫したスペース。
リアルタイムフォーマット – 入力時またはオプションを変更したときに、出力が即座に更新されます。

このツールを使用するタイミング

コードレビューのためにSCSSスタイルシートをクリーンアップするとき、圧縮されたCSSを読みやすいSCSSに戻すとき、またはプロジェクトのスタイルファイル全体でインデントを標準化するときに、このツールを使用してください。特に、展開形式と圧縮形式の間で変換する場合や、ドキュメントやチュートリアル用にSCSSスニペットをすばやく美化する場合に役立ちます。

広告・取り除く？

 よくある質問

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

SCSS (Sassy CSS) と Sass は、同じプリプロセッサの2つの構文です。SCSS は通常の CSS と同様に波括弧とセミコロンを使用します。有効な CSS はすべて有効な SCSS です。インデントされた Sass 構文は、波括弧の代わりにインデントを、セミコロンの代わりに改行を使用します。SCSS は CSS 開発者にとって馴染みやすく、段階的に採用しやすいため、はるかに人気があります。ほとんどの最新プロジェクトでは、.scss ファイル拡張子が使用されています。
SCSS変数とは何ですか？また、なぜそれらを使用するのですか？

SCSS変数 ($) は、色、フォントサイズ、スペース、ブレークポイントなどの再利用可能な値を格納します。たとえば、$primary-color: #3498db; を使用すると、スタイルシート全体で同じ色を参照し、1か所で変更できます。CSSカスタムプロパティ (--variable) が現在ネイティブで同様の機能を提供していますが、SCSS変数は、セレクタでの補間や数学演算などのより強力な機能を実現するコンパイル時の値です。
SCSSネストとは何ですか？いつ使用すべきですか？

SCSSネストを使用すると、HTML構造を反映して、子セレクタを親セレクタ内に記述できます。たとえば、.nav { .item { color: blue; } } は .nav .item { color: blue; } にコンパイルされます。ネストは関連するスタイルの可読性を向上させますが、過度のネスト (3〜4レベル以上) は、オーバーライドが困難な過度に具体的なセレクタを作成します。一般的なルール: 構造のためにネストし、すべての親子関係のためにネストするわけではありません。
SCSSの@mixinと@extendの違いは何ですか？

@mixin は、@include されるたびにコピーされる CSS の再利用可能なブロックを作成します。CSS を出力する関数のようです。@extend は、拡張セレクタを元のルールに追加することでセレクタのスタイルを共有します。コードを複製するのではなく、セレクタをグループ化します。パラメータが必要な場合や、使用ごとにスタイルが異なる場合は @mixin を使用します。単純なスタイル継承で、最小限の CSS 出力を実現したい場合は @extend を使用します。@extend を使いすぎると、予期しないセレクタチェーンが作成される可能性があります。