Используем SASS mixins, extend и variables

​

Недавно в Twitter состоялся диалог, в процессе которого я осознал, что многие вещи в SASS для многих новичков (да и не только) могут быть непонятными. В этой статье рассмотрим простые и наиболее важные правила использования переменных, @extend и @mixin в SASS.

Переменные SASS

Используйте переменную, когда у вас есть одно значение, которое вы потом будете применять в коде неоднократно. Например:

 $color: #444; 
 $width: 4em; 
 .module {
   color: $color; 
 }

Такая запись будет компилироваться в:

 .module {
   color: #444;
 }

Расширения (@extend)

Используйте @exntend, когда необходимо сохранить сразу несколько свойств, чтобы в дальнейшем их передать нужному селектору:

.module {
  background: #fff;
  color: #444; 
 } 
.main_module { 
  @extend .module;
  min-height: 3em;
 } 
.sidebar_module { 
  @extend .module;
  min-height: 2em;
}

Такая запись скомпилируется в :

 .module, .main_module, .sidebar_module { 
  background: #fff;
  color: #444; 
 } 
 .main_module {
   min-height: 3em; 
 } 
 .sidebar_module { 
  min-height: 2em;
 } 

Примеси (@mixin)

@mixin всегда компилируются сразу в CSS , на том месте, где они появляются в коде. Если в расширениях @extend содержатся примеси @mixin, то соответственно правил будет создано больше. Правило записи:

@mixin module { background: #fff; color: #444; }

.main_module {
 @include module; 
 min-height: 3em;
 } 
.sidebar_module { 
 @include module; 
 min-height: 2em;
 }

Скомпилируется в :

 .main_module { 
   background: #fff;
   color: #444;
   min-height: 3em;
 } 
.sidebar_module {
   background: #fff; 
   color: #444;
   min-height: 2em;
 } 

Вот почему важно использовать @extend – код становится намного короче.

Как правило, я использую @mixin для вычислений. Логика простая, если не нужно передавать переменную, то и @mixin не нужно использовать:

@mixin module($parent-color) { 
 color: darken($parent-color, 50%); 
} 
.main_module {
 @include module(#ccc);
 min-height: 3em;
 } 
.sidebar_module {
 @include module(#444);
 min-height: 2em;
 }

Такое правило компилируется в:

.main_module {
  color: #999;
  min-height: 3em;
 } 
.sidebar_module {
  color: #000;
  min-height: 2em;
 }