SCSS Mastery - Harnessing the Power of @for and @each Loops for Efficient Styling

July 02, 2021 • Dykraf

Like other programming languages, except it’s on CSS. Operators, variables, extend, function and mixins also can be use in SCSS/SASS.

Web Story

SCSS being on top of CSS has made front-end developer experience becoming more productive in the world of web development. It has played a significant role in building CSS solutions for web projects. In my humble opinion, SASS / SCSS has this capability like other programming languages, except it’s on CSS.

Using variables, operators with if, else, for, each and while has become natural in a programming language. It has all that features out of the box and make all your CSS with superpowers.

Let see how we unlock and reveal our CSS with superpowers on SCSS. First of all, write the HTML :

<div class="hello-world">
  <h1>H</h1>
  <h1>E</h1>
  <h1>L</h1>
  <h1>L</h1>
  <h1>O</h1>
  <br />
  <h2>W</h2>
  <h2>O</h2>
  <h2>R</h2>
  <h2>L</h2>
  <h2>D</h2>
</div>

Write down the SCSS base :

body {
  background-color: white;
  margin: 5rem 6rem;
  text-align: center;
  font-family: 'Poppins', 'sans-serif';
}
h1,
h2 {
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: 10rem;
}
h2 {
  font-size: 8rem;
}

The result on the HTML and SCSS

Now I am going to invert the whole color scheme on the CSS files and add a property of text-shadow to the H1 and H2 "Hello World" text:

@import url('https://fonts.googleapis.com/css?family=Poppins:900&display=swap');
body {
  background-color: black;
  margin: 5rem 6rem;
  text-align: center;
  font-family: 'Poppins', 'sans-serif';
}
h1,
h2 {
  margin: 0;
  padding: 0;
  color: white;
  display: inline-block;
  font-size: 10rem;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073,
    0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
h2 {
  font-size: 8rem;
}

The inverted color scheme with text-shadow property

Update the h1 properties using @for and @each in our SCSS for creating transition animation:

@for $j from 0 through 5 {
  h1:nth-child(0n + #{$j}),
  h2:nth-child(5n + #{$j}) {
    animation-name: animateGlithcy;
    animation-delay: #{$j/5}s;
    animation-duration: #{$j/2}s;
    animation-timing-function: linear;
    animation-direction: alternate-reverse;
    animation-iteration-count: infinite;
  }
}
@keyframes animateGlithcy {
  0% {
    opacity: 0.1;
    background-position: 0 0;
    filter: hue-rotate(0deg);
  }
  10% {
    background-position: 5px 0;
  }
  20% {
    background-position: -5px 0;
  }
  30% {
    background-position: 15px 0;
  }
  40% {
    background-position: -5px 0;
  }
  50% {
    background-position: -25px 0;
  }
  60% {
    background-position: -50px 0;
  }
  70% {
    background-position: 0 -20px;
  }
  80% {
    background-position: -60px -20px;
  }
  81% {
    background-position: 0 0;
  }
  100% {
    opacity: 1;
    background-position: 0 0;
    filter: hue-rotate(360deg);
  }
}

SCSS has other features that can leverage CSS pseudo-elements such as ::before and ::after. Check out our blog post here to learn more about how to utilize them in SCSS with samples.

SCSS (Sassy CSS) is a popular preprocessor that extends the capabilities of traditional CSS, empowering developers to create more efficient and maintainable styles. One of its standout features is the enhanced support for pseudo-elements ::before and ::after. In the upcoming sections, let's dive into the fascinating world of SCSS and discover how we can harness its potential to style and manipulate the ::before and ::after pseudo-elements. For more insights into SCSS functionality with CSS Pseudo elements, check out my other post here.

You can even combine SCSS with React or Vue, JavaScript frameworks, to achieve even more customized styling for your website. To learn how to use SCSS in React, check out my other blog post here. Happy coding!

References :

https://sass-lang.com/

https://tympanus.net/codrops/css_reference/transform-origin/

https://cubic-bezier.com/