Increment margin in pixels in Sass

Asked

Viewed 61 times

1

I need to create margins, top, right, left and bottom, I would like to loop in Sass from 0 to 100. Final CSS would look something like this:

margem-top: 1px;
margem-top: 2px;

margem-left: 66px;
margem-left: 88px;

margem-bottom: 15px;
margem-bottom: 100px;
css sass

1 answer

2


I did not quite understand the question-related example. But you can loop through the sequence (1 to 100) and one through the directions (top, right, bottom and left) and create classes for each of the situations.

Ex.

SASS:

$_DIRECTIONS: (top right bottom left)

@for $i from 1 through 100
  .margin-#{$i}
    margin: #{$i}px

  @each $direction in $_DIRECTIONS
    .margin-#{$direction}-#{$i}
      margin-#{$direction}: #{$i}px

SCSS:

$_DIRECTIONS: (top right bottom left);

@for $i from 1 through 100 {
  .margin-#{$i} { margin: #{$i}px; }

  @each $direction in $_DIRECTIONS {
    .margin-#{$direction}-#{$i} { margin-#{$direction}: #{$i}px; }
  }
}

HTML:

<div class="container margin-top-12 margin-left-15 margin-bottom-88"></div>

Browser other questions tagged css sass

You are not signed in. Login or sign up in order to post.