Variables & Basic Syntax
1. Defining Variables
$primary-color: #3498db;
$padding-base: 16px;
2. Using Variables
.button {
background-color: $primary-color;
padding: $padding-base;
}
3. Nesting Selectors
nav {
ul {
margin: 0;
li {
display: inline-block;
}
}
}
4. Parent Selector Reference
.button {
&:hover {
background-color: darken($primary-color, 10%);
}
}
5. Importing Partial Files
@import 'variables';
@import 'mixins';
Mixins
6. Basic Mixin
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
7. Using Mixin with Parameters
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}
.card {
@include box-shadow(0, 4px, 5px, rgba(0, 0, 0, 0.3));
}
8. Mixin with Default Parameters
@mixin transition($property: all, $duration: 0.3s) {
transition: $property $duration ease;
}
9. Responsive Mixin
@mixin respond-to($media) {
@if $media == phone {
@media (max-width: 600px) { @content; }
}
}
10. Using Responsive Mixin
.container {
width: 100%;
@include respond-to(phone) {
width: 90%;
}
}
Functions
11. Custom Function
@function double($number) {
@return $number * 2;
}
.box {
width: double(10px);
}
12. Using Color Functions
.button {
background-color: lighten($primary-color, 20%);
}
Control Directives
13. If Statement
@mixin theme-colors($theme) {
@if $theme == dark {
background: black;
color: white;
} @else {
background: white;
color: black;
}
}
14. For Loop
@for $i from 1 through 5 {
.col-#{$i} {
width: 20% * $i;
}
}
15. Each Loop
@each $color in (red, green, blue) {
.bg-#{$color} {
background-color: $color;
}
}
16. While Loop
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 10px * $i;
}
$i: $i - 1;
}
Placeholders & Extends
17. Defining a Placeholder
%flex-center {
display: flex;
justify-content: center;
align-items: center;
}
18. Extending a Placeholder
nav {
@extend %flex-center;
}
Advanced Nesting
19. Nesting with Parent Selector
.btn {
&--primary {
background-color: $primary-color;
}
}
20. Nested Media Query
.card {
width: 300px;
@media (max-width: 600px) {
width: 100%;
}
}
Maps & Lists
21. Defining a Map
$themes: (
light: #fff,
dark: #000
);
22. Accessing Map Value
body {
background: map-get($themes, dark);
}
23. Looping Over Map
@each $name, $color in $themes {
.bg-#{$name} {
background-color: $color;
}
}
Responsive Design
24. Mobile First Media Query
@mixin mobile {
@media (max-width: 600px) {
@content;
}
}
.container {
width: 100%;
@include mobile {
padding: 10px;
}
}
Helpers
25. Clearfix Mixin
@mixin clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
26. Using Clearfix
.container {
@include clearfix;
}
Animations
27. Simple Animation
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s ease forwards;
}
28. Animation Mixin
@mixin animation($name, $duration) {
animation-name: $name;
animation-duration: $duration;
animation-fill-mode: forwards;
}
29. Using Animation Mixin
.alert {
@include animation(fadeIn, 0.5s);
}
Color Manipulation
30. Darken Color
$dark-primary: darken($primary-color, 10%);
31. Saturate Color
$bright-color: saturate($primary-color, 20%);
Programmers Known Snippets
32. Modular Scale Function
@function ms($step, $base: 1rem, $ratio: 1.2) {
@return $base * pow($ratio, $step);
}
33. Responsive Font Size
h1 {
font-size: ms(3);
}
34. Hex to RGB Function
@function hex-to-rgb($color) {
@return red($color), green($color), blue($color);
}
35. Using !default Flag
$font-stack: Helvetica, sans-serif !default;
36. Conditional Mixin Example
@mixin theme-btn($type) {
@if $type == primary {
background: $primary-color;
} @else {
background: grey;
}
}
Utility Mixins
37. Vertical Centering
@mixin vertical-center {
display: flex;
align-items: center;
}
38. Triangle Shape
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid $primary-color;
}
39. Text Overflow Ellipsis
@mixin ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
40. Using Text Ellipsis
.title {
@include ellipsis;
}
Grid & Flex Helpers
41. Center Grid Item
.grid-center {
display: grid;
place-items: center;
}
42. Flex Gap Polyfill
@mixin flex-gap($gap) {
margin: -#{$gap/2};
> * {
margin: #{$gap/2};
}
}
Advanced Functions
43. Calculate Rem from px
@function rem($px, $base: 16) {
@return #{$px / $base}rem;
}
Debugging Helpers
44. Outline Debugging
@mixin debug {
outline: 1px solid red;
}
45. Using Debug Mixin
.container {
@include debug;
}
Placeholder Selectors
46. DRY Button Styles
%btn {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
47. Extend Button Style
.primary-btn {
@extend %btn;
background-color: $primary-color;
color: white;
}
Miscellaneous
48. Check if Variable Exists
@if variable-exists(primary-color) {
color: $primary-color;
} @else {
color: black;
}
49. Charset Declaration
@charset "UTF-8";
50. Media Query with Map
$breakpoints: (
mobile: 600px,
tablet: 900px
);
@mixin respond($device) {
$size: map-get($breakpoints, $device);
@media (max-width: $size) {
@content;
}
}
SOCIAL SHARE CARD GENERATOR