O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Summary

In this chapter we focused on layout. In essence, layout is the positioning, size, and spacing of our elements on the page. By focusing on these topics without getting distracted by color, or look and feel we can better structure our codebase. It also means from here we have full freedom over styling our page. We could apply numerous different themes (or skins) to what we have now.

We used Susy grids as well as our breakpoint mixin (bp) to create a solid, flexible grid system. With just 27 lines of Sass we generated our grid system which consists of almost 600 lines of CSS. We then used our media mixins and Susy to create a semantic layout, with the minimal amount of code.

In the next chapter, we'll focus on the colors, fonts, icons, and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required