DEV Community

Software Developer
Software Developer

Posted on

50 Most Useful SCSS Snippets

#scss #design #ux #ui

I. Variables & Basic Usage

1. Defining and Using Variables 

$primary-color: #3498db;
$padding: 20px;

.container {
  color: $primary-color;
  padding: $padding;
}
Enter fullscreen mode Exit fullscreen mode

2. Darken and Lighten Colors with Variables 

$btn-bg: #2980b9;
$btn-bg-hover: darken($btn-bg, 10%);

.button {
  background-color: $btn-bg;
  &:hover {
    background-color: $btn-bg-hover;
  }
}
Enter fullscreen mode Exit fullscreen mode

3. Using Opacity with rgba 

$primary-rgb: 52, 152, 219;

.overlay {
  background-color: rgba($primary-rgb, 0.5);
}
Enter fullscreen mode Exit fullscreen mode

II. Mixins Basics

4. Basic Border Radius Mixin 

@mixin border-radius($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}
Enter fullscreen mode Exit fullscreen mode

5. Box Shadow Mixin 

@mixin box-shadow($x: 0, $y: 2px, $blur: 4px, $color: rgba(0,0,0,0.25)) {
  box-shadow: $x $y $blur $color;
}
Enter fullscreen mode Exit fullscreen mode

6. Flex Center Mixin 

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

7. Responsive Media Query Mixin 

@mixin respond-to($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 600px) { @content; }
  }
  @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  }
  @else if $breakpoint == desktop {
    @media (min-width: 901px) { @content; }
  }
}
Enter fullscreen mode Exit fullscreen mode

III. Functions & Operations

8. Calculate Rem from Pixel 

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

body {
  font-size: rem(18);
}
Enter fullscreen mode Exit fullscreen mode

9. Modular Scale Font Size 

@function modular-scale($step, $base: 16px, $ratio: 1.333) {
  @return $base * pow($ratio, $step);
}

h1 {
  font-size: modular-scale(3);
}
Enter fullscreen mode Exit fullscreen mode

10. Contrast Color Based on Background 

@function contrast-color($color) {
  @if (lightness($color) > 50) {
    @return black;
  }
  @else {
    @return white;
  }
}

.button {
  background-color: $primary-color;
  color: contrast-color($primary-color);
}
Enter fullscreen mode Exit fullscreen mode

IV. Nesting & Selector Basics

11. Nested Selectors with Parent Reference 

nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      &.active {
        font-weight: bold;
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

12. Pseudo Elements and States 

.button {
  &:hover {
    background-color: lighten($primary-color, 10%);
  }
  &::after {
    content: "→";
    margin-left: 5px;
  }
}
Enter fullscreen mode Exit fullscreen mode

V. Control Directives

13. @if Conditional 

@mixin button-size($size) {
  @if $size == small {
    font-size: 12px;
    padding: 5px 10px;
  } @else if $size == large {
    font-size: 20px;
    padding: 15px 30px;
  } @else {
    font-size: 16px;
    padding: 10px 20px;
  }
}
Enter fullscreen mode Exit fullscreen mode

14. @for Loop for Generating Grid Columns 

@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}
Enter fullscreen mode Exit fullscreen mode

15. @each Loop for Themes 

$themes: light, dark, solarized;

@each $theme in $themes {
  .theme-#{$theme} {
    background-color: if($theme == light, white, black);
  }
}
Enter fullscreen mode Exit fullscreen mode

VI. Responsive Utilities

16. Flexible Container Width 

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

17. Hide on Mobile Mixin 

@mixin hide-on-mobile {
  @media (max-width: 600px) {
    display: none !important;
  }
}

.sidebar {
  @include hide-on-mobile;
}
Enter fullscreen mode Exit fullscreen mode

VII. Advanced Mixins & Helpers

18. Clearfix Mixin 

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}
Enter fullscreen mode Exit fullscreen mode

19. Text Truncation Mixin (Ellipsis) 

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

20. Transition Mixin 

@mixin transition($properties: all, $duration: 0.3s, $timing: ease-in-out) {
  transition: $properties $duration $timing;
}
Enter fullscreen mode Exit fullscreen mode

21. Custom Scrollbar Mixin (Webkit) 

@mixin scrollbar($width: 8px, $color: #aaa) {
  &::-webkit-scrollbar {
    width: $width;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: 10px;
  }
}
Enter fullscreen mode Exit fullscreen mode

VIII. Programmer-Favored Patterns

22. Utility Class Generator via Loop 

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: $i * 5px;
  }
}
Enter fullscreen mode Exit fullscreen mode

23. Responsive Font Size Mixin 

