Mga Function ng SASS

Ipinaliliwanag ng artikulong ito ang mga function ng SASS.

Ipapaliwanag namin nang detalyado ang mga function ng SASS mula sa mga batayan hanggang sa mga advanced na paksa, kabilang ang mga praktikal na halimbawa na kapaki-pakinabang sa aktwal na trabaho.

YouTube Video

Mga Function ng SASS

Ang mga function ng SASS ay makapangyarihang mga tool na pumapaloob sa reusable na lohika sa mga stylesheet, na nagpapahintulot sa mga kalkulasyon, pag-format, at mga conditional na sangay.

Pangunahing Estruktura at Paggamit ng mga Function

Ang mga function ng SASS ay dinideklara gamit ang @function at nagbabalik ng halaga gamit ang @return. Ang mga function ay tinatawag katulad ng mga built-in na function.

1// Example: Define a simple function that doubles a value
2@function double($n) {
3  @return $n * 2;
4}
5
6// Use the function
7.example {
8  width: double(10px);  // -> 20px
9}

• Ang code na ito ay nagtatakda ng isang function na nagdodoble ng isang numero at ina-apply ito sa lapad. Bilang resulta, .example { width: 20px; } ay mabi-buo.

Mga Argumento, Default na Halaga, at Pamamahala ng Uri

Ang mga function ay tumatanggap ng maraming argumento at maaaring magtakda ng default na halaga. Ang SASS ay hindi nangangailangan ng static typing, ngunit ang pagbibigay-pansin sa format ng argumento ay nagpapalakas ng iyong mga function.

1// Example: Function with default parameters
2@function responsive-font($base-size, $scale: 1.2, $unit: px) {
3  @return $base-size * $scale + $unit;
4}
5
6.title {
7  font-size: responsive-font(16, 1.25);  // -> 20px
8}

• Ang responsive-font ay may default na halaga para sa scale at unit, at maaaring i-omit ang ilang argumento kapag tinawag. Sa halimbawa na ito, isang value tulad ng font-size: 20px; ang ipapalabas.

Paggamit ng Variadic na mga Argumento (...)

Gamitin ang variadic na argumento kapag gusto mong magpasa ng maraming halaga. Kapaki-pakinabang ito sa paghawak ng mga listahan o maraming kulay.

 1// Example: Sum any number of numbers passed in
 2@function sum-all($numbers...) {
 3  $total: 0;
 4  @each $n in $numbers {
 5    $total: $total + $n;
 6  }
 7  @return $total;
 8}
 9
10.box {
11  padding: sum-all(4px, 6px, 10px);  // -> 20px
12}

• Ang variadic na argumento gaya ng $numbers... ay tinatratong listahan at maaaring i-proseso gamit ang @each. Sa halimbawa na ito, padding: 20px; ang magiging output.

Pagbalik at Pagmanipula ng Mga Listahan o Map

Ang mga function ay maaaring magbalik ng mga listahan (space o comma separated) at mga mapa. Kapaki-pakinabang ito sa pagbabalik ng mga komplikadong value.

 1@use "sass:map";
 2
 3// Example: Return a map of spacing scale
 4@function spacing-scale($base) {
 5  @return (
 6    'small': $base * 0.5,
 7    'medium': $base,
 8    'large': $base * 2
 9  );
10}
11
12$scale: spacing-scale(8px);
13
14.card {
15  margin-bottom: map.get($scale, 'medium');
16}

• Ang isang mapa ay ibinabalik ng function, at pagkatapos ay kinukuha ang mga halaga gamit ang map.get. Pinapadali nito ang pagpapanatili ng pare-parehong spacing system.

Mga Function na may Conditionals at Loops

Ang @if, @else if, @else, @for, @each, at @while ay maaaring gamitin sa loob ng mga function. Makakalikha ka ng kalkulasyong lohika gamit ang mga conditional at loop.

 1// Example: Generate modular scale value using loop
 2@function modular-scale($step, $base: 1rem, $ratio: 1.25) {
 3  $result: $base;
 4  @if $step == 0 {
 5    @return $result;
 6  }
 7  @if $step > 0 {
 8    @for $i from 1 through $step {
 9      $result: $result * $ratio;
10    }
11  } @else {
12    @for $i from 1 through abs($step) {
13      $result: $result / $ratio;
14    }
15  }
16  @return $result;
17}
18
19.h1 {
20  font-size: modular-scale(3, 1rem, 1.333);
21}

