If Statements

If Statements

SASS supports conditional logic with @if, @else if, and @else. This lets your stylesheets make decisions — output different CSS based on variable values, arguments, or conditions.

Basic @if

$theme: 'dark';

body {
    @if $theme == 'dark' {
        background: #1a1a2e;
        color: #eee;
    } @else {
        background: #fff;
        color: #333;
    }
}

@if / @else if / @else

$size: 'large';

.button {
    @if $size == 'small' {
        padding: 6px 12px;
        font-size: 12px;
    } @else if $size == 'medium' {
        padding: 10px 20px;
        font-size: 14px;
    } @else if $size == 'large' {
        padding: 14px 28px;
        font-size: 16px;
    } @else {
        padding: 10px 20px;
        font-size: 14px;
    }
}

Conditionals in Mixins

@mixin button-style($variant: 'primary') {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;

    @if $variant == 'primary' {
        background: #3498db;
        color: white;
    } @else if $variant == 'danger' {
        background: #e74c3c;
        color: white;
    } @else if $variant == 'outline' {
        background: transparent;
        color: #3498db;
        border: 2px solid #3498db;
    } @else if $variant == 'ghost' {
        background: transparent;
        color: #333;
    }
}

.btn-primary { @include button-style('primary'); }
.btn-danger { @include button-style('danger'); }
.btn-outline { @include button-style('outline'); }
.btn-ghost { @include button-style('ghost'); }

Ternary with if()

// The inline if() function — for simple conditions:
$dark: true;

body {
    background: if($dark, #1a1a2e, #ffffff);
    color: if($dark, #eeeeee, #333333);
}

// Equivalent to:
// @if $dark { background: #1a1a2e; } @else { background: #ffffff; }

Checking Variable Types

@mixin size($value) {
    @if type-of($value) == 'number' {
        width: $value;
        height: $value;
    } @else if type-of($value) == 'list' {
        width: nth($value, 1);
        height: nth($value, 2);
    } @else {
        @warn "Invalid size value: #{$value}";
    }
}

.icon { @include size(24px); }           // 24px × 24px
.banner { @include size(300px 200px); }  // 300px × 200px

Null / Boolean Checks

@mixin card($shadow: null, $rounded: true) {
    background: white;
    padding: 20px;

    @if $rounded {
        border-radius: 12px;
    }

    @if $shadow {
        box-shadow: $shadow;
    }
}

.card { @include card; }  // Rounded, no shadow
.card-elevated { @include card($shadow: 0 4px 16px rgba(0,0,0,0.1)); }
.card-sharp { @include card($rounded: false); }

Conditionally Generating Classes

$generate-utilities: true;

@if $generate-utilities {
    // Only compiled if $generate-utilities is true
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }

    @for $i from 1 through 5 {
        .mt-#{$i} { margin-top: $i * 8px; }
        .mb-#{$i} { margin-bottom: $i * 8px; }
        .py-#{$i} { padding-top: $i * 8px; padding-bottom: $i * 8px; }
    }
}

Practical: Responsive Font Mixin

@mixin responsive-font($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
    font-size: $min-size;

    @if $min-size != $max-size {
        @media (min-width: $min-width) {
            font-size: calc(#{$min-size} + #{($max-size - $min-size) / 1px} * ((100vw - #{$min-width}) / #{($max-width - $min-width) / 1px}));
        }

        @media (min-width: $max-width) {
            font-size: $max-size;
        }
    }
}

h1 { @include responsive-font(24px, 48px); }
h2 { @include responsive-font(20px, 36px); }
p  { @include responsive-font(14px, 18px); }

Congratulations! 🎉

You've completed the SASS tutorial! You now know how to use variables, nesting, mixins, imports, math, colour functions, @content, and conditional logic to write powerful, maintainable stylesheets.

Key Takeaways

• @if, @else if, @else add conditional logic to your stylesheets
• Inline if(condition, true-val, false-val) for simple ternary conditions
• Use conditions in mixins for variant-based styling (primary, danger, outline)
• Check types with type-of() for flexible mixins
• Use null checks and boolean flags for optional features
• Conditionally generate utility classes based on configuration flags