作業フローを簡素化:miniwebtoolを検索。
☰
Access Premium Version
ウェブマスターツール
追加
シェア
Email
Facebook
X
LinkedIn
English
Español
Português
日本語
Français
Deutsch
Italiano
Polski
Bahasa Indonesia
ไทย
Tiếng Việt
한국어
Русский
简体中文
繁體中文
関連ツール
crontab式ジェネレーター
CSSコンプレッサー
CSS Flexbox プレイグラウンド
CSS Grid生成ツール
LessからCSSへのコンパイラー
ホームページ
>
ウェブマスターツール
>
SCSSからCSSへのコンパイラー
SCSSからCSSへのコンパイラー
ライブプレビュー、出力フォーマット設定、プリセット、コピー&ダウンロード機能、および実践的なSass構文ガイドを使用して、ブラウザ上でSCSSをCSSに直接コンパイルします。
SCSSからCSSへのコンパイラー
ブラウザ Sass ワークベンチ
SCSSを記述してローカルでコンパイルし、CSSをプレビューして、クリーンなスタイルシートをエクスポートします。
Sassコンパイラを読み込み中
デザイントークン
ボタンシステム
レスポンシブカード
インデントされた Sass
SCSSソース
$brand: #2563eb; $accent: #059669; $surface: #ffffff; $radius: 14px; @mixin soft-shadow($color) { box-shadow: 0 16px 36px rgba($color, 0.16); } .compiler-demo { display: grid; gap: 1rem; padding: 1.25rem; border-radius: $radius; background: $surface; border: 1px solid rgba($brand, 0.18); @include soft-shadow($brand); &__badge { display: inline-flex; width: fit-content; padding: 0.35rem 0.7()rem; border-radius: 999px; color: $accent; background: rgba($accent, 0.1); font-weight: 800; } &__button { border: 0; border-radius: $radius - 4px; color: #ffffff; background: linear-gradient(135deg, $brand, $accent); padding: 0.75rem 1rem; &:hover { transform: translateY(-2px); filter: saturate(1.15); } } } @for $i from 1 through 3 { .compiler-demo__step-#{$i} { animation-delay: #{$i * 80}ms; } }
ヒント: コード部分がローカルファイルに依存している場合は、インポートされるパーシャルを上記コードの上に貼り付けてください。
コンパイルフロー
準備完了
{ }
SCSS入力
⚙
Sassエンジン
CSS
ブラウザ CSS
構文
SCSS(波括弧あり)
Sass(インデント指定)
出力スタイル
Expanded
Nested
Compact
Compressed
ライブコンパイル
編集時に自動的に再コンパイルします。
.scss または .sass ファイルを読み込む
ファイルはブラウザによって読み取られ、エディタに配置されます。
コンパイルライブラリを待機しています。
最初のコンパイルは、Sassエンジンが準備完了した後に開始されます。
SCSSをコンパイル
クリア