Pass dynamic Values to the SCSS

Question

I am using SCSS for the style sheet and I am just getting used to it.

Would like to get a little suggestion on the following scenario.

Say I got three div tags with following in-line params,

<div style="margin-top:10px">....</div>
<div style="margin-top:-10px">....</div>
<div style="margin-top:30px">....</div>

Now I could create 3 CSS class style with different values to avoid in-line css.

However is there a way I could create a single class as margin-top and pass the values 10px , -10px and 30px for each div.

You can make use of SCSS functions and send parameters as 10px ,-10 and 30 but i doubt we cannot do as the way ur expecting in css — Geeky, Dec 30 '16 at 07:39
Is there some examples I can follow to achieve the same with SCSS? could not find it how to pass the value from html page. — TBA, Dec 30 '16 at 10:19

score 2 · Accepted Answer · answered Dec 31 '16 at 00:00

@mixin my-mixin($some-number) {
     margin-top: $some-number;
 }

Now we use the @include directive to insert our mixin's code.

div.some-class {
  @include my-mixin(10px);
}

Now if you decide you also want to set margin-bottom, you can do it from a single place

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

You can make use of scss functions here. You can write a function for margin-top and which accepts a parameter

 @mixin margintop($top){
        margin-top:$top;
    }

and for each separate div you can send as different parameters as

div:first-child{
  @include margintop(10px);
}
div:nth-child(2){
  @include margintop(-10px);
}
div:nth-child(3){
  @include margintop(30px);
}

Apart from this ,we cannot access scss functions in html and send parameters to it

this reference could be helpful to you linked question

Hope it helps

edited May 23 '17 at 10:30

Community

answered Dec 30 '16 at 23:43

Geeky

aah yea mixin could be of better use – Geeky Dec 31 '16 at 00:01
1

Mmm... you modified it so it looks like my answer? May as well delete it? – Ruan Mendes May 24 '17 at 12:33

2 Answers2