• Ang function na ito ay kumukumpit ng modular scale at nagmumultiply o naghahati depende sa positibo o negatibong hakbang. Ang modular-scale(3, 1rem, 1.333) ay nagbabalik ng font size na tatlong hakbang na mas malaki kaysa sa base.

Pamamahala ng Error at Babala (@error, @warn)

Maaari kang mag-abort gamit ang @error para sa mga maling argumento o di-inaasahang operasyon, at maglabas ng babala gamit ang @warn. Layunin nitong maagang bigyan ng babala ang mga user sa mga problema.

 1@use "sass:math";
 2@use "sass:meta";
 3
 4// Example: Validate input and throw an error for invalid units
 5@function ensure-length($value) {
 6  @if meta.type-of($value) != 'number' or math.is-unitless($value) {
 7    @error "Expected a length with units, got #{$value}.";
 8  }
 9  @return $value;
10}
11
12// Valid input (should pass)
13.test-valid {
14  width: ensure-length(10px); // expect: 10px
15}
16
17// Invalid input (should throw error during compilation)
18// Uncomment the following to test error handling:
19//
20// .test-invalid {
21//   // expect error: "Expected a length with units, got 10."
22//   width: ensure-length(10);
23// }

• Kung magpapasa ka ng maling halaga, maglalabas ng error sa build time, na nagpapadali upang tukuyin ang sanhi. Ang mga pagsusuri sa loob ng function ay kapaki-pakinabang sa maagap na pagtuklas ng bug.

Paglikha ng Mga Function na Para sa Kulay

