Шаблонные селекторы

Sass поддерживает специальный тип селекторов под названием шаблонные селекторы. Они похожи на селекторы классов и идентификаторов, только вместо # или . указывается %. Они предназначены для использования с директивой @extend.

Для получения дополнительной информации см. селекторы расширения.

Сами по себе, без использования @extend, наборы правил, которые используют шаблонные селекторы, не окажут влияния на CSS. Например:

scss
%inline-type {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin-right: -4px;
  vertical-align: top;
}

%for-grids {
    min-height: 1px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.sgrid-N {
    @extend %for-grids;
}

%inline-type
  display: inline-block
  *display: inline
  *zoom: 1
  margin-right: -4px
  vertical-align: top

%for-grids
    min-height: 1px
    position: relative
    padding-left: 10px
    padding-right: 10px
    margin-bottom: 20px

.sgrid-N
    @extend %for-grids
css
.sgrid-N {
  min-height: 1px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

Предыдущая страница

Вложенные свойства

Следующая страница

Комментирование

Ваша 
Поддержка