Less: помимо основ с библиотекой Bootstrap Mixins

 article { background: blue; p { color: gray; } } 

.make-md-column() Bootstrap .make-md-column() показывает нам, как воспользоваться этой изящной функцией Less внутри миксина. Сайт LessCss сообщает:

Директивы, такие как media или keyframe могут быть вложены так же, как селекторы. Директива размещается сверху, и относительный порядок по отношению к другим элементам в том же наборе правил остается неизменным. Это называется пузыриться.

Медиа-запрос внутри .make-md-column() определяет поведение столбца, когда ширина экрана соответствует значению переменной @screen-md-min (Bootstrap задает для этой переменной значение по умолчанию 992px. Вы можете найти это в переменных. Когда ширина экрана достигнет назначенного значения, ширина столбца будет равна процентному значению числа столбцов в вашем дизайне, деленного на общее количество столбцов (значение Bootstrap по умолчанию для общего числа столбцов равно двенадцати).

Демонстрация использует .make-md-column() для боковой панели, столбца основного содержимого и шести вложенных столбцов внутри основного содержимого.

 .sidebar { .make-md-column(4); } .main-content { .make-md-column(12); } .card { .make-md-column(5); } 

Вывод CSS для .sidebar:

 .sidebar { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .sidebar { float: left; width: 33.33333333%; } } 

Кнопка Mixin

Mixin Bootstrap, используемый для создания стилей элемента button, является отличным примером того, насколько удобно использовать Less для разработки CSS.

.button-variant() находится в файле button.less внутри папки mixins. Он выводит стили кнопок по умолчанию, а также стили для общих состояний кнопок. Это означает, что вы добавляете этот миксин в селектор элемента кнопки и не беспокоитесь о написании других правил для всех этих состояний кнопки. Какая экономия времени!

Вот код миксина:

 .button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; &:hover, &:focus, &.focus, &:active, &.active, .open > .dropdown-toggle& { color: @color; background-color: darken(@background, 10%); border-color: darken(@border, 12%); } &:active, &.active, .open > .dropdown-toggle& { background-image: none; } &.disabled, &[disabled], fieldset[disabled] & { &, &:hover, &:focus, &.focus, &:active, &.active { background-color: @background; border-color: @border; } } .badge { color: @background; background-color: @color; } } 

Этот параметрический миксин требует от вас трех значений и выделяет основной кусок кода CSS, который охватывает все состояния кнопок.

Там есть некоторые селекторы, которые являются частью инфраструктуры Bootstrap, например .badge или .dropdown-toggle . Но ничто не мешает вам скопировать этот миксин в demo.less (или в специальную папку библиотеки миксинов вашего проекта) и настроить его под свои нужды. Если вам не нужны какие-либо посторонние селекторы Bootstrap, вы можете переписать .button-variant() следующим образом:

 .demo-button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; &:hover, &:focus, &.focus, &:active, &.active { color: @color; background-color: darken(@background, 10%); border-color: darken(@border, 12%); } &:active, &.active { background-image: none; } &.disabled, &[disabled], fieldset[disabled] & { &, &:hover, &:focus, &.focus, &:active, &.active { background-color: @background; border-color: @border; } } } 

Вот как я использую .demo-button-variant() на демонстрационной странице:

 .action-btn { .demo-button-variant(@gray; lighten(@brand-info, 20%); darken(@brand-info, 10%)); } 

Вывод CSS:

 .action-btn { color: #555555; background-color: #b0e1ef; border-color: #31b0d5; } .action-btn:hover, .action-btn:focus, .action-btn.focus, .action-btn:active, .action-btn.active { color: #555555; background-color: #85d0e7; border-color: #2289a7; } .action-btn:active, .action-btn.active { background-image: none; } .action-btn.disabled, .action-btn[disabled], fieldset[disabled] .action-btn, .action-btn.disabled:hover, .action-btn[disabled]:hover, fieldset[disabled] .action-btn:hover, .action-btn.disabled:focus, .action-btn[disabled]:focus, fieldset[disabled] .action-btn:focus, .action-btn.disabled.focus, .action-btn[disabled].focus, fieldset[disabled] .action-btn.focus, .action-btn.disabled:active, .action-btn[disabled]:active, fieldset[disabled] .action-btn:active, .action-btn.disabled.active, .action-btn[disabled].active, fieldset[disabled] .action-btn.active { background-color: #b0e1ef; border-color: #31b0d5; } 

Как насчет всех этих символов амперсанда (&)? Селектор амперсанда относится к родительскому селектору внутри вложенного селектора.

 .action-btn { color: gray; &:hover { text-decoration: none; } } 

 .action-btn { color: gray; } .action-btn:hover { text-decoration: none; } 

 .button-variant(@color; @background; @border) { ... &:active, &.active, .open > .dropdown-toggle& { background-image: none; } ... } 

 .action-btn:active, .action-btn.active, .open > .dropdown-toggle.action-btn { background-image: none; } 

 #gradient { .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { //mixin's code goes here } .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { //mixin's code goes here } .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { //mixin's code goes here } ... } 

 body { #gradient > .vertical(lighten(@brand-primary, 40% ); lighten(@brand-primary, 60%) ); }