ホームページ > 記事 > ウェブフロントエンド > vue がプロジェクトを作成するとき、sass は何を意味しますか?
プロジェクトの作成時に vue で使用される sass は、css 補助ツールを強化するためのものであり、css の拡張機能です。sass は buby 言語で書かれた CSS 前処理言語であり、 html と同じ厳密なインデント スタイルを持ちます。 CSSの記述仕様と異なり、中括弧やセミコロンは使用されません。
このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。
Sass (Syntactical Awesome StyleSheets) は、buby 言語で書かれた CSS 前処理言語です。HTML と同じ厳密なインデント スタイルを持っています。 CSS の記述仕様とは大きく異なり、中括弧やセミコロンを使用しないため、広く受け入れられていません。
Sass は CSS を拡張するための補助ツールです。CSS の拡張機能です。変数、ネストされたルール、ミックスイン、継承 (拡張)、インポート (インライン インポート) などの高度な機能が追加され、これらの拡張機能により CSS が作成されますよりパワフルに、よりエレガントに。 Sass および Sass スタイル ライブラリ (Compass など) を使用すると、スタイル ファイルをより適切に整理および管理し、プロジェクトをより効率的に開発できます。
// deom.sass #sidebar width: 30% background-color: #faa
知識の拡大:
vue-cli3 は sass/scss を統合する 2 つの方法を提供します
プロジェクト作成時に選択してくださいプリプロセッサ sass
sass-loader を手動でインストールする
##方法 1: vue プロジェクトの作成時にプリプロセッサ sass## を選択します #vue-cli3 を使用して vue プロジェクトを作成します
Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features
上下キーを移動して「機能を手動で選択」を選択します。これは、作成したプロジェクトの構成を手動で選択することを意味します。
Enter キーを押して次のステップに入ります。表示は次のようになります:
? Check the features needed for your project: (*) Choose Vue version (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex >(*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
上下キーを移動し、CSS プリプロセッサーでスペースバーをクリックして選択し、 CSS 前処理ツールが必要であることを示します。
その後、css 前処理ツールの操作を実行すると、次のように表示されます。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) > Sass/SCSS (with node-sass) Less Stylus
CSS プリプロセッサとして Sass/SCSS (node-sass を使用) を選択します。
完了後、プロジェクトは sass-loader と node-sass の依存関係を自動的にインストールします。
方法 2: 手動インストールプロジェクトの作成時に CSS プリプロセッサが選択されていない場合は、sass-loader と node-sass を手動でインストールして scss を統合することもできます。
npm install -D sass-loader node-sass
sass の使用
この時点で必要なのは、スタイルで lang を scss として指定することだけです:
<style> $color = red; </style>
vue サービス clie は、scss としてインストールした sass-loader を自動的に使用します。コンテンツローダー。
[関連する推奨事項:「
vue.js チュートリアル以上がvue がプロジェクトを作成するとき、sass は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。