1. ミックスイン.scss// 色定義の指定 $color-background : #FFFFFF; 背景色をrgba(0, 0, 0, 0.3); $color-highlight-background : #333; $color-ダイアログの背景: #666; $color-theme : #ffcd32; $color-theme-d : rgba(255, 205, 49, 0.5); $colorサブテーマ: #d93f30; カラーテキストの色はrgba(255, 255, 255, 0.3); $color-text-l : rgba(255, 255, 255, 0.5); $color-text-ll : rgba(255, 255, 255, 0.8); $フォントグレー: #999; //フォント定義仕様 $font-size-small-s : 10px; $font-size-small : 12px; $font-size-medium : 14px; $font-size-medium-x : 16px; $font-size-large: 18px; $font-size-large-x : 22px; フォントの太さ: 600; 本文、html{ //背景: rgb(239, 242, 249); } //背景画像 100% @mixin bkgMaxSize($url) { 背景画像: url($url); 背景繰り返し: 繰り返しなし; 背景サイズ: 100% 100%; } @mixin フォント設定グループ($font-size、$font-family、$font-weight、$color、$line-height){ フォントサイズ: $font-size; フォントファミリ: $font-family; フォントの太さ: $font-weight; 色: $color; 行の高さ: $line-height; } // 境界線の半径 @mixin borderRadius($radius) { -webkit-border-radius: $radius; 半径: $radius; -ms-border-radius: $radius; -o-境界半径: $半径; 境界線の半径: $radius; } //中央に上下左右に配置する @mixin positionCenter { 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate(-50%, -50%); } // 上下中央に配置する @mixin ct { 位置: 絶対; 上位: 50%; 変換: translateY(-50%); } // 左と右の中央を配置 @mixin cl { 位置: 絶対; 左: 50%; 変換: translateX(-50%); } // フルスクリーンの配置 @mixin allcover { 位置: 絶対; 上: 0; 右: 0; } //相対的な位置指定 @mixin my-absolute($left, $top,$z) { 位置: 絶対; Zインデックス: $z; 左マージン: $left; 上マージン: $top; } //幅と高さが異なる @mixin widthHeightN($width, $height){ 幅: $width; 高さ: $height; } //幅と高さは同じ @mixin widthHeightY($number){ 幅: $number; 高さ: $number; } //フォントサイズ、色 @mixin sizeColor($size, $color){ フォントサイズ: $size; 色: $color; } //フレックスレイアウト @mixin center_none{ ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } @mixin センター_センター{ ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } @mixin flex-start_center{ ディスプレイ: フレックス; コンテンツの配置: flex-start; アイテムの位置を中央揃えにします。 } @mixin スペース間の中央{ ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; アイテムの位置を中央揃えにします。 } @mixin スペースアラウンド_センター{ ディスプレイ: フレックス; コンテンツの両端揃え: スペースを空ける; アイテムの位置を中央揃えにします。 } @mixin flex-end_center{ ディスプレイ: フレックス; コンテンツの端揃え: flex-end; アイテムの位置を中央揃えにします。 } @mixin wrap_flex-start{ ディスプレイ: フレックス; flex-wrap:ラップ; align-content:flex-start; } @mixin flex-start_column{ ディスプレイ: フレックス; コンテンツの配置: flex-start; flex-direction: 列; } @mixin none_center_column{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 flex-direction: 列; } @mixin センターセンター列{ ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの配置: flex-start; flex-direction: 列; } このファイルはグローバルにカプセル化された 2. 単一ファイルの使用3. グローバルマウント3.1 依存関係のインポートnpm で sass-resources-loader をインストールします 設定を追加します: モジュール.エクスポート = { outputDir: 'mbb',/*出力ディレクトリ*/ publicPath: '/',/*アクセスプレフィックス*/ lintOnSave: false, // Eslint検出をオフにする chainWebpack: config => { 定数 oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(アイテム => { アイテム .use('sass-resources-loader') .loader('sass-resources-loader') .オプション({ // リソースを含むファイルへのパスを指定します // 共有リソースとなる SCSS のパス: 'src/assets/stylus/mixin.scss' }) 。終わり() }) } } チェーンWebpackチャンク 3.2 プロジェクトを再開するこれで、vue の scss (mixin) のグローバル導入に関するこの記事は終了です。vue の scss のグローバル導入に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決
目次1. ページレンダリング2. タグを切り替える3. タグを削除するこのようなタグはどのように記述...
目次序文動的プロパティとは何ですか?値のコピー値の種類を決定する要約する序文これは JavaScri...
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...
1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...
第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...
XHTML を書くには、明確な HTML 構文が必要です。 XHTMLを書くには、きれいなHTML構...
3 つのテーブルが接続されています。テーブル A のフィールド a はテーブル B のフィールド b...
背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...
HTMLを学ぶとき、画像タグ<img>は画像を導入します <img src=&qu...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...
最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...
私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...
目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...
1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...