Sa SASS, maaari mong pagsamahin ang iba’t ibang mga function na nagmamaniobra ng mga kulay upang makagawa ng sarili mong color palette. Ito ay kapaki-pakinabang para mapanatili ang pare-parehong color scheme sa buong proyekto mo.

 1@use "sass:color";
 2@use "sass:list";
 3
 4// Example: Generate a color palette (tints and shades) from a base color
 5@function palette($color, $steps: 5, $strength: 10%) {
 6  $colors: ();
 7  @for $i from 0 through $steps {
 8    $amount: $i * $strength;
 9    $shade: if($i == 0, $color, color.mix(black, $color, $amount));
10    $tint: color.mix(white, $color, $amount);
11    $colors: list.append($colors, $shade);
12    $colors: list.append($colors, $tint);
13  }
14  @return $colors;
15}
16
17$palette: palette(#3498db, 3, 15%);
18
19.btn {
20  background-color: list.nth($palette, 1);
21}

• Sa halimbawa na ito, ginagamit ang color.mix para lumikha ng mga shade sa pamamagitan ng paghahalo ng itim at mga tint sa pamamagitan ng paghahalo ng puti. Ang mga halaga ay ibinabalik bilang listahan, at maaaring ma-access gamit ang list.nth.

Mga Paalala ukol sa Performance at Oras ng Compilation

Ang mga function ng SASS ay sinusuri sa oras ng compilation. Ang mga mabibigat na loop, malalim na recursion, o malalawak na operasyon ng mapa ay magpapabagal ng compile time. Panatilihing maliit at simple ang mga function; isaalang-alang na gawin ang komplikadong proseso sa labas ng SASS, sa mga build tool o preprocessor, kung kinakailangan.

Koleksyon ng Praktikal na Utility Function

Narito ang mga utility function na madalas gamitin. Ang code ay dinisenyo para magamit agad sa totoong proyekto.

 1@use "sass:math";
 2
 3// Example: Clamp a value between min and max
 4@function clamp-value($value, $min, $max) {
 5  @if $value < $min {
 6    @return $min;
 7  } @else if $value > $max {
 8    @return $max;
 9  }
10  @return $value;
11}
12
13// Example: Convert px to rem (with optional root size)
14@function px-to-rem($px, $root: 16px) {
15  @if math.unit($px) != "px" {
16    @error "px-to-rem requires a px value.";
17  }
18  @return ($px / $root) * 1rem;
19}

• Ang clamp-value ay nagbibigay ng itaas at ibabang limitasyon sa isang halaga, at ang px-to-rem ay nagko-convert ng mga pixel value sa rem. Pareho itong nagpapadali ng mga proseso na madalas kailanganin sa responsive design.

Pagpili sa Pagitan ng @function at Mixins (@mixin)

Ang mga function ay espesyalisado sa pagbabalik ng value, samantalang ang mixin ay naglalabas ng CSS block. Kung ang resulta ng lohika ay isang property value lang, gumamit ng function; kung buong style block, gumamit ng mixin.

 1// Example: Function returns a value
 2@function border-radius-value($size) {
 3  @return $size * 1px;
 4}
 5
 6// Example: Mixin outputs properties
 7@mixin rounded($size) {
 8  border-radius: border-radius-value($size);
 9  -webkit-border-radius: border-radius-value($size);
10}
11.card {
12  @include rounded(8);
13}

• Nagbabalik ang function ng mga value tulad ng numero o kulay para magamit sa ibang properties, habang ang mixin ay direktang nagsisingit ng grupo ng mga property. Ang mahigpit na paghihiwalay sa disenyo ay nagpapadali ng maintenance.

Pamamahala ng String at Mga Dapat Isaalang-alang sa Output Format

Maging maingat sa paghawak ng numerong may yunit at string sa SASS. Ang pagdugtong ng string sa numerong may yunit ay maaaring magdulot ng hindi inaasahang output. Gamitin ang unquote() o string interpolation (#{}) kapag kailangan.

 1@use "sass:math";
 2
 3// Example: Safely create a CSS value string
 4@function px-percentage($px, $total) {
 5  $percent: math.div($px, $total) * 100;
 6  @return "#{$percent}%";
 7}
 8
 9// Safer with interpolation and math module
10@function px-percentage-safe($px, $total) {
11  $percent: math.div($px, $total) * 100;
12  // Round to 2 decimal places safely
13  $rounded: math.div(math.round($percent * 100), 100);
14  @return "#{$rounded}%";
15}

• Kapag nagbabalik ng porsyento bilang string, gamitin ang interpolation o round para sa mas malinaw na precision. Upang maiwasan ang bug, siguraduhing maayos ang paghawak ng uri ng data kapag pinagdugtong mo ang resulta ng kalkulasyon sa string.

Mga Mainam na Praktis sa Pagsusuri at Dokumentasyon

Pagkatapos sumulat ng function, gumawa ng maliliit na SCSS file na may mga halimbawa ng paggamit bilang test, upang gumaan ang maintenance. Maaari mong idokumento para sa bawat function ang input type/unit, uri ng return, paraan ng pag-fail, at mga halimbawa ng paggamit.

 1@use "sass:math";
 2
 3// Example: Inline "tests" (partial usage examples)
 4// These can be compiled separately during development
 5
 6@function double($n) {
 7  @return $n * 2;
 8}
 9
10@function px-to-rem($px, $root: 16px) {
11  @if math.unit($px) != "px" {
12    @error "px-to-rem requires a px value.";
13  }
14  @return math.div($px, $root) * 1rem;
15}
16
17// Test double()
18.test-double {
19  width: double(12px); // expect 24px
20}
21
22// Test px-to-rem()
23.test-rem {
24  font-size: px-to-rem(18px, 18px); // expect 1rem
25}
26
27// --- Inline debug tests ---
28@debug "double(12px) => #{double(12px)} (expect 24px)";
29@debug "px-to-rem(18px, 18px) => #{px-to-rem(18px, 18px)} (expect 1rem)";

• Ang pag-iiwan ng mga komento na may maliliit na halimbawa ng 'expected output' ay nagpapadali sa pagkilala ng regression kapag nag-refactor sa hinaharap. Mabisang paraan ang awtomatikong pag-compile sa CI environment at visual na pagsusuri ng output.

Buod

Ang mga function ng SASS ay mabisang paraan upang mapataas ang reusability at consistency ng mga style. Disenyo ng mga ito na maging maliit at simple, at tiyaking ligtas gamit ang @error at @warn. Mainam na pagsamahin ang mga utility function para sa kulay, spacing, at unit conversion sa isang shared library. Upang makaiwas sa matagal na compile time, isaalang-alang ang paghihiwalay ng komplikadong proseso sa ibang bahagi ng build kung kinakailangan.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video