この記事では、CSSワークフローを合理化するために、CSSプリプロセッサであるSASSの力を調査します。 現在の情報と改善されたフォーマットで更新されています。
sass:css革命 SASSは、変数、ネスト、ミキシンなどの機能を備えたCSSを強化し、スタイルシートをより管理しやすく動的にします。 2つの構文を提供します:元のインデントされた構文(簡潔さのため)とよりCSSのような
(より広く採用されている)。 この記事では、。.scss
に焦点を当てています
.scss
を使用するのか SASSは、大規模でアクティブなコミュニティと拡張の豊富なエコシステムを誇っています。 そのモジュール性と組織の能力は、大規模なプロジェクトを簡素化します。 インデントされた構文と
の選択は、好みの問題です。 CSSとの類似性は、初心者にとって簡単になります.scss
ワークフローとツール.scss
ファイルを直接編集しないでください。代わりに、CSSにコンパイルされたファイルを変更します。 これは、ビルドプロセス中に自動化するか、Livereload、CodeKit(Macのみ)、Prepros(クロスプラットフォーム)などのGUIツールを使用できます。これらのツールは、変更を保存するときにSASSを自動的に再コンパイルし、ブラウザを更新してすぐにフィードバックします。
SASSコーディングエッセンシャル.css
.scss
ネスティング:sassは、HTML構造をミラーリングして、ネスティングセレクターを許可します。 ただし、過度に深いネスト(4つ以上のレベル)を避けて、過度に特定のセレクターを防止してください。再利用性のためにモジュラーコードに優先順位を付けます。
-
変数:
を使用して変数を定義して、スタイル設定を一元化します。 これにより、更新が簡素化され、一貫性が維持されます -
関数と演算子:SASSは、標準的な数学演算子と、色の操作、テキスト処理などのための組み込み関数をサポートしています。
$variable-name: value;
- ミキシン:
を使用して再利用可能なスタイルのブロックを作成し、に含めます。これは、ベンダーのプレフィックスまたは一般的なスタイルのパターンを処理するのに特に便利です。
例:sassネスティング(良い対悪い)
@mixin mixin-name { ... }
@include mixin-name;
良い:
悪い(過度にネストされた):
例:sass変数
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } }
例:SASS MIXIN(ベンダープレフィックス)
div#main { #sidebar { #navbar { /* Avoid this level of nesting */ // ... } } }
sassプロジェクトの整理
$site-max-width: 960px; $font-color: #333; body { color: $font-color; } #main { max-width: $site-max-width; }
複数のファイルを使用して、それらをフォルダーに整理します。アンダースコア()を使用した部分的なファイル(スニペット)をプレフィックスします。 これらの部分的な部分をメイン。
例:style.scss
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } }
コンパスでsassを拡張
コンパスは、SASS上に構築された強力なフレームワークであり、追加のミキシン、ユーティリティ(スプライトジェネレーションなど)などを提供します。 config.rb
ファイルを使用して構成します。
スプライトコンパスはスプライト管理を簡素化します。画像をフォルダに整理します。
を使用してそれらをインポートし、または個々のスプライト関数を使用してCSSクラスを生成します。
@import "images/*.png";
@include all-icons-sprites;
例:コンパススプライト生成
これにより、
フォルダーの各画像のCSSクラスが生成されます。div#main { #sidebar { #navbar { /* Avoid this level of nesting */ // ... } } }
images/icons
結論
SASSはCSSワークフローを大幅に改善します。 今日それを使用して、より効率的で保守可能で、楽しいCSSを書きます。
faqssass vs. scss:
- SCSSはCSSのような構文(ブラケット、セミコロン)を使用し、元のSASSはインデントを使用します。 通常、SCSSが推奨されます。
-
- を使用します
npm install -g sass
コンピレーション: を使用するか、 - オプションを使用します。
sass input.scss output.css
(残りのFAQは元のテキストで直接回答され、簡潔にするためにここで繰り返されません。)
以上がSASSを始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

ホットトピック









