Немаловажной Mixin

Я смешивание для того, чтобы генерировать некоторые утилиты класса так:Немаловажной Mixin

.margin(@name, @size){ 
    [email protected]{name} {margin: (@size)px;} 
    @media (max-width: 767px) { 
    [email protected]{name} {margin: (@size)px;} 
    } 
}

Это работает отлично, но когда я называю .margin(m-n, 0) !important;

CSS-код генерируемый:

.m-n { 
    margin: 0 !important; 
} 
@media (max-width: 767px) { 
    .xs-m-n { 
    margin: 0; 
    } 
}

Но хотелось бы иметь:

.m-n { 
    margin: 0 !important; 
} 
@media (max-width: 767px) { 
    .xs-m-n { 
    margin: 0 !important; 
    } 
}

Любая идея?

источник

2015-01-15 XciD

Я не думаем, что '! Important' бы получить применяются к свойствам в запросах медиа используя этот метод (по крайней мере до версии 1.7.5). Для этого конкретного случая может быть выполнен другой (но круглый) метод. – Harry

Можете ли вы дать мне некоторую информацию о ваших методах? – XciD

Вот решение, которое работает с дополнительными парами

.margin(@name, @size, @important: false){ 
    [email protected]{name} when (@important = false){ 
     margin: (@size)px; 
    } 
    [email protected]{name} when (@important = true) { 
     margin: (@size)px !important; 
    } 

    @media (max-width: 767px) { 
     [email protected]{name} when (@important = false) { 
      margin: (@size)px; 
     } 
     [email protected]{name} when (@important = true) { 
      margin: (@size)px !important; 
     } 
    } 
}

Тогда вы можете просто позвонить .margin(m-n, 0) или .margin(m-n, 0, true)

источник

2015-01-15 13:41:06

Немаловажной Mixin

ответ

Смежные вопросы