CSSで変数を定義して使用する方法

醉折花枝作酒筹
リリース: 2023-01-06 11:16:08
オリジナル
6837 人が閲覧しました

CSS のネイティブ変数定義構文は「--*」、変数使用構文は「var(--*)」です。ここで、* は変数名を表します。 CSS 変数には、「$」、「[」、「^」、「(」、「%」などの文字を含めることはできません。通常の文字は「数字」、「文字」、「下線」、「ダッシュ」のみ必要です。 .

CSSで変数を定義して使用する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター

CSS のネイティブ変数定義構文は: --*、変数を使用するための構文は次のとおりです: var(--*); * は変数名を表します;

vue プロジェクトで CSS グローバル変数を定義する場合:

1、まず、アセット ディレクトリの .css ファイルに新しいインデックスを作成します: (

:root ドキュメントのルート要素。これは、カスタム属性を配置するのに適した場所です。これは、他の個別の特別なスタイルの選択性)

2、次に main.js ファイルに導入します:

3、使用: .vue ファイルのスタイル内 使用:

background:var(--baseBackground);
ログイン後にコピー

詳細な紹介:

css中定义变量

定义变量可分多种情况:
1、定义全局变量
:root {
  --borderColor: #ccc;
}
使用:width:var(--borderColor);

2、定义某元素下的变量
.look{
  --borderColor: #ccc;
}

3、定义媒体查询下的变量
@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
   }
}
使用:
.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}

less中定义变量
定义:
@bg-color : #d9d9d9;
使用:
.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}

sass中定义变量
定义:
$bg-color : #d9d9d9;
使用:
.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}
ログイン後にコピー

推奨学習: css ビデオ チュートリアル

以上がCSSで変数を定義して使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!