Increase margin in pixels in sass

Question

Increase margin in pixels in sass

Navigation

#1 by (2 votes)

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

asked by anonymous 31.01.2017 / 17:43

1 answer

How to support transactions with JUnit and Demoiselle 2.4.2 Angular Panels

score 2 · Accepted Answer

I did not quite understand the example related to the question. But you can loop through the sequence (1 to 100) and one by traversing the directions (top, right, bottom and left) and creating 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>