4
\$\begingroup\$

I am struggling with the basic concepts of SASS.

I have a page that has multiple section, all of them are sharing properties like width, font-size etc.

I would like to optimize my code and do one of the following:

1. Use an extendable silent class

%main-section{
    width: 100%;
    //... more styles
}

.about {
    // this is a main-section
    @extend %main-section;
}

2. mixin

@mixin main-section($text-color, $bg-color) {

  //some paramaters would provide a flexible module
  width: 100%;
  // etc.
}

3. just a simple class to apply in my HTML

.main-section{
    width: 100%;
    //... more styles
}

I don't know which one i should choose. Maybe there's even a better solution i didn't mention. What is your opinion?

\$\endgroup\$
  • \$\begingroup\$ I would def. go with option 3. It seems like an attempt to over complicate your code just to use cool SASS features. \$\endgroup\$ – aaronmallen Jun 27 '14 at 19:48
2
\$\begingroup\$

Best solution: Create a single section class and add it to all sections.

Second best solution: Write a specific section class and @extend on other sections (in case you do not have control of HTML)

Worst solution: Writing a mixin (duplicates styles)

\$\endgroup\$
2
\$\begingroup\$

There is no hard right or wrong answer here. Using @extend is the obvious choice, but it can work against you. The only way to tell is to compile it both ways and see which one gives you the smaller result.

The following code compiles to 340 bytes:

%width {
    width: 100%;
}

%font-size {
    font-size: 1.2em;
}

.foo {
    @extend %width;
    @extend %font-size;
}

.bar {
    @extend %width;
    color: red;
}

.baz {
    @extend %width;

    p {
        @extend %font-size;
    }
}

.fizz {
    @extend %width;
    border: 1px solid;
}

.boo {
    @extend %font-size;
    border-radius: 1em;
}

Here's a non-extended version that compiles to 436 bytes (a savings of 4 bytes):

.foo {
    width: 100%;
    font-size: 1.2em;
}

.bar {
    width: 100%;
    color: red;
}

.baz {
    width: 100%;

    p {
        font-size: 1.2em;
    }
}

.fizz {
    width: 100%;
    border: 1px solid;
}

.boo {
    font-size: 1.2em;
    border-radius: 1em;
}

The more often you extend something small, the less efficient it becomes. This is especially true when you've got non-extended code to go with it or multiple extends for the same selector since Sass has to write out the same selector twice.

If all you want to do is have consistent values, using variables just might be your best option:

$width: 100%;

$font-size: 1.2em;

.foo {
    width: $width;
    font-size: $font-size;
}

.bar {
    width: $width;
    color: red;
}

.baz {
    width: $width;

    p {
        font-size: $font-size;
    }
}

.fizz {
    width: $width;
    border: 1px solid;
}

.boo {
    font-size: $font-size;
    border-radius: 1em;
}
\$\endgroup\$
1
\$\begingroup\$

Calling a mix-in for each section will duplicate the rules. Remember, you want to keep your code as D.R.Y (do not repeat) as possible. Inuit.css does something similar with the margins of elements. They use a %rhythm silent class that defines a global margin for anything that extends it.

I don't know if there is a benefit to @extending slient class vs regular classes or tags. I "believe" it is more preference than anything.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.