來自HTML的SASS動態值

以前我曾經創建過我的幫手CSS來幫助快速開發。幫手CSS的內容是這樣的：來自HTML的SASS動態值

.margin-10{ 
    margin:10px!important; 
} 
.....

和HTML我可以用<div class="margin-10"></div>

但後來發現SASS，它是驚人的。它確實幫助我快速開發應用程序，尤其是它的mixin功能。但我有一個問題。這是一個場景。

SCSS的Mixin是：

@mixin border-radius($radius) { 
-webkit-border-radius: $radius; 
-moz-border-radius: $radius; 
    -ms-border-radius: $radius; 
     border-radius: $radius; 
} 

.box { 
    @include border-radius(10px); 
}

在HTML我可以使用<div class="box"></div>

是否有可能創建動態類？例如，如果我使用<div class="margin-left-10"></div>它會使用mixin自動創建頁邊空白。如果我使用<div class="padding-top-100"></div>填充機上100級自動創建和操作使用SASS混入

來源

2017-09-25 SHAHRUKH SHAHID

不......這就是爲什麼SASS存在。至少在數據屬性持續到來之前。 –

...但這可能是相關的 - https://stackoverflow.com/questions/46323117/using-html-data-attributes-as-css-variable-ie-text-shadow/46326495#46326495 –

這裏一個mixin，可以幫助你：

@mixin createMargin($min, $max) 
    @for $i from $min to $max+1 
    .margin-#{$i} 
     margin : 1px * $i !important 

    .margin-top-#{$i} 
     margin-top: 1px * $i !important 

    .margin-left-#{$i} 
     margin-left : 1px * $i !important 

    .margin-right-#{$i} 
     margin-right: 1px * $i !important 

    .margin-bottom-#{$i} 
     margin-bottom: 1px * $i !important 

@include createMargin(0, 100) // Choose your min and max value

所以，你只需要使用<div class="XXX margin-top-40"></div>有一個40像素保證金在您的分區頂部

來源

2017-09-25 15:14:31

但這會產生所有的保證金等級從0到100，對不對？編譯怎麼樣？只會編譯那些我使用過的類，或者它會編譯範圍爲0到100的保證類。 –

是的，問題是這會產生0到100之間的所有保證類：/ –

來自HTML的SASS動態值

回答

相關問題