I've a mixing in order to generate some utilities class like that :
.margin(@name, @size){
.@{name} {margin: (@size)px;}
@media (max-width: 767px) {
.xs-@{name} {margin: (@size)px;}
}
}
It's working fine, but when I call .margin(mn, 0) !important;
The css generated is :
.m-n {
margin: 0 !important;
}
@media (max-width: 767px) {
.xs-m-n {
margin: 0;
}
}
But I would like to have :
.m-n {
margin: 0 !important;
}
@media (max-width: 767px) {
.xs-m-n {
margin: 0 !important;
}
}
Any idea ?
Here is a solution that works with a supplementary param
.margin(@name, @size, @important: false){
.@{name} when (@important = false){
margin: (@size)px;
}
.@{name} when (@important = true) {
margin: (@size)px !important;
}
@media (max-width: 767px) {
.xs-@{name} when (@important = false) {
margin: (@size)px;
}
.xs-@{name} when (@important = true) {
margin: (@size)px !important;
}
}
}
Then you can simply call .margin(mn, 0)
or .margin(mn, 0, true)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.