CODEWITHSUNDEEP
csstwitter-bootstrapsass
xtianpoop
xtianpoop

Reputation: 29

Need help using multiple mixins to create DRY themes

I'm refactoring all my CSS (over 1000 lines) into SCSS right now while also learning SASS. I'm trying to find the best way to use repeated components across pages with its own theme to its own page. Think:

new SCSS

$blue: hsl(193,99%,47%);
$buffer: 1.5em 0em 1.5em 0em;
$padding: 1em 1em;
$right: -15px;
$left: -16px;
 @mixin box-shadow($hover, $direction, $color) {
   @if $hover == true {
     &:hover {
      @if $direction == 'right' {
        box-shadow: 8.5px 7.5px 0px 0px $color;
      } @else if $direction == 'left' {
        box-shadow: -8.5px 7.5px 0px 0px $color;
      }       
     }
   } @else if $hover == false {
    @if $direction == 'right' {
      box-shadow: 8.5px 7.5px 0px 0px $color;
    } @else if $direction == 'left' {
      box-shadow: -8.5px 7.5px 0px 0px $color;
    }
   }
 }
@mixin background-color($color) {
  background-color: $color;
}
@mixin card-pull($direction) {
  @if $direction == 'right' {
    right: $right
  }
  @else if $direction == 'left' {
    left: $left
  }
}

What I've built so far, but needs help, advice, guidance (because so, so wrong):

.card {
    @include background-color($color);
    @include card-pull(left);
    @include box-shadow(false,right,$color);

    margin: $buffer;
    padding: $padding;

}

original HTML (using Bootstrap):

<div class="container-fluid">
    <div class="row col-md-5 col-sm-11 col-xs-11 buffer blue black-shadow pull-left padding text-right card-left">
        <h1>Title</h1>
    </div>

Instead of all the additional classes, I just want to be able to add <div class="row col-md-5 col-sm-11 col-xs-11 card">

Upvotes: 0

Views: 54

Answers (1)

Seth Warburton
Seth Warburton

Reputation: 2413

Why??

You might think you are creating DRYer code, while looking at your Scss source, but you are doing the opposite. You are just adding bloat to the compiled CSS, which is the only bit site visitors care about.

Additionally, a mixin like @include background-color($color); just doesn't make sense, it's longer to type than background-color: $color; and just makes your code harder to read. Harder to read, harder to write.

A couple of other tips:

$buffer: 1.5em 0em 1.5em 0em; would be better written as just $buffer: 1.5em 0; the result is exactly the same, with less code. DRY.

Similarly $padding: 1em 1em; == $padding: 1em; DRY.

0 doesn't need a unit. 0px, 0em, 0elephants, 0telephones. all of them are equal to 0.

My advice, start by just renaming your .css files to .scss and then looking where improvements can be made to your CSS first, otherwise I think you'll just end up making things worse. Sorry to be so blunt.

Upvotes: 1

Related Questions