٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش متغیر های Sass

متغیرهای Sass متغیرها روشی برای ذخیره اطلاعات است که بعداً می توانید دوباره استفاده کنید. با Sass می توانید اطلاعات را در متغیرهایی ذخیره کنید ، مانند: رشته های شماره رنگها بولیان لیست ها پوچ Sass برای اعلام متغیرها از…

محمد یوسفی

17 جولای 2021

متغیرهای Sass

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

با Sass می توانید اطلاعات را در متغیرهایی ذخیره کنید ، مانند:

  • رشته های
  • شماره
  • رنگها
  • بولیان
  • لیست ها
  • پوچ

Sass برای اعلام متغیرها از نماد $ و به دنبال آن یک نام استفاده می کند:

نحو متغیر Sass:

$variablename: value;

مثال زیر 4 متغیر به نام myFont ، myColor ، myFontSize و myWidth را اعلام می کند. پس از اعلام متغیرها ، می توانید از متغیرها در هر کجا که می خواهید استفاده کنید:

نحو SCSS:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

بنابراین ، وقتی فایل Sass منتقل می شود ، متغیرها (myFont ، myColor و غیره) را می گیرد و CSS نرمال را با مقادیر متغیر قرار داده شده در CSS خارج می کند ، مانند این:

خروجی CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

دامنه متغیر Sass

متغیرهای Sass فقط در سطح لانه سازی در محلی که تعریف شده اند در دسترس هستند.

به مثال زیر نگاه کنید:

نحو SCSS:

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

آیا رنگ متن درون <p>برچسب قرمز یا سبز خواهد بود؟ قرمز خواهد شد!

تعریف دیگر ، $ myColor: سبز؛ داخل <h1>قانون است و فقط در آنجا در دسترس خواهد بود!

بنابراین ، خروجی CSS خواهد بود:

خروجی CSS:

h1 {
  color: green;
}

p {
  color: red;
}

خوب ، این رفتار پیش فرض برای دامنه متغیر است.


با استفاده از Sass! جهانی

با استفاده از !globalسوئیچ می توان رفتار پیش فرض دامنه متغیر را نادیده گرفت .

!global جهانی بودن یک متغیر را نشان می دهد ، به این معنی که در همه سطوح قابل دسترسی است.

به مثال زیر نگاه کنید (همان مثال بالا ؛ اما با !globalاضافه شده):

نحو SCSS:

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

اکنون رنگ متن درون <p>برچسب سبز خواهد بود!

بنابراین ، خروجی CSS خواهد بود:

خروجی CSS:

h1 {
  color: green;
}

p {
  color: green;
}

 

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها