Error in using @extends using Sass placeholders

Asked

Viewed 25 times

1

    @each $direction in $directions {
  %u-no-padding-#{$direction}{padding-#{direction}: 0;}
  %u-half-padding-#{$direction}{padding-#{direction}: $layout-module-size / 2;}
  %u-default-padding-#{$direction}{padding-#{direction}: $layout-module-size;}
  %u-double-padding-#{$direction}{padding-#{direction}: $layout-module-size * 2;}


  %u-no-margin-#{$direction}{margin-#{direction}: 0;}
  %u-half-margin-#{$direction}{margin-#{direction}: $layout-module-size / 2;}
  %u-default-margin-#{$direction}{margin-#{direction}: $layout-module-size;}
  %u-double-margin-#{$direction}{margin-#{direction}: $layout-module-size * 2;}
}

body{
  @extend %u-double-margin-top, %u-double-margin-bottom, %u-half-margin-bottom;
}

in the compilation this generating the following result

body {
  margin-direction: 60px;
}

body {
  margin-direction: 15px;
}

body {
  margin-direction: 60px;
}

Does anyone know how to solve this problem? I need the generated result to be inside the same body.

No answers

Browser other questions tagged

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