Day 8: Sass & BEM

SASS

Sass is a scripting language that gets compiled into CSS, allowing us to use similar features to Javascript in our styling code. Sass allows us to create reusable variables and mixins which help to keep our code clean and makes sure that we don’t repeat ourselves. We can nest our CSS rules which keeps related styles together within our Sass files. Sass also allows us to extend classes that we define, again helping with code reusability as we just have to include the mixin instead of rewriting the same rules over and over.

A mixin that can be reused in our code.
Using the mixin.

BEM With Sass

Being able to extend classes and use nesting in Sass helps keep our BEM named CSS styles organized. We are able to nest our elements in the same code block and we can use the ampersand(&) sign to link our elements to their respective blocks. In Sass, we can also add pseudo classes right inside of the code block by using the ampersand too. Pseudo-classes allow us to change the style of element based on its state, for example, we could change the cursor to a pointer when the element is being hovered over.

Mixing Sass with BEM.

Closing

Sass and BEM are a very nice combination for styling our websites, BEM keeps our related styles together and Sass gives us some of the functionality of a scripting language in Javascript. Can’t wait to start adding these to my projects ✌️!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brent Carey

Brent Carey

Web Developer Studying at BrainStation 🧑🏽‍💻, documenting all the cool things I learn 📚, anime inspiration too 🦸🏽‍♂️🦹🏽‍♂️.