Наглядный пример

Koala

SassDocs

Front-End Framework Bootstrap

Bootstrap (рус)

Sass

@import «import.scss»;

/*——Variables——*/

$link_color: #000fc9;
$link_size: 50px;

a{
color: $link_color;
font-size: $link_size;
}

/*——Scope——*/

$main_color: #ccc;

a{
$main_color: #111;
color: $main_color;
}

p{
color: $main_color;
}

/*——Math——*/

$container_width: 100%;

.container{
width: $container_width;
}

.col-7{
width: $container_width / 7;
}

/*——Nesting——*/

.container{
width: 100%;

h1{
font-size: 30px
}

a{
color: #222;
text-decoration: none;

&:hover{
text-decoration: underline; } }
}

/*——Extend——*/

.button{
background: #444;
color: #fff;
border-radius: 3px;
padding: 10px 20px;
}

.button-error{
@extend .button;
background: red;
}

/*——Mixin——*/

@mixin link{
color: $link_color;
font-size: $link_size;
text-decoration: none;
}

.container{

a{
@include link; }
}

/*——Functions——*/

@function getColumnWidth($width, $columns, $margin){
@return ($width / $columns) — ($margin * 2)
}

$container_width: 100%;
$columns: 4;
$margin: 1%;

.column{
float: left;
width: getColumnWidth($container_width, $columns, $margin);
margin: 0 $margin;
}

Bootstrap

Пример: Сложенные по горизонтали

Используя единичный набор .col-md-* классовой разметки, вы можете создать базовую систему разметки, которая запускается одновременно на мобильные устройства и планшетные устройства (от экстра маленьких до малых диапазонов) до того как выстроится горизонталь средних устройств. Разместите столбцы разметки в любом .row.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Пример: Резиновые блоки

Превратите любую фиксированную ширину сетки макет в полную ширину макета, изменив последний .container на .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

https://youtu.be/f7CXSxeLCik