来自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动态值

回答

相关问题