Sass Tutorials #6 - Creating Configurable Shapes Using Mixins

This is the 6th tutorial in a series that show users how to code CSS with Sass.

This tutorial shows users how to create mixins that are configurable with the use of if statements to create a circle and a triangle. More Sass basic tutorials are on the way along with Compass tutorials coming soon!

[gatilinmaxim]

Very easy, man! I'm from Russia and I know English very bad, but I understand all in this video!

[muhammadmuneeb]

just awesome tuts.... really easy to understand .... and some people saying that font is small... i watched videos at 1080p and its pretty clear... 

[viktorlubchuk]

thanks for lessons !! very good tutorials!!! 

[syntaxfm]

@hotell7 They aren't currently, however we should have them available. I'll add them as a public repo on my github later this week.

[aanujkanojia]

Its good to found you on youtube... :)

These are pretty good SASS tutorials... Thanks for making my life easier... :)

Cheers... :)

[SpiritMolecule]

fantastic videos, thank u so much they really helped me out. definitely going to subscribe to the Pro package to support you.

[patriotir]

@mixin triangle ($width, $dir, $bgColor) {
width: 0;
height: 0;
@if$dir == top {
border: $width/2 solid transparent;
border-bottom: $width/2 solid $bgColor;
border: $width/2 solid transparent;
border-top: $width/2 solid $bgColor;
border: $width/2 solid transparent;
border-right: $width/2 solid $bgColor;
border: $width/2 solid transparent;
border-left: $width/2 solid $bgColor;
}
}

[tbrew]

so i just noticed that these videos are from nearly 6 years ago. has sass changed much since then?

[DeanMachine]

why not have all of the repeated declarations outside of the if statements? ie width and height and the transparent borders?

[VishalSharma-lool]

What is BoilerPlate heard the term many times..?