Sass to CSS 変換
Sass・SCSSをオンラインでCSSにコンパイル。展開・圧縮出力、エラー行表示、変数・ミックスイン・ネストに完全対応したリアルタイム変換です。
SassとSCSSの違いは何ですか？
SCSSは波括弧とセミコロンを使うCSSに近い新しい構文です。Sass（インデント構文）はインデントと改行で代用します。このツールは両方に対応しており、ドロップダウンで構文を選ぶだけです。
どのSass機能に対応していますか？
コンパイラは公式のDart Sassエンジンを使用しており、変数・ネスト・ミックスイン・@include・関数・@use・@extend、@ifや@eachなどの制御ディレクティブ、圧縮出力スタイルにすべて対応しています。
圧縮（minify）したCSSを得るには？
コンパイル前に出力スタイルを「圧縮」に切り替えてください。空白と末尾のセミコロンが取り除かれ、最小サイズのスタイルシートが生成されます。
エラーに行番号が表示されるのはなぜ？
構文エラーがあると、Sassエンジンが解析に失敗した正確な行と列を報告し、ツールが出力の上に表示します。すばやく修正できます。
Sassコードはサーバーにアップロードされますか？
いいえ。Dart Sassエンジン全体がページに同梱され、ブラウザ内でローカルにコンパイルします。スタイルシートが端末の外に出ることはないため、非公開のプロジェクトでも安全に使えます。
ローカルファイルの@importはコンパイルできますか？
できません。コンパイラはメモリ上の単一コード断片を対象とし、ファイルシステムにはアクセスしないため、ファイルベースの@importや外部パーシャルの@useは解決できません。
オフラインで使えますか？
はい。ページとコンパイラを一度読み込めば、コンパイルは完全に手元のマシンで行われ、接続は不要です。
結果はどう使えばいいですか？
出力下のボタンでコンパイル済みCSSをコピーするか、style.cssとしてダウンロードし、HTMLで読み込むかプロジェクトのスタイルシートに貼り付けてください。
Sass to CSS 変換の使い方
このコンパイラは公式の Dart Sass エンジンを完全にブラウザ内で実行します。SCSS やインデント構文の Sass を貼り付ければ、変数・ミックスイン・ネスト・関数をすべてサポートしたクリーンな CSS が即座に得られます。データのアップロードは一切ありません。
- Sass または SCSS を入力ボックスに貼り付けるか、「サンプル」を押して変数とミックスインを含む動作デモを読み込みます。
- ドロップダウンで構文（SCSS またはインデントの Sass）と出力スタイル（展開または圧縮）を選びます。
- 「ライブ コンパイル」が有効なら入力と同時に CSS が現れます。オフの場合は「コンパイル」ボタンで手動実行します。
- 構文エラーがあるときは、出力の上に正確な行番号とメッセージが表示されるので素早く直せます。
- 出力下の「コピー」または「ダウンロード」で、コンパイル済みのスタイルシートを style.css として取得します。
出力スタイルを「圧縮」にするとスタイルシートをミニファイできます。ソースからそのまま本番用ビルドを作るのに便利です。
関連ツール
- CSSビューティファイアー CSSコードを即座にフォーマット・美化します。圧縮されたCSSを読みやすく、適切にインデントされたコードに変換します。カスタマイズ可能なオプション付き。
- CSS圧縮ツール 無料オンラインCSS圧縮ツール。空白、コメント、不要な文字を削除してCSSコードを即座に圧縮・最適化。ファイルサイズを削減し、ウェブパフォーマンスを向上させます。
- CSSグラデーションジェネレーター ビジュアルに素晴らしいCSSグラデーションを作成。複数のカラーストップ、カスタム角度、位置で線形・放射・円錐グラデーションを生成。本番対応CSSコードを即座にコピー。
- CSS Flexboxジェネレーター ライブプレビュー付きビジュアルCSS Flexboxジェネレーター。Flexプロパティを調整してすぐに使えるCSSコードを取得。
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- HTTPリクエストテスター ブラウザで直接REST APIをテスト。カスタムヘッダー、ボディ、クエリパラメータでGET、POST、PUT、DELETEリクエストを送信。レスポンスのステータス、ヘッダー、JSONボディを即座に確認。
- .htaccessジェネレーター Apache .htaccessルールを生成します。リダイレクト、リライト、セキュリティヘッダー、キャッシュなど。