SCSS Cheat Sheet

Variables

Declare Variables to reduce static values that are used often.

$primary: #0d6efd;
$radius: 4px;
$spacing: 1rem;

then simply reference a Variable

.card {
	padding: $spacing;
}

Mixins

@mixin button($color) {
	background: $color;
	padding: 8px 12px;
	border-radius: 4px;
	color: white;
	border: none;
	cursor: pointer;

	&:hover {
		background: darken($color, 10%);
	}
}

.btn-primary {
	@include button(#0d6efd);
}

.btn-danger {
	@include button(#dc3545);
}

List

$colors: red, green, blue;
nth($colors, 2); // green

Map

@use 'sass:map';

$theme: (
	primary: #0d6efd,
	danger: #dc3545,
	spacing: 1rem,
);

.theme-primary {
	color: map.get($theme, primary);
}

Loops

each

$borderWidths: 0, 1, 2, 3, 4, 5;

@each $borderWidth in $borderWidths {
	.border-#{$borderWidth} {
		--border-width: #{$borderWidth}px !important;
		border-width: var(--border-width);
	}
}

@for

@for $i from 1 through 4 {
	.col-#{$i} {
		width: (100% / 4) * $i;
	}
}

@while

$i: 1;
@while $i <= 3 {
	.loop-#{$i} {
		margin-top: $i * 0.5rem;
	}
	$i: $i + 1;
}

Conditions

Functions

@function rem($px, $base: 16) {
	@return #{$px / $base}rem;
}

h1 {
	font-size: rem(24); // 1.5rem
}

Patterns

Placeholder

%card-base {
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card {
	@extend %card-base;
}
.panel {
	@extend %card-base;
	background: #fff;
}

Utility generator

$spacings: 0, 4, 8, 12, 16, 24;

@each $s in $spacings {
	.m-#{$s} {
		margin: #{$s}px !important;
	}
	.p-#{$s} {
		padding: #{$s}px !important;
	}
}

Responsive Utils

$breakpoints: (
	sm: 576px,
	md: 768px,
	lg: 992px,
);

@function bp($size) {
	@return map-get($breakpoints, $size);
}

@mixin at($size) {
	@media (min-width: bp($size)) {
		@content;
	}
}

.box {
	width: 100%;
	@include at(md) {
		width: 50%;
	}
}