🏠 Home / Hub

💅 SCSS Lesson 04 — Functions & Operations

← Back to SCSS Menu  |  🏠 Hub

1. Math Operations

$base: 16px;
$columns: 12;

// Arithmetic
.element {
  width: 100% / 3;           // 33.333%
  padding: $base * 1.5;      // 24px
  margin: $base - 4;         // 12px
  font-size: $base + 2px;    // 18px
}

// calc() for mixed units (runtime calculation)
.hero {
  width: calc(100% - 40px);
  height: calc(100vh - 60px);  // viewport - header
}

// math functions (Sass built-in)
$val: math.div(10, 3);   // 3.333 (use math.div, not / in new Sass)
$sqrt: math.sqrt(16);    // 4
$ceil: math.ceil(4.2);   // 5
$floor: math.floor(4.9); // 4
$round: math.round(4.5); // 5

2. Color Functions

$primary: #e040fb;

// Lighten / Darken
.light  { color: lighten($primary, 20%); }   // 20% lighter
.dark   { color: darken($primary, 20%); }    // 20% darker

// Saturate / Desaturate
.vivid  { color: saturate($primary, 30%); }
.muted  { color: desaturate($primary, 50%); }

// Transparentize (add transparency)
.overlay { background: rgba($primary, 0.3); }
// Same as:
.overlay { background: transparentize($primary, 0.7); }

// Mix two colors
$mixed: mix(#e040fb, #ffffff, 30%);  // 30% primary + 70% white

// Complement (opposite on color wheel)
$comp: complement($primary);

// Invert
$inv: invert($primary);

// Practical usage
$primary: #e040fb;

.button {
  background: $primary;
  border: 2px solid darken($primary, 10%);
  color: white;

  &:hover    { background: darken($primary, 12%); }
  &:focus    { box-shadow: 0 0 0 3px rgba($primary, 0.3); }
  &:disabled { background: desaturate($primary, 60%); }
}

3. String & List Functions

// String functions
$name: "Hello World";
string.to-upper-case($name)   // "HELLO WORLD"
string.to-lower-case($name)   // "hello world"
string.length($name)          // 11
string.slice($name, 1, 5)     // "Hello"
string.index($name, "World")  // 7

// List functions
$colors: red, green, blue;
list.length($colors)          // 3
list.nth($colors, 2)          // green
list.append($colors, yellow)  // red, green, blue, yellow
list.join($colors, (white, black))

// Map (key-value pairs)
$theme: (
  primary:   #e040fb,
  secondary: #7b1fa2,
  success:   #28a745,
  danger:    #dc3545
);

map.get($theme, primary)   // #e040fb
map.keys($theme)           // primary, secondary, success, danger
map.has-key($theme, error) // false

4. Custom @function

// Custom function (value return လုပ်) — mixin နဲ့ မတူ!
// @function → value return
// @mixin    → CSS block output

// rem converter
@use 'sass:math';
$base-size: 16px;

@function rem($px) {
  @return math.div($px, $base-size) * 1rem;
}

// Usage
.title  { font-size: rem(32px); }   // 2rem
.body   { font-size: rem(16px); }   // 1rem
.small  { font-size: rem(12px); }   // 0.75rem

// Spacing scale
@function space($n) {
  @return $n * 8px;   // 8px grid system
}

.card { padding: space(3); margin: space(2); }
// padding: 24px; margin: 16px;

// Color shade generator
@function shade($color, $amount) {
  @return mix(black, $color, $amount);
}
@function tint($color, $amount) {
  @return mix(white, $color, $amount);
}

$primary: #e040fb;
.btn-light { background: tint($primary, 80%); }
.btn-dark  { background: shade($primary, 40%); }
💡 @function = value ပြန်ပေး | @mixin = CSS rules output — ဒါ key difference

← SCSS 03  |  Next: SCSS 05 → @extend →

📌 Study Checklist