SASS函數與變量

Question

我對SASS函數和mixin相當陌生。我想做一個SASS函數，它根據類名中提供的數字乘以基本間距單位變量。

它會這樣工作。假設您有一個名爲$ base-spacing-unit的變量，其值爲10.如果您將類「.pad-top-b5」放在HTML元素上，則會爲其賦予$ base-spacing-unit的頂部填充X 5.

的功能可能是這個樣子：

$base-spacing-unit: 10; 

@function pad-top-b($val) { 
    padding-top: ($base-spacing-unit * $val); 
} 

在HTML元素，你可以把一類是這樣的：

<div class="pad-top-b10"></div> 

和元素將有一頂邊距100px的。 SASS甚至有可能嗎？

Answer 1

您可以使用@for循環，產生一組類：

$class-slug: pad-top-b; 
$base-spacing-unit: 10; 
$classes-amount: 10; 

@for $i from 1 through $classes-amount { 
    .#{$class-slug}#{$i} { 
    padding-top: ($base-spacing-unit * $i); 
    } 
} 

Demo上SassMeister。