Kazi katika SASS

Katika somo hili tutachunguza jinsi ya kutumia kazi. Kazi, zinafanana kwa kiasi fulani na kuchanganya, lakini wakati huo huo huruhusu kuongeza vigezo, ambavyo vinaweza kubadilisha thamani zao.

Wacha tutengeneze kazi func, ambayo itaweka ukubwa wa herufi. Acha ukubwa upitiswe kama kigezo na kigezo kitakachotumika kiwe kigezo:

styles.scss$font-size: 10px;

Kisha andika kigezo ndani ya kazi $n na hakikisha unabainisha ndani ya mwili wa kazi @return:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func(2);
}

Matokeo ya ukusanyaji:

styles.css#main {
  font-size: 20px;
}

Pia, kwenye kazi inaweza kupitishwa hoja iliyopewa jina. Wacha tuandike upya masharti ya mfano uliopita:

styles.scss@function func($n) {
  @return $n * $font-size;
}
#main {
  font-size: func($n: 2);
}

Na kwenye faili styles.css tutaona msimbo ule ule:

styles.css#main {
  font-size: 20px;
}

styles.scss$size: 10px;
@function func($num) {
  @return $num + $size;
}
div {
  font-size: func(4);
}

styles.scss$size: 4px;
@function func($num) {
  @return $num + $size;
}
.card {
  padding: func(2);
  margin: func(6);
  width: func(416);
}

styles.scss$size: 2px;

@function func($num) {
  @return ($num * $size) + 20;
}

.logo {
  width: func(2);
  height: func(4);
}