Команда @extend

Некоторые селекторы используют одни и те же стилевые правила. Чтобы не повторять одинаковый код несколько раз в CSS применяется группирование для удобства представления и сокращения кода. В этом случае селекторы перечисляются друг за другом через запятую, при этом стиль применяется к каждому селектору в группе.

.browser, .ie, .cr, .fx {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}

В Sass для этих целей применяется команда @extend, она автоматически группирует те селекторы, в которых добавляется @extend. Вначале мы пишем селектор, содержащий одинаковые стилевые правила для всей группы, затем к любому другому селектору добавляем @extend и через пробел имя первого селектора. В примере ниже показано применение этой команды на практике.

.browser {
  min-height: 16px; 
  padding-left: 20px; 
  background-repeat: no-repeat;
}
.ie { 
  @extend .browser;
  background-image: url(../img/browser_ie.png);
}
.cr { 
  @extend .browser;
  background-image: url(../img/browser_cr.png); 
}
.fx { 
  @extend .browser;
  background-image: url(../img/browser_fx.png); 
}

Наши селекторы различаются только значением background-image, остальные стилевые правила у них общие. Поэтому мы добавляем @extend для группирования и вот что получим на выходе.

.browser, .ie, .cr, .fx {
  min-height: 16px;
  padding-left: 20px;
  background-repeat: no-repeat;
}
.ie {
  background-image: url(../img/browser_ie.png);
}
.cr {
  background-image: url(../img/browser_cr.png);
}
.fx {
  background-image: url(../img/browser_fx.png);
}

Важно, чтобы @extend ссылался на имя класса описанного выше.

Во многих случаях надо просто вставить повторяющийся фрагмент кода в набор селекторов, без создания нового класса. Синтаксис при этом немного поменяется, мы определяем фрагмент кода, начиная его с символа %, как показано ниже.

%browser {
  min-height: 16px; 
  padding-left: 20px; 
  background-repeat: no-repeat;
}
.ie { 
  @extend %browser;
  background-image: url(../img/browser_ie.png);
}
.cr { 
  @extend %browser;
  background-image: url(../img/browser_cr.png); 
}
.fx { 
  @extend %browser;
  background-image: url(../img/browser_fx.png); 
}

Теперь никакого класса browser нет и в помине.