anpleenko
3/25/2015 - 8:49 AM

Center SASS mixins

Center SASS mixins

$pixel: px;

//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//    миксин для центрирования блоков
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin center() {
  margin-right : auto;
  margin-left  : auto;
}

//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//    миксин для центирирования блоков без указания ширины
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin table-center() {
  display      : table;
  margin-right : auto;
  margin-left  : auto;
}

//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//    миксин для центирирования блоков без указания ширины
//    не обязательный параметр $width
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin block-center($width : 0) {
  @if $width != 0 {
    width: $width + $pixel;
  }

  display      : block;
  margin-right : auto;
  margin-left  : auto;
}

//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//    центрирование блока с помощью position: absolute;
//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin absolute-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}