Why and how to set multiple classes in sass?

Question

I am using Sass, and I see many multiple classes in html file, such as:

<a href="#" class="button white">a link</a>

Why should I use multiple classes?

And it seems that the css should be:

.button {
    font-size: 12px;
}

.button.white {
    background-color: #fff;
}

but why this doesn't work:

.button {
    font-size: 12px;

    .white {
        background-color: #fff;
    }
}

so how can I use sass simplify the css file?

You'd use multiple classes for the same reason that you'd use multiple classes in CSS: e.g. maybe you want this element to have the `button` and `white` classes, but you'd want another element to have the `button` and `blue` classes. — alex, Jan 27 '15 at 14:17

score 3 · Accepted Answer · answered Jan 27 '15 at 14:22

The reason your code doesn't work is that the nesting is corresponding with a smilier nesting in html, i.e

<div class="button">
    <div class="white">This would get a background of #fff</div>
</div>

To get what you want, you should can use & as a alias to the selector of the parent:

.button {
    font-size: 12px;

    &.white {
        background-color: #fff;
    }
}

score 1 · Answer 2 · answered Jan 27 '15 at 14:22

1

Try below SCSS code.

.button {
    font-size: 12px;

    &.white {
        background-color: #fff;
    }
}

CSS Output

.button {
    font-size: 12px;
}
.button.white{
    background-color: #fff;
}

answered Jan 27 '15 at 14:22

shanidkv

2 Answers2