Marejeo ya Sass

Marejeo ya Sass

Vifaa ni njia ya kuhifadhi habari inayotumiwa kwa kawaida kwenye wakati wa kina.

Kwa Sass, unaweza kuwahifadhi:makalaKuhifadhiwa kwenye vifaa, kama:

• siri
• nyegero
• mikono
• 布尔值
• orodha
• null

Sass inatumia $ baada ya jina la kumwambilia vifaa:

Mafanikio ya Sass:

$variablename: value;

Mifano hapa ina vifaa 4:

• myFont
• myColor
• myFontSize
• myWidth

Baada ya kumwambilia vifaa, unaweza kutumia vifaa hivi kwenye eneo yoyote:

Inasajili ya SCSS:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

Kwa hivyo, kama faili ya Sass inatukua, inatumia vifaa (myFont, myColor na mengine) na kuichapisha CSS ya kawaida na thamani ya vifaa iliyochapishwa katika CSS, kama:

Muonekano wa CSS:

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

Mfano wa vifaa vya Sass

Vifaa vya Sass vinapatikana tu kwa kiwango cha ujumbe ambao walivyoandikwa.

Tazama mifano inayotangulia hapa chini:

Inasajili ya SCSS:

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

<p> Rangi ya matukio katika kifupi ni ya kijani au ya kichwa? Inaonekana kwa kijani!

Marejeo mwingine, $myColor: green; inapatikana katika <h1> katika kikaa, na tu katika hilo tu!

Kwa hivyo, muonekano wa CSS yanaonekana kama:

Muonekano wa CSS:

h1 {
  color: green;
}
p {
  color: red;
}

Tafadhali, hii ni uwanja wa variable wa msingi.

Inafaa kutumia !global ya Sass

Inafaa kutumia !global Inadifaa kusahau uwanja wa variable wa msingi.

!global Inaonyesha kwamba variable ni muhimu, inaingia katika uwanja wa kila kipengele.

Tazama matokeo ya hapa chini (kama yako juu, lakini inaduiwa na !global）：

Inasajili ya SCSS:

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

Sasa <p> Rangi ya matukio katika kifupi ni ya kijani!

Kwa hivyo, muonekano wa CSS yanaonekana kama:

Muonekano wa CSS:

h1 {
  color: green;
}
p {
  color: green;
}

Inamtaarifu:Marejeo ya jumuia yanaonesha kwenye kila mjadala wa kawaida. Itakuwa vizuri kufafanua marejeo ya jumuia zote katika faili zao mawitu, kwa jina la "_globals.scss", na kutumia @include Maneno yanaeneza kilele ya faili hii.