متغیرهای سی اس اس

متغیرهای CSS

متغیرهای سی اس اس ورودی هایی هستند که توسط توسعه دهنده تعریف شده و مقادیری را درون خود ذخیره می کنند تا بتوان از آن مقادیر بارها و بارها درون یک سند استفاده کرد.

سایت های بزرگ و پیچیده حجم CSS بالایی دارند که معمولا در این موارد مقادیر ویژگی ها دائما تکرار می شوند. به عنوان مثال یک رنگ خاص می تواند در صد مکان مختلف فایل سی اس اس مورد استفاده قرار بگیرد. حال فرض کنید بخواهیم آن رنگ را که تغییر دهیم باید در تمامی فایل ها و خطوط استایل به دنبال آن مقدار (رنگ) بگردیم و آن را با رنگ جدیدی جایگزین کنیم.

متغیرها جلوی این اتفاق را می گیرند، با استفاده از آنها می توان آن رنگ را در یک مکان ذخیره کرد و از آن به بعد در هرکجا که آن مقدار را لازم داشتیم به آن مکان اشاره کنیم. این یعنی برای تغییر فقط کافی است یک مکان را تغییر دهیم.

فایده دیگر متغیرها معناگرا بودن آنها است. به عنوان نمونه درک main-text-color به مراتب ساده از #03A9F4 می باشد.

چگونه از متغیرها استفاده کنیم؟

هرگونه مقداری از ویژگی های سی اس اس می تواند در یک متغیر ذخیره شود. آن مقدار می تواند یک اندازه، رنگ و حتی یک موقعیت باشد. کافی است نامی برای متغیرمان انتخاب کرده و قبل از نام باید -- را به عنوان پیشوند قرار دهیم. متغیرها نیز مانند تمام ویژگی های سی اس اس برای یک عنصر که توسط یک انتخابگر فراخوانده شده، نوشته می شوند.

مثال:


body {
  --main-color: #7F583F;
}

در بالا متغیری با نام --main-color به وجود آوردیم و رنگ اصلی سایت را درون آن ذخیره کردیم، حال هر زمان که به آن رنگ احتیاج داشته باشیم می توانیم توسط تابع var() به آن متغیر اشاره کرده و در نتیجه از رنگ مورد نظرمان استفاده کنیم. به عنوان نمونه می خواهیم متن تمامی عناصر لینک رنگ اصلی سایت را داشته باشد:


a {
  color: var(--main-color);
}

اگر بعد از استفاده از متغیر به Devtools مرورگر برویم و رنگ عناصر لینک را بررسی کنیم خواهیم دید که مرورگر رنگ را با مقدار #7F583F نمایش نمی دهد بلکه آن را با --main-color معرفی می کند. این یعنی متغیرها نیز مانند تمام ویژگی های سی اس اس در زمان اجرا به حیات خود ادامه می دهند و قابل تغییر هستند!

وقتی از تابع var() استفاده می کنیم می توانیم یک مقدار اختیاری را به عنوان مقدار پیشفرض به این تابع بدهیم.

این کار چه کاربردی دارد؟

اگر متغیر ما تعریف نشده باشد و یا به هر دلیلی در زمان استفاده در دسترس نباشد این مقدار پیشفرض به جای مقدار متغیر برای ویژگی مربوطه تعیین می شود.


color: var(--main-color, #7F583F)

همچنین می توان برای مقدار پیشفرض از یک متغیر دیگر نیز استفاده کرد:


.box {
  padding: var(--box-padding, var(--main-padding));
}

متغیر ها نسبت به حروف کوچک و بزرگ حساس هستند این یعنی متغیر های --header-color و --Header-Color با هم متفاوت هستند.

محدوده یک متغیر و Cascade

مثل متغیرها در زبان های دیگر برنامه نویسی متغیرهای سی اس اس نیز Scope یا محدوده خاص خود را دارند که می توانند در آن محدوده مورد استفاده قرار بگیرند.

در CSS این محدوده با توجه به ساختار عناصر در HTML تعیین می شود. مثلا اگر متغیری را در محدوده عنصر <html> تعریف کنیم با توجه به مفهموم Cascade در سی اس اس آن متغیر برای تمامی عناصر صفحه در دسترس است چرا که تمام عناصر صفحه فرزند عنصر <html> می باشند.

به این نوع متغیرها، متغیرهای سراسری یا Global گفته می شود چرا که در همه جا در دسترس هستند.


html {
  --gutter: 2rem;
}

همچنین می توان با استفاده از انتخابگر root متغیر سراسری تعریف کرد چرا که این انتخابگر به عنصر ریشه یا همان <html> اشاره می کند:


:root {
  --gutter: 2rem;
}

تنها تفاوت انتخابگر html و :root در ارجحیت آنها است. اگر متغیری با استفاده از :root تعریف شود ارجحیت بیشتری دارد و همانطور که می دانیم ارجحیت بیشتر یعنی مقداری که نهایتا اعمال می شود.

حال اگر مثلا برای عنصر پاراگرافی با کلاس .content یک متغیر تعریف کنیم آن متغیر فقط برای عناصر پاراگراف با همان کلاس و فرزندانشان در دسترس خواهند بود یعنی آن متغیر به سمت پایین Cascade می شود. (آبشار به سمت بالا که نداریم دیگه :) پس مسلما پدران این عناصر به این متغیر دسترسی ندارند)


p.content {
  --content-text-color: #333;
}

به این نوع متغیرها که در یک محدوده خاص قابل دسترس هستند متغیرهای محلی یا Local گفته می شود.

HTML زیر را در نظر بگیرید:


global
<div class="enclosing">
  enclosing
  <div class="closure">
    closure
  </div>
</div>

حال فرض کنید با توجه به ساختار عناصر متغیرهایی بصورت زیر تعریف کنیم:


:root {
  --globalVar: 10px;
}

.enclosing {
  --enclosingVar: 20px;
  font-size: var(--closureVar); /* چون این متغیر در این محدوده در دسترس نیست ویژگی اندازه فونت مقدارش تغییر نمی کند */
}

.enclosing .closure {
  --closureVar: 30px;

  /* با توجه به آبشاری بودن سی اس اس و ساختار عناصر در این مثال تمام این متغیر ها در این محدوده در سترس هستند */ 
  font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar));
  /* 60px */
}

انجام عملیات ریاضی بر روی متغیرها

وقتی پای متغیرها به میان می آید انجام عملیات ریاضی رو آنها نیز به دنبالشان خواهد آمد چرا که خیلی از مشکلات را می توان به راحتی حل کرد. در سی اس اس با استفاده از تابع calc این کار امکان پذیر است.


:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

اگر یک متغیر داشته باشیم که بدون واحد است ولی برای استفاده از آن متغیر نیاز داریم که به آن واحد مورد نظرمان را اضافه کنیم، برای این کار نیز می توانیم به صورت زیر از تابع calc استفاده کنیم:


:root{
  --spacer: 10;
}

.box{
  padding: var(--spacer)px 0; /* غلط */
  padding: calc(var(--spacer)*1px) 0; /* درست */
}

تفاوت متغیرهای CSS و متغیرهای پیش پردازنده هایی مثل Sass

زمانی که به تازگی بحث متغیرهای سی اس اس مطرح شده بود خیلی از توسعه دهندگان تصورشان این بود که Sass یا امثال آن متغیر دارند پس نیازی به متغیرهای CSS نیست و اهمیتی ندارند.

اما باید بدانیم که این دو خیلی با هم متفاوت هستند و کارهای بسیاری را می توان از طریق متغیرهای CSS انجام داد که امکان آنها در پیش پردازنده ها وجود ندارد.

متغیرهای سی اس اس در زمان اجرا زنده هستند

در اینجا زنده بودن بدین معنا است که اگر بعد از استفاده از متغیر، مقدار آن را تغییر دهیم این تغییر بر روی ویژگی که از متغیر استفاده کرده است نیز اعمال می شود.

کد زیر را در نظر بگیرید:


.element {
  --text-size: 30px;

  font-size: var(--text-size); /* 50px */

  --text-size: 50px;
}

همانطور که مشاهده می کنید بعد از اینکه متغیر مورد استفاده قرار گرفته به مقدار 50 تغییر کرده است اما با این وجود اندازه ویژگی font-size به مقدار 50 پیکسل به روز می شود.

اما اگر همچین کاری در پیش پردازنده ها انجام شود مقدار نهایی اندازه فونت 30 پیکسل خواهد بود این بدین دلیل است که متغیرهای سی اس اس در زمان اجرا زنده هستند.

متغیرهای سی اس اس نسبت به ساختار HTML آگاه هستند

فرض کنید می خواهیم اندازه فونت عنصر body را در صورتی که کلاس large-text به آن داده شود افزایش دهیم.


--font-size: 1em;

.large-text {
  --font-size: 1.5em;
}

