SASS даги Функциялар

Бу дарсда биз функциялардан қандай фойдаланишни кўриб чиқамиз. Функциялар, бир қарашда миксларга ўхшайди, лекин улар параметрлар қўшиш имконини беради, уларнинг қийматлари ўзгариши мумкин.

Келтинг, ёзув ҳажмини белгиловчи func функциясини яратайлик. Ҳажм параметр орқали ўтказilsin ва параметр сифатида ўзгарувчи ишлатилсин:

styles.scss$font-size: 10px;

Сўнг функцияга $n параметрини ёзамиз ва функция танасида @return ни мажбуран кўрсатамиз:

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

Компиляция натижаси:

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

Шунингдек, функцияга номланган аргумент ўтказish мумкин. Олдинги мисол шартларин қайта ёзамиз:

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

Ва styles.css файлида биз худди шу кодни кўрамиз:

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);
}