Tips for effectively drying up sass mixin code using before and after blocks

Question

Tips for effectively drying up sass mixin code using before and after blocks

Here is the SCSS code I currently have:


@if $position == bottom {
    &:after {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-top: -$triangle-width/2 -$stroke-width;
    }
}

@if $position == top {
    &:before {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-bottom: -$triangle-width/2 -$stroke-width;
    }
}

There is some duplicated code here that I'd like to streamline. I attempted to create a separate class, but it didn't work as expected. Any suggestions on how to optimize this? I thought about creating a mixin within a mixin, but that might be too complex. What are your thoughts?

css sass dry mixins

Answer 1

Answer №1

One effective strategy for keeping code DRY is to extract common components into mixins and then combine them into larger mixins. This method is commonly used in frameworks like Compass. Take a look at the Compass list mixins for reference.

@mixin base-triangle($triangle-width) {
  height: $triangle-width;
  width: $triangle-width;
  content:"";
  position:absolute;
}

@mixin triangle($position, $triangle-width: 4, $stroke-width: 4) {
  @if $position == bottom {
    &:after {
      @include base-triangle($triangle-width);
      margin-top: -$triangle-width/2 -$stroke-width;
    }
  }

  @if $position == top {
    &:before {
      @include base-triangle($triangle-width);
      margin-bottom: -$triangle-width/2 -$stroke-width;
    }
  }
}

.foo {
  @include triangle("top", 8px, 8px);
}

.bar {
  @include triangle("bottom");
}

Compiles to:

.foo:before {
  height: 8px;
  width: 8px;
  content: "";
  position: absolute;
  margin-bottom: -12px;
}

.bar:after {
  height: 4;
  width: 4;
  content: "";
  position: absolute;
  margin-top: -6;
}

Answer 2

One effective strategy for keeping code DRY is to extract common components into mixins and then combine them into larger mixins. This method is commonly used in frameworks like Compass. Take a look at the Compass list mixins for reference.

@mixin base-triangle($triangle-width) {
  height: $triangle-width;
  width: $triangle-width;
  content:"";
  position:absolute;
}

@mixin triangle($position, $triangle-width: 4, $stroke-width: 4) {
  @if $position == bottom {
    &:after {
      @include base-triangle($triangle-width);
      margin-top: -$triangle-width/2 -$stroke-width;
    }
  }

  @if $position == top {
    &:before {
      @include base-triangle($triangle-width);
      margin-bottom: -$triangle-width/2 -$stroke-width;
    }
  }
}

.foo {
  @include triangle("top", 8px, 8px);
}

.bar {
  @include triangle("bottom");
}

Compiles to:

.foo:before {
  height: 8px;
  width: 8px;
  content: "";
  position: absolute;
  margin-bottom: -12px;
}

.bar:after {
  height: 4;
  width: 4;
  content: "";
  position: absolute;
  margin-top: -6;
}

Answer 3

Answer №2

One effective way to utilize this type of mixin is by excluding the :before or :after from the mixin and directly applying the mixin in the desired pseudo-class. This not only streamlines the mixin but also eliminates any dependencies on conditional logic.

Here's a sample of how the mixin can be used:

@mixin customMixin($position, $size, $stroke) {
    position: absolute;
    width: $size;
    height: $size;
    margin-#{$position}: -($size / 2) - $stroke;
    content: '';
}

Sample application:

.example {

    &:before {
        @include customMixin(top, 20px, 20px);
    }
}

.example-two {

    &:after {
        @include customMixin(bottom, 20px, 20px);
    }
}

Answer 4

One effective way to utilize this type of mixin is by excluding the :before or :after from the mixin and directly applying the mixin in the desired pseudo-class. This not only streamlines the mixin but also eliminates any dependencies on conditional logic.

Here's a sample of how the mixin can be used:

@mixin customMixin($position, $size, $stroke) {
    position: absolute;
    width: $size;
    height: $size;
    margin-#{$position}: -($size / 2) - $stroke;
    content: '';
}

