CSS متغیر

CSS متغیر

var() ਫੰਕਸ਼ਨ ਦੀ ਸਿਫ਼ਾਰਸ਼

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

CSS ਵਰਗੇ ਮਿਸ਼ਰਣ ਦਾ ਇੱਕ ਚੰਗਾ ਤਰੀਕਾ ਹੈ ਕਿ ਰੰਗ ਨਾਮ ਨਾਮ ਵਿੱਚ ਰੰਗਾਂ ਦੀ ਡਿਜ਼ਾਇਨ ਨੂੰ ਰੱਖਣਾ। ਤੁਸੀਂ ਇਹ ਵਰਗੇ ਮਿਸ਼ਰਣ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ, ਨਾ ਤਾਂ ਇਸ ਨੂੰ ਬਾਰ-ਬਾਰ ਕਾਪੀ ਕਰਕੇ ਚੇਪੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਰਸਮੀ ਤਰੀਕਾ

ਉਦਾਹਰਣ

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਇਸ ਵਿੱਚ ਕੁਝ ਰੰਗਾਂ ਦੇ ਰਸਮੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ (ਚੋਣਕਰਤਾ ਵਿੱਚ ਹਰ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਲਈ ਰੰਗ ਨਾਮ ਨਾਮ ਵਰਤਣ ਦੇ ਰਸਮੀ ਤਰੀਕੇ):
body { background-color: #1e90ff; }
.کنٹینر {
  background-color: #ffffff;
  h2 { border-bottom: 2px solid #1e90ff; }
  پیدائش: 15px;
}
بٹن {
  h2 { border-bottom: 2px solid #1e90ff; }
  background-color: #ffffff;
  color: #1e90ff;
  پیدائش: 5px;
}

خود کو بچاؤ

border: 1px solid #1e90ff;

var() ਫੰਕਸ਼ਨ ਦੀ ਸਿਫ਼ਾਰਸ਼

var() ਫੰਕਸ਼ਨ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਹੈ ਕਿ ਵਰਗੇ ਮਿਸ਼ਰਣ ਦੇ ਮੁੱਲ ਚੁੱਕਣ ਲਈ。

var(name, value)
ਮੁੱਲ مقصد
name ਲਾਜ਼ਮੀ। ਵਰਗੇ ਮਿਸ਼ਰਣ ਦਾ ਨਾਮ (ਦੋ ਵਿਰੰਜਿਤ ਖਾਟਾ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ)
value ਵਿਕਲਪਿਤ ਮੁੱਲ (ਜਦੋਂ ਵਰਗੇ ਮਿਸ਼ਰਣ ਨਾਮ ਨਹੀਂ ਮਿਲਦਾ ਤਾਂ ਇਸ ਦਾ ਉਪਯੋਗ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)

ਟਿੱਪਣੀ:ਵਰਗੇ ਮਿਸ਼ਰਣ ਦਾ ਨਾਮ ਦੋ ਵਿਰੰਜਿਤ ਖਾਟਾ (--) ਨਾਲ ਸ਼ੁਰੂ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਉਹ ਅੰਕੜਾ ਵੱਖ-ਵੱਖ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ!

var() ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਪਹਿਲਾਂ: CSS ਵਰਗੇ ਮਿਸ਼ਰਣ ਦੇ ਗਲੋਬਲ ਜਾਂ ਸਥਾਨਕ ਦਾਇਰਾ ਹੁੰਦੇ ਹਨ。

ਗਲੋਬਲ ਵਰਗੇ ਮਿਸ਼ਰਣ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ/ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਦਕਿ ਸਥਾਨਕ ਵਰਗੇ ਮਿਸ਼ਰਣ ਸਿਰਫ਼ ਉਸ ਚੋਣਕਰਤਾ ਵਿੱਚ ਹੀ ਪਹੁੰਚਿਆ ਜਾ ਸਕਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਇਸ ਨੂੰ ਐਲਾਨ ਕੀਤਾ ਗਿਆ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਗਲੋਬਲ ਵਰਗੇ ਮਿਸ਼ਰਣ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ :root ਚੋਣਕਰਤਾ ਵਿੱਚ ਇਸ ਨੂੰ ਐਲਾਨ ਕਰੋ। :root ਚੋਣਕਰਤਾ ਦਾਇਰਾ ਦਾ ਮੂਲ ਤੱਤ ਹੈ。

ਜੇਕਰ ਤੁਸੀਂ ਸਥਾਨਕ ਵਰਗੇ ਮਿਸ਼ਰਣ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਉਸ ਚੋਣਕਰਤਾ ਵਿੱਚ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਉਸ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਉਥੇ ਇਸ ਨੂੰ ਐਲਾਨ ਕਰੋ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ ਉੱਪਰ ਦੇ ਉਦਾਹਰਣ ਨਾਲ ਇੱਕ ਸਮਾਨ ਹੈ, ਪਰ ਇੱਥੇ ਅਸੀਂ var() ਫੰਕਸ਼ਨ ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹਾਂ。

ਪਹਿਲਾਂ, ਅਸੀਂ ਦੋ ਗਲੋਬਲ ਵਰਗੇ ਮਿਸ਼ਰਣ (--blue ਅਤੇ --white) ਐਲਾਨ ਕਰਦੇ ਹਾਂ। ਫਿਰ, ਅਸੀਂ var() ਫੰਕਸ਼ਨ ਦੀ ਮਦਦ ਨਾਲ ਬਾਅਦ ਵਿੱਚ ਸਟਾਈਲ ਸ਼ੇਅਰ ਵਿੱਚ ਵਰਗੇ ਮਿਸ਼ਰਣ ਦੇ ਮੁੱਲ ਚੁੱਕਦੇ ਹਾਂ:

ਉਦਾਹਰਣ

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { بوردر بوتوم: 2px سولڈ var(--blue); }
.کنٹینر {
  رنگ: var(--blue);
  بگرون رنگ: var(--white);
  پیدائش: 15px;
}
بٹن {
  بگرون رنگ: var(--white);
  رنگ: var(--blue);
  بوردر: 1px سولڈ var(--blue);
  پیدائش: 5px;
}

خود کو بچاؤ

var() ਦੇ ਉਪਯੋਗ ਦੇ ਲਾਭ ਹਨ:

  • ਕੋਡ ਨੂੰ ਹੋਰ ਪੜ੍ਹਣ ਯੋਗ ਬਣਾਉਣਾ (ਹੋਰ ਸਮਝਦਾਰ ਬਣਾਉਣਾ)
  • ਰੰਗ ਮੁੱਲ ਸੰਸ਼ੋਧਤ ਕਰਨਾ ਹੋਰ ਅਸਾਨ ਬਣਾਉਣਾ

ਜੇਕਰ ਤੁਸੀਂ ਨੀਲਾ ਅਤੇ ਸਫੇਦ ਨੂੰ ਹੋਰ ਨਿਸ਼ਾਨਦਾਜ਼ ਨੀਲਾ ਅਤੇ ਸਫੇਦ ਵਿੱਚ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਦੋ ਵਰਗੇ ਮਿਸ਼ਰਣ ਸੰਸ਼ੋਧਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ:

ਉਦਾਹਰਣ

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { بوردر بوتوم: 2px سولڈ var(--blue); }
.کنٹینر {
  رنگ: var(--blue);
  بگرون رنگ: var(--white);
  پیدائش: 15px;
}
بٹن {
  بگرون رنگ: var(--white);
  رنگ: var(--blue);
  بوردر: 1px سولڈ var(--blue);
  پیدائش: 5px;
}

خود کو بچاؤ

بروسر سپورٹ

جس میں شامل ہونے والی اعداد، اس کا پورا سپورٹ کرنے والا پہلا بروزر کا نام دیکھیں。

فنکشن
var() 49.0 15.0 31.0 9.1 36.0

CSS var() فنکشن

فنکشن مقصد
var() CSS متغیر کا کا اقدار داخل کریں。