The container mixin and class limit content to the max width configured by the $container
variable, using the $gutter
variable by default for left and right padding.
<div class="container">
<p>Lorem consectetur porro saepe alias quo. Iure fugiat illo magnam velit sapiente esse? Dicta adipisci illum nisi perspiciatis eligendi! Assumenda sequi aliquam dignissimos dolore nesciunt animi. Laboriosam ad ad nam.</p>
<p>Amet aliquam elit saepe magnam reiciendis Incidunt possimus distinctio mollitia ea iure earum. Earum beatae provident ipsa necessitatibus distinctio Rerum unde obcaecati animi consequuntur molestias. Error corrupti placeat perferendis iusto</p>
<p>Dolor quidem eius cupiditate ipsum rem accusantium. Laborum temporibus sit a rem a Itaque harum officiis deleniti dolores magnam sapiente? Provident tempore quidem consectetur fugiat assumenda. Libero unde dolor nulla.</p>
</div>
///
/// container mixin
///
@mixin container($max-width: $container, $h-padding: $gutter) {
margin-left: auto;
margin-right: auto;
max-width: $max-width;
padding-left: $h-padding;
padding-right: $h-padding;
position: relative;
}
.container {
@include container;
}