body {
  font-size: var(--font-size);
}

حال اگر در زمان اجرا هر زمان این کلاس به عنصر body اضافه شود مقدار متغیر تغییر کرده و اندازه فونت این عنصر بیشتر می شود. این اتفاق به این دلیل می افتد که متغیرهای سی اس اس به DOM حساس هستند و با تغییر ساختار DOM بصورت پویا عمل می کنند.

متغیرهای CSS دقیقا مثل ویژگی های دیگر CSS عمل می کنند به همین دلیل به آنها Custom Property گفته می شود، از این رو کلمات کلیدی مثل inherit، initial و غیره برای این نوع از ویژگی ها نیز کاربرد دارند و عمل می کنند.

متغیرهای CSS پویا هستند، می توانیم آنها را در زمان اجرا تغییر دهیم، این متغیرها می توانند درون یک مدیا کویری تغییر کنند و یا با اضافه کردن یک کلاس به عنصر آنها را به روز کنیم.

پشتیبانی مرورگر ها

نوشتن پشتیبان برای متغیرها

برای مرورگرهایی که متغیرها را پشتیبانی نمی کنند می توان بصورت زیر پشتیبان نوشت:


:root {
  --primary: #7F583F;
}

a {
  color: #7F583F; /* Fallback */
  color: var(--primary);
}

حال مرورگری که متغیرها را پشتیبانی نکند خط اول و مرورگری که پشتیبانی می کند خط دوم برایش تعیین کننده خواهد بود.

کار با متغیرهای سی اس اس در جاوااسکریپت

از آنجایی که متغیرهای سی اس اس مثل دیگر ویژگی های سی اس اس هستند به راحتی می توان از طریق توابع setProperty() و getPropertyValue()در جاوااسکریپت با آنها تعامل داشت.

به عنوان نمونه کد کد زیر را در نظر بگیرید:


:root {
  --primary-color: red;
}

p {
  color: var(--primary-color);
}

و در جاوااسکریپت خواهیم داشت:


var styles = getComputedStyle(document.documentElement);

var value = styles.getPropertyValue('--primary-color');

console.log(value); // red

به همین صورت برای تعیین مقدار یک متغیر در زمان اجرا می توان از تابع setProperty() کمک گرفت:


document.documentElement.style.setProperty('--primary-color', 'green');

همچنین همانطور که می توان در سی اس اس از طریق تابع var() به متغیر دیگری برای مقدار دهی به متغیر مورد نظر اشاره کرد، می توان از این روش در جاوااسکریپت هم بهره برد:


document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

همچنین می توان با استفاده از تابع removeproperty() یک متغیر را حذف کرد:


document.documentElement.style.removeproperty('--primary-color');

حال اگر متغیرها در عنصر ریشه نباشند و محدود به یک عنصر خاص در صفحه باشند می توان بصورت زیر در جاواسکریپت با آنها تعامل کرد:


.element {
  --test: 5;
  z-index: var(--test);
}


var element = document.querySelector('.element');

// get variable from inline style
element.style.getPropertyValue("--test");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--test");

// set variable on inline style
element.style.setProperty("--test", 10);

جالب است بدانید که مقدار زیر یک مقدار معتبر برای یک متغیر در سی اس اس می باشد:


--foo: if(x > 5) this.width = 10;

شاید شرایطی داشته باشید که نیاز باشد متغیری را اینچنین در سی اس اس ذخیره کرده و بعدا در جاوااسکریپت از آن استفاده کنید.

مثال ها و موارد کاربردی

یک مثال خیلی پر کاربرد استفاده از متغیرها برای واکنشگرا کردن برخی از ویژگی ها در اندازه های مختلف صفحه می باشد. معمولا در طراحی یک سایت گپ یا فاصله ای (Gutter) بین ستون ها قرار می دهیم که این فاصله در صفحه نمایش های مختلف تغییر می کند. با استفاده از متغیرها می توان این کار را به راحتی انجام داد:


/* what `--gutter` is at each breakpoint */

:root { --gutter: 1.5em; }

@media (min-width: 30em) {
  :root { --gutter: 2em; }
}
@media (min-width: 48em) {
  :root { --gutter: 3em; }
}

.container {
  margin: 0 auto;
  max-width: 60em;
  padding: var(--gutter);
}

.grid {
  --gutter-negative: calc(-1 * var(--gutter));
  display: flex;
  margin-left: var(--gutter-negative);
  margin-top: var(--gutter-negative);
}

