SASS – Efficient use of Mixin and Placeholder

SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name.

Mixins should to be used carefully

Mixin is a cool feature of SASS that make CSS code re-usable and maintainable, but it brings code redundancy, It may bloat CSS by repeating the code. Consider the below example

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

@mixinbox{

border:1pxsolid#ccc;

padding:10px;

background:#eee;

}

.container1{

@inlcude box;

width:30%;

}

.container2{

@include box;

}

/* CSS output of the same will be*/

.container1{

border:1pxsolid#ccc;

padding:10px;

background:#eee;

with:30%;

}

.container2{

border:1pxsolid#ccc;

padding:10px;

background:#eee;

}

This is obviously not an ideal way of writing CSS. Good organization of SCSS and smart use of its features is required to make it actually beautiful.

Placeholder will not appear in CSS output unless we @extend them.

Placeholder in place of mixins

In the above scenario, mixin spreading unnecessary dust. Placeholder will make more sense here. See the same code with placeholder below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

%box{

border:1pxsolid#ccc;

padding:10px;

background:#eee;

}

.container1{

@extend%box;

width:30%;

}

.container2{

@extend%box;

width:70%;

}

/* CSS output of the same will be*/

.container1,.container2{

border:1pxsolid#ccc;

padding:10px;

background:#eee;

}

.container2{

with:30%;

}

Efficient use of mixins

That doesn’t mean mixin is useless, mixin is great but it need to be used smartly, considering the above scenario placeholder make sense but when a return value dependent on an argument passed to it. It will generate different output with every use. Mixin for border is a good example.