CODEWITHSUNDEEP
csssass
A.Jesin
A.Jesin

Reputation: 433

SASS - Set margin to 0 without affecting width

I am completely new to SASS.

This is the SASS code I have

@mixin set-width-and-margin($label-width: 150px, $value-margin-left: 20px){
    .label-class {
        width: $label-width;
    }
    .input-class {
        margin-left: $label-width + $value-margin-left;
    }
}

.form-1 {
    @include set-width-and-margin();
}

.form-2 {
    @include set-width-and-margin(100px);
}

It outputs the following CSS code.

.form-1 .label-class {
    width: 150px;
}
.form-1 .input-class {
    margin-left: 170px;
}

.form-2 .label-class {
    width: 100px;
}
.form-2 .input-class {
    margin-left: 120px;
}

I want to add another class .form-3 and set the margin-left value to 0 without affecting the width.

This is the desired CSS output.

.form-3 .label-class {
    width: 150px;
}
.form-3 .input-class {
    margin-left: 0;
}

The only solution I know is this.

.form-3 {
    .label-class {
        width: 150px;
    }
    .input-class {
        margin-left: 0;
    }
}

While it does work I want to know if there is a better solution for this.

Upvotes: 1

Views: 523

Answers (1)

Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

You can just simply call your mixin with two parameters. You can overwrite $value-margin-left to -150px so that the resulting margin-left is 0px.

.form-3 {
    @include set-width-and-margin(150px, -150px);
}

If that isn't nice enough, the alternative is to overwrite the margin left after you call your mixin (or, remake your function to accomodate this more cleanly).

.form-3 {
    @include set-width-and-margin(150px);
    .input-class {
        margin-left: 0px;
    }
}

Upvotes: 2

Related Questions