@mixin responsive-font($min, $max) {
  font-size: $min;
  @media (min-width: 600px) {
    font-size: calc(#{$min} + (#{$max} - #{$min}) * ((100vw - 600px) / 600));
  }
  @media (min-width: 1200px) {
    font-size: $max;
  }
}
Enter fullscreen mode Exit fullscreen mode

24. Hide Visually but Maintain Accessibility 

@mixin sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
Enter fullscreen mode Exit fullscreen mode

IX. Flexbox & Grid Utilities

25. Flex Row Centered 

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

26. Grid Helper Mixin 

@mixin grid-columns($cols) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-gap: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

X. Typography Utilities

27. Responsive Heading 

@mixin heading-size($min, $max) {
  font-size: $min;
  @media (min-width: 768px) {
    font-size: calc(#{$min} + (#{$max} - #{$min}) * ((100vw - 768px)/ 1024));
  }
  @media (min-width: 1792px) {
    font-size: $max;
  }
}
Enter fullscreen mode Exit fullscreen mode

XI. Useful Functions

28. Calculate Rem Value 

@function to-rem($px) {
  @return $px / 16 * 1rem;
}

body {
  font-size: to-rem(18);
}
Enter fullscreen mode Exit fullscreen mode

29. Color Contrast Function 

@function contrast-color($color) {
  @if (lightness($color) > 50) {
    @return black;
  }
  @else {
    @return white;
  }
}

.btn {
  background-color: $primary-color;
  color: contrast-color($primary-color);
}
Enter fullscreen mode Exit fullscreen mode

XII. Animations & Keyframes

30. Fade In Animation Mixin 

@mixin fade-in($duration: 0.5s, $ease: ease-in) {
  animation: fadeIn $duration $ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
Enter fullscreen mode Exit fullscreen mode

31. Slide In From Left 

@mixin slide-in-left($duration: 0.3s) {
  animation: slideInLeft $duration ease forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
Enter fullscreen mode Exit fullscreen mode

XIII. Shadow & Border Utilities

32. Box Shadow Levels 

$shadows: (
  level-1: 0 1px 3px rgba(0,0,0,0.12),
  level-2: 0 4px 6px rgba(0,0,0,0.15),
);

@mixin box-shadow-level($level) {
  box-shadow: map-get($shadows, $level);
}
Enter fullscreen mode Exit fullscreen mode

XIV. Programmer Favorites & Patterns

33. Truncate Multiline Text 

@mixin multiline-truncate($lines: 3) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

34. Circle Avatar Mixin 

@mixin avatar($size: 50px) {
  width: $size;
  height: $size;
  border-radius: 50%;
  object-fit: cover;
}
Enter fullscreen mode Exit fullscreen mode

XV. Scroll & Overlay Utilities

35. Scroll Lock Mixin 

@mixin scroll-lock {
  overflow: hidden;
  position: fixed;
  width: 100vw;
}
Enter fullscreen mode Exit fullscreen mode

36. Overlay Centered Absolute 

@mixin overlay-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Enter fullscreen mode Exit fullscreen mode

XVI. Helpers & Miscellaneous

37. Visually Hidden Mixin 

@mixin visually-hidden {
  position: absolute!important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
  border: 0;
}
Enter fullscreen mode Exit fullscreen mode

38. Text Stroke Effect 

@mixin text-stroke($color: black, $width: 1px) {
  -webkit-text-stroke: $width $color;
  text-stroke: $width $color;
}
Enter fullscreen mode Exit fullscreen mode

39. Custom Radio Button Style 

@mixin radio-style($size: 18px, $color: $primary-color) {
  appearance: none;
  width: $size;
  height: $size;
  border: 2px solid darken($color, 15%);
  border-radius: 50%;
  position: relative;
  cursor: pointer;

  &:checked::after {
    content: '';
    width: 50%;
    height: 50%;
    background: $color;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    left: 25%;
  }
}
Enter fullscreen mode Exit fullscreen mode

XVII. Grid & Layout

40. Centering with Grid 

.grid-center {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

41. CSS Grid Template Areas Mixin 

@mixin grid-template-areas($areas) {
  grid-template-areas: $areas;
}
Enter fullscreen mode Exit fullscreen mode

XVIII. Conditional Styling & Guards

42. Conditional Style Based on Theme 

@mixin theme-colors($theme) {
  @if $theme == light {
    background: white;
    color: black;
  } @else if $theme == dark {
    background: black;
    color: white;
  }
}
Enter fullscreen mode Exit fullscreen mode

XIX. Utility & Productivity

43. Box-Sizing Border-Box 

*,
*::before,
*::after {
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

44. Utility Mixin for Vertical Spacing 

@mixin vertical-space($amount) {
  margin-top: $amount;
  margin-bottom: $amount;
}
Enter fullscreen mode Exit fullscreen mode

XX. Popular Programmer Snippets

45. Aspect Ratio Box 

@mixin aspect-ratio($width, $height) {
  position: relative;
  &::before {
    content: '';
    display: block;
    padding-top: ($height / $width) * 100%;
  }
  > * {
    position: absolute;
    top: 0; right: 0; bottom:0; left:0;
  }
}
Enter fullscreen mode Exit fullscreen mode

46. Scrollbar Styles for Dark Mode 

@mixin scrollbar-dark {
  &::-webkit-scrollbar {
    width: 8px;
    background: #222;
  }
  &::-webkit-scrollbar-thumb {
    background: lighten(#222, 40%);
    border-radius: 10px;
  }
}
Enter fullscreen mode Exit fullscreen mode

47. Focus Ring for Accessibility 

@mixin focus-ring($color: #2684ff) {
  outline: 2px solid $color;
  outline-offset: 2px;
}
Enter fullscreen mode Exit fullscreen mode

48. Circle Button Shape 

@mixin circle-button($size: 50px) {
  width: $size;
  height: $size;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

49. Text Gradient 

@mixin text-gradient($start, $end) {
  background: linear-gradient(90deg, $start, $end);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

50. Smooth Scroll Behavior 

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)