50 Most Useful SASS Snippets

Avatar photoByAdil

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;
  }
}

Similar Posts