MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Modular CSS with Sass

Course Summary

Today’s websites and applications are larger than ever and a lot hinges on the CSS architecture. CSS that is poorly thought-out can be a strain on development and maintenance in the long run. In this course, we're going to build a UI toolkit using many of the best practices and principles of modular CSS architecture. We'll learn how a modular approach with Sass can boost our workflow and cut down maintenance by reducing the amount of code we write. It can also improve how our code scales because we're able to reuse it on other parts of our project.

  • +

    Course Syllabus

    Getting Modular with Mixins and Functions

    We'll start by creating our project's main configuration file, then write mixins and functions that will help make our project easier to scale and maintain. 10 steps
    • Course Overview 1:52
    • The Project Config File 9:14
    • Pixels to Em Function 6:35
    • Sass Function Challenge 1 objective
    • Colors with Sass Maps 6:35
    • Nested Sass Maps 7:20
    • Review: Mixins and Functions 5 questions
    • Background Image Mixin 7:30
    • Pseudo-Element Mixin with @error 5:45
    • Sass Directives Challenge 1 objective

    Sass and BEM

    With the BEM (Block, Element, Modifier) methodology we're able to define a naming convention that will help make our CSS modular, portable and easier to understand by other designers and developers. 9 steps

    SMACSS and Sass

    SMACSS (Scalable and Modular Architecture for CSS) is a style guide for organizing our CSS. It aims to identify repeating patterns we then code into flexible, re-usable modules. In this stage, we'll continue following the patterns of BEM while using the organization methods of SMACSS. 6 steps

    Sass Grid System

    In this stage, we'll learn how to build an easily configurable fluid grid system you can use on any Sass project. 6 steps

    Modular Media Queries

    In this stage, we'll learn how to write modular media queries with Sass. 7 steps

Course Fee:
USD 25

Course Type:


Course Status:



1 - 4 hours / week

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url