Sample application:

.example {

    &:before {
        @include customMixin(top, 20px, 20px);
    }
}

.example-two {

    &:after {
        @include customMixin(bottom, 20px, 20px);
    }
}

Answer 5

Answer №3

These SASS variables serve as placeholders for this example.

$position : top ;
$triangle-width : 100px;
$stroke-width : 100px;

A SASS mixin that consolidates logic in one location. The absence of IF-ELSE conditions allows for versatile usage across multiple instances.

@mixin before_after($margin-side,$before-after){
&:#{$before-after} {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-#{$margin-side}: -$triangle-width/2 -$stroke-width;
    }

}

The mixin can be integrated with IF-ELSE statements to guide functionality.

p{
    @if $position == top {

        @include before_after(bottom,before);
    }@else{
        @include before_after(top,after);
    }
}

Alternatively, the mixin can be applied without the use of IF-ELSE conditions.

p{
@include before_after(bottom,before);
}

div{
@include before_after(top,before);
}

PS: This response has been expanded to offer additional context for @Sean Stopnik. It aims to provide a foundational understanding for further exploration and development by the original questioner, rather than detailing every aspect of variable application.

Please contribute constructive comments to enhance the answer.
If you have suggestions for improvement or an alternative solution, feel free to share.
Respect others' time by avoiding unnecessary spam in the comment section, as it influences readers seeking clarity on the response.

Answer 6

These SASS variables serve as placeholders for this example.

$position : top ;
$triangle-width : 100px;
$stroke-width : 100px;

A SASS mixin that consolidates logic in one location. The absence of IF-ELSE conditions allows for versatile usage across multiple instances.

@mixin before_after($margin-side,$before-after){
&:#{$before-after} {
      height: $triangle-width;
      width: $triangle-width;
      content:"";
      position:absolute;
      margin-#{$margin-side}: -$triangle-width/2 -$stroke-width;
    }

}

The mixin can be integrated with IF-ELSE statements to guide functionality.

p{
    @if $position == top {

        @include before_after(bottom,before);
    }@else{
        @include before_after(top,after);
    }
}

Alternatively, the mixin can be applied without the use of IF-ELSE conditions.

p{
@include before_after(bottom,before);
}

div{
@include before_after(top,before);
}

PS: This response has been expanded to offer additional context for @Sean Stopnik. It aims to provide a foundational understanding for further exploration and development by the original questioner, rather than detailing every aspect of variable application.

Please contribute constructive comments to enhance the answer.
If you have suggestions for improvement or an alternative solution, feel free to share.
Respect others' time by avoiding unnecessary spam in the comment section, as it influences readers seeking clarity on the response.

Tips for effectively drying up sass mixin code using before and after blocks

Answer №1

Answer №2

Answer №3

Similar questions

Utilize the grid system from Bootstrap to style HTML div elements

Utilize data attributes in VueJS to dynamically style elements

The Chrome browser is failing to detect the hover function of the Surface Pen stylus

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

Issue with Google Chrome not showing stylesheets on Windows 7

When hovering over an "li" element, setting the color to "a" will create a dynamic visual effect

Having trouble with CSS text not wrapping correctly?

Problem with the `file` input not working properly

Trouble encountered in adjusting the alignment of labels

Utilizing Jquery to pass two classes along

The hover effect on sibling elements is not functioning for the <img> tag

Ways to adjust image sizes to fill the row with CSS

Is it possible to target the sibling of the currently selected or focused element with CSS?

Ensure that the sidebar in your React application occupies the full height of the page, regardless of the presence of scrolling

Is it truly unsemantic to use transparent <hr> elements for responsive vertical spacing?

I'm having trouble displaying my background image unless I specifically set the height in pixels or viewport height

Troubleshooting issue with Bootstrap 4 carousel displaying images with overlay

Creating a Form with HTML and CSS

What is the reason behind hyperlinks breaking the continuity of the text on a line? Is there a

Error encountered in the VS Task Runner Explorer: Node Sass failed to locate a binding