Converting CSS to SCSS using a for loop

Question

Converting CSS to SCSS using a for loop

I am currently learning SCSS and I have successfully converted the CSS code below to SCSS, but now I am struggling with completing the rest. I have tried looking for help online, but so far no luck. Can someone please assist me with this?

.par-1 {
    width: 3px;
    color:#fff;
    padding: 1px 0;
}
.par-2 {
    width: 6px;
    color: #000;
    padding: 0 2px;
}
.par-3 {
    width: 9px;
    color: #fff;
    padding: 3px 0;
}
.par-4 {
    width: 12px;
    color: #000;
    padding: 0 4px;
}
.par-5 {
    width: 15px;
    color: #fff;
    padding: 5px 0;
}
.par-6 {
    width: 18px;
    color: #000;
    padding: 0 6px;
}

So far, I have only managed to adapt the widths using a loop in SCSS, but I can't seem to figure out the remaining properties. Any guidance would be greatly appreciated! Thank you.

$a:1;
@for $a from 1 through 6 {
    .item-#{$a} 
    {width: 3px * $a; }
}

css sass

Answer 1

Answer №1

To achieve the desired paddings and color, you can implement a simple if-else statement:

@for $a from 1 through 6 {
  .par-#{$a} {
    width: 3px * $a;
    @if $a % 2 == 0 {
      color: #000;
      padding: 0 #{$a}px;
    } @else {
      color: #fff;
      padding: #{$a}px 0;
    }
  }
}

This code will generate the following CSS styles:

.par-1 {
  width: 3px;
  color: #fff;
  padding: 1px 0;
}

.par-2 {
  width: 6px;
  color: #000;
  padding: 0 2px;
}

.par-3 {
  width: 9px;
  color: #fff;
  padding: 3px 0;
}

.par-4 {
  width: 12px;
  color: #000;
  padding: 0 4px;
}

.par-5 {
  width: 15px;
  color: #fff;
  padding: 5px 0;
}

.par-6 {
  width: 18px;
  color: #000;
  padding: 0 6px;
}

Answer 2

To achieve the desired paddings and color, you can implement a simple if-else statement:

@for $a from 1 through 6 {
  .par-#{$a} {
    width: 3px * $a;
    @if $a % 2 == 0 {
      color: #000;
      padding: 0 #{$a}px;
    } @else {
      color: #fff;
      padding: #{$a}px 0;
    }
  }
}

This code will generate the following CSS styles:

.par-1 {
  width: 3px;
  color: #fff;
  padding: 1px 0;
}

.par-2 {
  width: 6px;
  color: #000;
  padding: 0 2px;
}

.par-3 {
  width: 9px;
  color: #fff;
  padding: 3px 0;
}

.par-4 {
  width: 12px;
  color: #000;
  padding: 0 4px;
}

.par-5 {
  width: 15px;
  color: #fff;
  padding: 5px 0;
}

.par-6 {
  width: 18px;
  color: #000;
  padding: 0 6px;
}

Converting CSS to SCSS using a for loop

Answer №1

Similar questions

JS seems to kick in only after a couple of page refreshes

Need assistance with a coin flip using HTML and Javascript?

why is it that I am not achieving the expected results in certain areas of my work?

Step-by-step guide on replicating a website along with its CSS styles and scripts

Having trouble getting your jQuery/JavaScript function to detect the property "-webkit-clip-path"?

What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

html scroll to the flickering page

Tips for modifying the color of the last anchor in a list item

A guide on configuring Flexbox to consistently display three columns

Sass compilation failed due to an error in the CSS code provided

Strategies for temporarily storing values within md-list-item in AngularJS

Pictures fail to load on Safari browser for desktop and iPhone, yet display correctly on various other smartphones and Windows browsers

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

Add some pizzazz to your design using jQuery!

What are the proper steps to ensure images are displayed correctly on mobile devices?

How can I use jQuery to vertically align an element?

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

Could routerLinkActive be used to substitute a class rather than simply appending one?