Reputation: 8105
I am creating some utility classes via a loop but wan't to use the functions that already exist.
I have some functions that I use within other CSS:
@function size-1() {
@return #{ ( 8 / 16 ) }rem;
}
@function size-2() {
@return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
@return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
@return #{ ( 32 / 16 ) }rem;
}
But I also created a loop so that I have classes to use in the markup too:
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: size-$i();
}
}
I have tried (above) to dynamically call the function but it only outputs text of 'size-1' if I do it dynamically. If I use the direct function name e.g.:
margin-top: size-1();
Then it correctly works. Is there any way I can do this?
Upvotes: 1
Views: 966
Reputation: 3878
Use the function call to call yours:
@function size-1() {
@return #{ ( 8 / 16 ) }rem;
}
@function size-2() {
@return #{ ( 16 / 16 ) }rem;
}
@function size-3() {
@return #{ ( 24 / 16 ) }rem;
}
@function size-4() {
@return #{ ( 32 / 16 ) }rem;
}
...
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: call(size- + $i);
}
}
(Tested in: https://www.sassmeister.com/ )
EDIT: Another way with less functions:
@function size($num) {
@return #{ ( $num/2) }rem;
}
@for $i from 1 through 18 {
.mt-#{$i} {
margin-top: size($i);
}
}
Upvotes: 4