Using Less / Использование Less

Using Less / Использование Less

Bootstrap's CSS построен на Less, препроцессор с дополнительной функциональностью, как переменных, mixins, и функции для компиляции CSS. Тем, кто хочет использовать источник Less файлы вместо наших скомпилированных файлов CSS могут воспользоваться многочисленными переменными и mixins которые мы используем во всем фреймверке.

Переменные разметки и mixins охвачены в разделе Разметка системы.

Компиляция Bootstrap

Bootstrap может быть использован в по меньшей мере двумя способами: компилированным CSS или с источником Less файлов. Для компиляции Less файлов, посетите README для того, как настроить среду разработки для запуска через необходимые команды.

Инструменты сторонних компиляций могут работать с Bootstrap, но они не поддерживается нашей основной командой.

Переменные

Переменные используются на протяжении всего проекта, как способ централизации и обмена часто используемых значений как цвета, отступы, или стеки шрифта. Для полной разбивки смотрите Настроить.

Цвета

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 60%);   // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Каркас

Количество переменных для быстрой настройки основных элементов структуры вашего сайта.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Легко делать стиль ваших ссылок с нужным цветом только с одним значением.

// Variables
@link-color:       @brand-primary;
@link-color-hover: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-color-hover;
    text-decoration: underline;
  }
}

Обратите внимание, что @link-color-hover использует функцию, другого удивительного инструмента Less, чтобы автоматически создавать право изменять цвет при наведении. Вы можете использовать darken, lighten, saturate, иdesaturate.

Типография

Легко установить тип вида (type face), размер текста, ведущий текст, и прочее с несколькими быстрыми переменными. Bootstrap позволяет использовать их, а также предоставляет легкие типографские mixins..

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Иконки

Две быстрые переменные для настройки размещения и определения названий файлов значков.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Компоненты

Компоненты во всем Bootstrap позволяют использовать некоторые переменные по умолчанию для установления общих значений. Вот наиболее часто используемые.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Поставщики mixin

Поставщики mixins подмешиваются в код, чтобы помочь поддерживать большинство браузеров через включение их соответствующих префиксов в вашу сборку CSS.

Размерность блоков

Сброс компонентов box model в одном реализован. Чтобы понять контекст, посмотрите это полезные статьи от Mozilla.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Округление углов

Сегодня все современные браузеры поддерживают безпрефиксные свойства border-radius. И поэтому, сейчас нет.border-radius() mixin, но Bootstrap делает включения ярлыков для быстрого закругления двух углов с определенных сторон объекта.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Тени

Если ваша целевая аудитория использует новейшие версии современных браузеров и устройств, убедитесь, что вы в себя используете свойство box-shadow Если вы нуждаетесь в поддержке устройств, работающих на предыдущих версиях Android (перед-v4) и iOS (перед-iOS 5), используйте устаревший для включения необходимых префиксов -webkit.

Не рекомендуемые mixin по состоянию на v3.1.0, изначально Bootstrap официально не поддерживает устаревшие платформы, не поддерживающие стандартные свойства. Для сохранения обратной совместимости, Bootstrap будет продолжать использовать mixin до тех пор, пока внутренне до Bootstrap v4.

Не забудьде использовать цвета в режиме rgba() в ваших блоках тени (box shadows), ибо в таком случае они наименее проблематично сливаются с фоном.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Переходы

Три mixins для гибкости. Укажите всю информацию по переходам за раз, или укажите отдельно задержки и продолжительность, если необходимо.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Преобразования

Вращение, масштабирование, перевод (перенос), или наклон любого объекта.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Анимации

Одиночный mixin для использования всех свойств анимации CSS3 в одном объявлении, а другие mixins - для индивидуальных свойств.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Прозрачность

Установите непрозрачность для всех браузеров и предоставьте отдельный filter для IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Текст заполнения

Предоставьте контекст для элементов управления формы внутри каждого поля.

.placeholder(@color: @input-color-placeholder) {
  &:-moz-placeholder            { color: @color; } // Firefox 4-18
  &::-moz-placeholder           { color: @color; } // Firefox 19+
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Столбцы

Генерируйте колонки через CSS внутри одиночного элемента.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Градиенты

Легко превратить любые два цвета в градиенты фона. Можно сделать еще больше - установить направление, используя три цвета, или используя радиальный градиент. С одиночным mixin вы получите все перфиксированный синтаксис, что вам надо.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Вы также можете указать угол стандартного двокольора, линейный градиент:

#gradient > .directional(#333; #000; 45deg);

Если вам нужен стиль градиента туманны-полосы, то это легко, также. Просто определите единичный цвет, и будете иметь накладку полупрозрачных белых линий.

#gradient > .striped(#333; #000; 45deg);

Поднимите ставки и используйте вместо три цвета. Установите первый цвет, второй цвет, цветовую остановку второго цвета (десятичное значение, например 0.25), и третий цвет с этими mixins:

#gradient > .vertical-three-colors(#777; #333; .25; #000);
#gradient > .horizontal-three-colors(#777; #333; .25; #000);

Внимание! Если вам когда-нибудь понадобится удалить градиент, не забудьте удалить все IE-специальные filter которые вы могли добавить. Вы можете это сделать с помощью .reset-filter() mixin рядом с background-image: none;.

Утилиты mixin

Вспомогательные mixins есть примесями, сочетающие несвязанные (в противном случае) свойства CSS, для достижения конкретной цели или задачи.

Clearfix

Забудьте про добавление class="clearfix" к каждому элементу, а вместо этого добавьте mixin .clearfix() в случае необходимости. В этом примере используется micro clearfix созданный Nicolas Gallager.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Горизонтальное центрирование

Быстро центруйте любой элемент внутри его родителя Требуется width или max-width должны быть установленны

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Калибровка подсказок

Стало проще указывать размеры объектов.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Изменение размера textareas

Легко настроить параметры калибровки к любой текстовой области (textarea), или любого другого элемента. По умолчанию для нормального поведения браузеров (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Усеченный текст

Легко сократить текст, с тремя точками, с помощью одиночного mixin. При этом необходимо, чтобы элемент был стилизован как block или как inline-block

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina изображения

Определите два пути изображений и @1x размер изображений, и Bootstrap обеспечит @2x медиа запросы. Если вы обслуживаете много изображений, подумайте о написании кода для CSS сетки изображений в одиночном медиа запросе.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Translate »