CODEWITHSUNDEEP
csssass
TBA
TBA

Reputation: 1187

Pass dynamic Values to the SCSS

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.

Upvotes: 1

Views: 9821

Answers (2)

Geeky
Geeky

Reputation: 7498

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

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

You can use mixins http://thesassway.com/advanced/pure-sass-functions

@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

Upvotes: 2

Related Questions