.grid-cell {
  flex: 1;
  margin-left: var(--gutter);
  margin-top: var(--gutter);
}

به عنوان مثال دیگر فرض کنید عنصری سایه ای دارد و ما می خواهیم در زمان hover فقط رنگ سایه را تغییر دهیم اما همانطور که می دانیم این امکان وجود ندارد و باید همه مشخصات سایه را دوباره نویسی کنیم:


.test {  
  box-shadow: 0 0 30px yellow;
}

.test:hover {
  box-shadow: 0 0 30px orange;
}

با استفاده از متغیرها می توان این کار را ممکن کرد:


.test {
  --box-shadow-color: yellow;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.test:hover {
  --box-shadow-color: orange;
}

متغیرها دریچه ای به سوی امکانات فراوانی را در سی اس اس باز کردند که به مرور هر چه توسعه دهندگان از آنها بیشتر استفاده کنند فایده هایشان بیشتر پدیدار می شود.

بیشتر بخوانید

مطالب مرتبط

26 دیدگاه برای “متغیرهای CSS”

  1. خیلی عالی بود اگه اشتباه نکنم متغیرهای خود سی اس اس از sass قویتر هستن
    ولی وقتی که اینطوری فال بک بنویسیم دیگه به نظرم اون قوه اصلی واریابل از دست میره

    پاسخ

  2. آقای سیدی
    ببخشید اینجا مطرح میکنم
    توی این مطلب (https://t.me/CSSTricks/641) یه آدرس نوشتید و درباره پروتوتایپ حرف زدید…
    به این سایت رفتم ولی «هیچی» از روش کار و کاربردش نفمیدم…
    میشه یکم توضیح بدید… ممنون میشم ???

    پاسخ

    1. سلام، خواهش می کنم. اینطور موقع ها می تونید ایمیل بزنید به آدرس ایمیل سایت.

      این پروژه یک فایل CSS ساده هستش. که می تونید به پروژتون اضافه کنید مثل همه فایل های CSS.

      کارش چیه؟

      فرض کنید می خواید یک کار ساده رو با HTML بنویسید. مثلا یه دفعه می خواید یک لیست ساده از یک سری تسک رو بنویسید. یا اصلا می خواین یک مطلب یا سندی رو با HTML بنویسید. نه توی ورد و نرم افزارهای مشابه. (واسه من خیلی پیش میاد)

      خب توی حالت عادی اون مطلب عنوان داره، عنوان های سطح دو و سه شاید داشته باشد، تصویر داره، لیست داره و … و شما بعد از نوشتنش میاید شروع می کنید به خوشگل کردن اون صفحه. یعنی هی میرین توی HTML کلاس می دید و توی CSS هم استایل می نویسید.

      این مینی فریمورک می یاد کار رو راحت می کنه میگه شما بدون کلاس و هیچی فقط تگ های HTML و محتوات رو بنویس بعد هم من رو به عنوان CSS اضافه کن. من خودم خوشگلش می کنم برات.

      چون این مثال ما خیلی کوچیکه و ساده و هیچ وابستگی نداره و یک پروژه بزرگ نیست که نیازی به نگهداری و توسعه در آینده داشته باشه می شه اینطوری انجامش داد.

      تمام.

      یا فرض کنید یک ایده ساده میاد توی ذهنتون میخواین یک نمونه اولیه (Prototype) خیلی سریع درست کنید. باز نیازی نیست وقتتون رو بزارید روی CSS “شاید” این فایل CSS بتونه بهتون کمک کنه.

      تم های مختلف هم داره که میتونید ازشون استفاده کنید.

      موفق باشید.

      پاسخ

  3. سلام مهندس!
    فکرشم نمیتونی بکنی الان کجام!!!!
    توی پادگانم! خخخخ
    با هزار بدبختی تونستم دور بزنم شبکه ی داخلی رو، به نت وصل شدم، بفهمن 6-7 ماه اضاف رو شاخشه! خخخ
    ببین دیگه چقدر هلاک سایتتم که این چند دقیقه که نت گیرم اومده، اومدم اینجا سر بزنم، تغییر دکور هم که دادین ماشالا، خوشکل شده، مث همیشه ساده اما دلچسب!
    ولی با انیمیشن search box قبلی بیشتر حال میکردم که تاب میفتاد توش هه هه! کلی باهاش بازی میکردم :دی
    فقط روز شماری میکنم خدمت تموم بشه بیام ادامه ی آموزش فلکس باکس رو بگیرم، راستی من اون اول گرفتما قسمت آخری رو هنوز نذاشته بودی، الان زدی کلا 54 تومن منم اون موقه دوتا پارت اول رو 50 دادم گرفتم باید برام تخفیف قایل بشیا هه هه!
    غرض مزاحمت بود که حاصل شد، خعلی میخوامت، ایشالا بعد خدمت کامل آموزشا رو میگیم و کارو جدی شرو میکنم.
    موفق باشی ، دوستت دارم هوارتا…

    پاسخ

    1. سلام آقا محمد احسان عزیز.

      احسنت به شما. آقا مراقب باش خدای نکرده مشکلی پیش نیاد. خیلی خیلی ممنون از پیامت. برای فلکس باکس هم شما تموم کن خدمت رو به سلامتی اون هم به چشم.

      موفق باشید.

      پاسخ

  4. با سلام

    سایت تمیزی و با کیفیت دارید . واقعا انتخاب یک مطلب جهت مطالعه برای متخصصین این حوزه در مرحله اول خود وب سایت بعدش محتوا که خوشبختانه سایت شما اعتماد رو جلب میکنه جهت اعتماد به محتوا .

    در خصوص این مسائل خیلی وقته بهش فکر میکردم از زمانی که CSS3 جدید امده بود و جای خالی متغییر ها رو حس میکردم کلی تو نت گشتم و چیزی پیدا نکردم و فک میکردم هنوز اختراع نشده خخخ . از چند سال پیش بیخیالش شده بودم که این مطلب رو دیدم و خوندم و لذت بردم . واقعا این رو CSS نیاز داشت اما مسئله اینه که هنوز جای کار داره تا برای متغییر ها قدرت بیشتر بده تا CSS به تنهایی بتونه قدرتش رو بیشتر از قبل به رخ بکشه .

    ممنون بابت مطالب و سایت محتوا محورت کارت عالیه خسته نباشی و خدا قوت .

    پاسخ

  6. سلام
    وقت بخیر دوست عزیز
    من یه سوال خارج از موضوع این مطلب داشتم اگه جواب بدید ممنون میشم.
    من توی وبسایتم یه ستون دارم که آخرین مطالبو نشون میده. هر مطلب هم در یه جعبه شامل تصویر شاخص و عنوان مطلبه. الان روی هر کدوم (تصویر یا عنوان) که کلیک میکنم میره داخل مطلب. اما من میخوام کل جعبه لینک بشه به مطلبم، نه فقط عکس و عنوان.
    سایر قسمتهای وبسایتم هم به این موضوع نیاز دارم که اگه در این مورد یاد بگیرم میتونم اونجاها هم به کار ببرم.
    این هم کد این جعبه: (نمیدونم زیر rsidbare-box باید دقیقا چه کدی بذارم؟!)

    <a href="”> ‘alignleft’)); ?>

    <a href="”>post_title) > 80) { echo mb_substr(the_title($before = ”, $after = ”, FALSE), 0, 80) . ‘…’; } else { the_title(); } ?>

    پاسخ

    1. سلام. چون مطلب مرتبط نیست من قاعدتا نباید جواب بدم.

      نکته دوم اینکه اگر هم بخوام جواب بدم نمیتونم. باید بتونم ببینم کار رو. به عنوان یک دمویی چیزی.

      پاسخ

  7. ممنون از مطالب خوبتون…
    با این حساب currentColor هم یه متغیر css حساب میشه، با این تفاوت که پشتیبانی خیلی خوبی داره…
    تو این وضعیت که متغیرهای css پشتیبانی خوبی ندارن، ابزارهای دیگه ای مثل sass میتونن کمک کنن، ولی بازم قدرتشون به css نمیرسه… ولی بازم یه ابزار به css نزدیکتره و قدرتش از sass بیشتره! dcss میتونه متناسب با صفحه درخواستی دستورات css رو ارائه بده! ولی بازم به قدرت متغیرهای css نمیرسه… فکر نوشتن مقاله تو این مبحث توی سایتتون به ذهنم رسیده ولی از طرفی باید php آموزش بدیم و از طرفی دانش فعلی من کافی نیست ❤️

    پاسخ

  8. سلام خیلی ممنون مفید بود .
    یه سوال داشتم . من توی سایت codepen دیدم که بعضی کد ها با $ شروع میشن مثلا $border-size و بعضی جاها هم از & اول یه کلاس استفاده کرده بود میشه بگین اینا چی هستن ؟ ممنون

    پاسخ

  9. سلام خیلی ممنون از آموزشتون
    من میخواستم با css یک progress bar داینامیک بسازم بدون استفاده از javascript
    میخواستم بدونم میشه با استفاده از content و variable اینکار رو کرد؟
    یعنی مقدار 30% را که میخواهیم در progress نشان دهیم با پروپرتی (content: attr(value این مقدار 30% رو از html بگیریم و سپس content را به متغیر انتساب بدهیم. چطوری میشه اینکارو کرد؟
    من این مثال را در codepen نوشتم.
    https://codepen.io/hoshmand1/pen/zjzEMN?editors=1100
    یا اگر این روش امکان ندارد؟ شما چه روشی را پیشنهاد میکنید؟
    خیلی ممنونم

    پاسخ

    1. سلام،

      این خط که اشتباه هستش توی سی اس اس، شما ویژگی رو نمی تونید بریزید داخل یک متغیر

      
--widthA: content;

      باید اینطوری باشه، که البته چون مرورگرها فعلا استفاده از attr رو فقط برای content پشتیبانی می کنند و نه ویژگی دیگه ای، اگر پشتیبانی میکردند یا یه روزی بکنند، این کار میکرد:

      
--widthA: attr(value);
width: calc(var(--widthA)*1%);

      راستش روش CSSی که تمیز هم باشه به ذهنم نمیرسه. مثلا این کار رو میشه کرد یا مستقیم عرض رو توی HTML داد ولی خب دیگه اون چیزی که شما می خواید نمیشه:

      
<div id="div" value="30" style="--widthA: 30">start progress bar...</div>
      پاسخ

      1. چه حیف!!!!! وقتی دیدم میشه متغیر تعریف کرد انتظار داشتم هرکاری بتونیم انجام بدیم. که فعلا متاسفانه نمیشه.
        خیلی ممنون از وقتی که گذاشتید. همیشه پیروز و موفق باشید.

        پاسخ

  10. سلام
    وقت بخیر
    چطور میشه در css یک متغیر یجاد کرد که مقدارش را از خارج فایل css دریافت کنه؟مثل دیتابیس یا …

    پاسخ

  11. وقتی از تابع val() استفاده می کنیم می توانیم یک مقدار اختیاری را به عنوان مقدار پیشفرض به این تابع بدهیم.
    تابع var درست نیست ؟

    پاسخ

  12. سلام مهندس جان، کم پیدایی ، دیگه آموزش نمیذاری چرا، همچنان منتظر آموزش جاوا اسکریپت شما هستما،

    یه سوال هم داشتم، این کد ها رو با چه افزونه ای نمایش میدید؟ همین که بالاش نوشته css یا مارکاپ، یعنی همون سینتاکس هایلایتر وردپرس شما چیه، منم میخواااااام

    پاسخ

    1. سلام، بر شما ای همراه همیشگی ما :)
      دعا کنید خدا به ما همت بده تا بتونیم از شرمندگی شماها در بیایم.
      از این استفاده میکنم:
      https://prismjs.com

      اون که بالاش اونطوری مینویسه رو هم خودم نوشتم، ببینم از روی کد میگیری قضیه چیه یا نه :)

      
.language-scss {
  &::before {
    background: #c69;
    color: #fff;
    content: "scss";
  }
}
      پاسخ

      1. دستت درد نکنه دیگه سیدی جان، تازه بقیه چیزاشم ننوشتید، شما یه بلاک درست کردی با پوزیشن Absolute و بعدم بهش یه یک گراند دادید و متن داخلش هم با content و و و
        مهندس دلم برات میسوزه چون ما تو رو داریم و تو همچون خودت نداری خخخ
        خدا برامون نگهت داره
        ولی جان من زودتر آموزش جاوا اسکریپت رو بذار

        پاسخ

  13. سلام استاد خسته نباشید..
    من رو یه پروژه ای کار می کنم می خوام تم light , dark طراحی کنم.. یه فایل css جدا کردم برای color var هام.. الان نیاز دارم به روشی با انتخاب تم dark ، مقدار این var هامو تغییر بدم.. خیییلی ممنون میشم اگه راهنمایی بفرمایید

    پاسخ

    1. سلام، وقت بخیر
      نیاز است که از طریق جاواسکریپت کلاسی به مثلا body اضافه کنید و از طریق اون کلاس توی css رنگ متغیرها رو تغییر بدید، این دو تا مطلب رو چک کنید:

      https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8
      https://dev.to/blacksonic/add-dark-mode-to-your-site-with-this-short-css-trick-1g7b

      پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *