Solution 1 :

I am not understanding why you have to complicate the process. You can directly write the css by setting class.
But if you want to create a style standards you can use @mixin and @include or variable for your situation.

eg:

 @mixin padding($top:0, $right: 0,$bottom:0, $left:0) {
  padding: $top $right $bottom $left;
}

.avatar {
  @include padding(2,0,0,0);
}

Solution 2 :

To create variables in sass, $variableName: syntax is used and @mixin for reusable code.

_master.scss

@mixin applyPaddings($padding-top, $padding-right, $padding-bottom, $padding-left) {
  padding: $padding-top $padding-right $padding-bottom $padding-left;
  // or you can do it separately like
  // padding-top: $padding-top;
  // ...
}

.paddings {
  @include applyPaddings(1rem, 1rem, 1rem, 4rem);
}

index.html

<div class="paddings"> Hi </div>

Solution 3 :

You could use a styling solution like tailwind which contains a lot of utility classes for styling things.

This will allow you to customize styles for different elements without directly writing any css.

https://tailwindcss.com/

Problem :

I am pretty new to html/css/sass and I’m currently developing a website for myself. When aligning items I notice that I sometimes want a padding of 1em to the right for one item, and then a padding of 2em to the top for another item etc. I do the definitions in a .scss file like this currently:

_master.scss:

:root {        
    --pad-neg-left-1: 0 0 0 -1em;
    --pad-top-2: 2em 0 0 0;
}

.pad-neg-left-1{
    padding: var(--pad-neg-left-1);
}
.pad-top-2{
    padding: var(--pad-top-2);
}

index.html:

<div class=".pad-top-2"> Hi </div>

This gets big and complex really fast if I want to add classes to my html objects to fit all purposes. Instead I would like a class that can take parameters and use it maybe like this:

_master.scss:

function pad(top, right, bottom, left){
    padding: top right bottom left;
}

index.html:

<div class=".pad(2, 0, 0, 0)"> Hi </div>

Is this possible?

I could write my div as this instead: <div style="padding: 2 0 0 0;"> Hi </div> but for some reason I heard from videos that it is bad to define styling straight in html and instead use classes. Is this wrong, or can I use some other approach?

Comments

Comment posted by eligolf

With this method I still have to write one class for padding top, one for padding right etc. I assume this means that there is no way of having a class (e.g. “.my-padding”) and let that take arguments? With your method I still need .padding-top-1, .padding-top-2 etc if I understand you correctly.

Comment posted by eligolf

With this method I still have to write one class for padding top, one for padding right etc. I assume this means that there is no way of having a class (e.g. “.my-padding”) and let that take arguments? With your method I still need .padding-top-1, .padding-top-2 etc if I understand you correctly.

Comment posted by first

then @Daniel Smith has the right answer for you.

By