// less
@list: 2, 5, 6, 10, 15, 20;
each(@list, {
.mr@{value} {
margin-right: @value * 1px;
}
.mt@{value} {
margin-top: @value * 1px;
}
.mb@{value} {
margin-bottom: @value * 1px;
}
.ml@{value} {
margin-left: @value * 1px;
}
.pl@{value} {
padding-left: @value * 1px;
}
.pt@{value} {
padding-top: @value * 1px;
}
.pb@{value} {
padding-bottom: @value * 1px;
}
.pr@{value} {
padding-right: @value * 1px;
}
});
/*mr10表示margin-right:10px,其他樣式依次類推*/
// scss
$pixel: 5, 10, 15, 20, 25, 30, 40, 50;
$position: top, right, bottom, left;
$position-class: 't', 'r', 'b', 'l';
@each $item in $pixel {
@each $p in $position {
$index: index($position, $p);
$class: nth($position-class, $index);
.m#{$class}#{$item} {
margin-#{$p}: $item + px;
}
.p#{$class}#{$item} {
padding-#{$p}: $item + px;
}
}
}
/*mr10表示margin-right:10px,其他樣式依次類推*/
scss, less 批量生成常用 margin,padding
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
推薦閱讀更多精彩內容
- package test2; import java.io.BufferedReader; import java...
- 本文以批量刪除為例子為大家解讀php批量刪除操作 <? foreach ($chatList as $Mitem)...