[CSSチュートリアル】CSSスタイルをプログラムで処理するサンプルコード
2022-02-03 14:50:09
プログラマティック・アプローチのメリット
1. スタイルの散乱を避けるためのグローバルコントロール
2. クリーンコード、高速開発 関数型プログラミングは、多くの関数を使用し、コードの繰り返しを減らすので、プログラムは短く、高速開発です
3. 自然言語に近い、理解しやすい 関数型プログラミングは非常に自由で、コードの自然言語に近いものを書くことができる
4. コード管理が容易
5. 文体がアートになる
少ない
悪い
.card-title {
font: "PingFang-SC-medium";
color: #333;
font-size: 18px;
}
.card-title {
font: "PingFang-SC-regular";
font-size: 14px;
color: #333;
}
良い
// Declare the less function
.mixin-font-class(@fontColor: yellow; @fontSize; @fontFamily) {
font-family: @fontFamily;
font-size: @fontSize;
color: @fontColor;
}
適用する
h6 {
.mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");
}
h2{
.mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");
}
グローバルレス
Vue-cliのパターンでは
// Add the global less
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
resolve('. /src/less/theme.less')
]
}
},
// Use in any component or less file
<style lang="less" scoped>
.breadTop {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 15px;
h6 {
.mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");
}
h2{
.mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");
}
}
</style>
scss
$font-normal-color = #222;
$font-light-color = #333;
@mixin font-class($fontFamily, $fontSize, $fontColor) {
font-family: $fontFamily;
font-size: $fontSize;
color: $fontColor;
}
@mixin font-large($size: 14px, $color: $font-normal-color) {
@include font-class($font-family-medium, $size, $color);
}
@mixin font-normal($size: 14px, $color: $font-light-color) {
@include font-class($font-family-regular, $size, $color);
}
を使用しています。
.form-title {
@include font-large(16px, red);
}
.form-text {
@include font-large(12px, blue);
}
less関数は引数に@を使用し、scssは$を使用することに注意してください。
以上でプログラムCSSスタイルについての記事を終わります。プログラムによるCSSスタイルの詳細については、Script Houseの過去の記事を検索するか、以下の記事を引き続き閲覧してください。
関連
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[css3]Webコードのグレーまたはブラックモードを実現するCSS3フィルター(filter)
-
[ブラウザ互換性チュートリアル】クロスドメイン実装を可能にする新版chromeブラウザの設定について
-
[CSSチュートリアル】テーブルの最大幅と最小幅の相性問題と解決策を解説
-
[CSSチュートリアル】Display, Visibility, Opacity, rgba, z-indexのcss。-1差分
-
[css3]シンプルな白い雲の浮かぶ背景効果を実現するcss3
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る
-
[CSSチュートリアル】display:olck/noneでメニューバーを完成させる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[CSSチュートリアル】CSS3で3つの効果例の背景をぼかす。
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[css3] 翻訳効果のあるcss3例(翻訳:translate)