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

The container mixin

Next, let's replace our container with Susy's container mixin. The container mixin sets the max-width of the containing element, which right now is our .container element. However, later in this chapter we will use this to semantically restrict certain parts of the design to our maximum width.

The container element takes a width argument, which will be the max-width. It also automatically applies the micro clearfix hack. This prevents the containers height from collapsing when the elements inside it are floated. I prefer the overflow: hidden method myself, but they do the same thing essentially.

By default, the container will be set to max-width: 100%. However, you can set it to be any valid unit of dimension, such as 60em, 1160px, ...

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