Multiple Two-Class Selectors in Sass

Multiple two-class selectors in Sass

try this:

body{
   &.shop, &.contact, &.about, &.faq {
        background-color:#fff;
    }
}

Sass .scss: Nesting and multiple classes?

You can use the parent selector reference &, it will be replaced by the parent selector after compilation:

For your example:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

The & will completely resolve, so if your parent selector is nested itself, the nesting will be resolved before replacing the &.

This notation is most often used to write pseudo-elements and -classes:

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

However, you can place the & at virtually any position you like^*, so the following is possible too:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

However be aware, that this somehow breaks your nesting structure and thus may increase the effort of finding a specific rule in your stylesheet.

*: No other characters than whitespaces are allowed in front of the &. So you cannot do a direct concatenation of selector+& - #id& would throw an error.

Multiple classes with same styling with specific attributes to each class in SCSS

Given your example, this is something I can think of in order to not repeat yourself too much using SCSS

.example {
    /* Code every class shares */
    [class^="class-"] {
       padding: 1em;
       font-family: sans-serif;
       /* More code... */
    }

    /* Code that is different */
    .class-1 {
        color: red;
    }

    .class-2 {
        color: blue;
    }

    .class-3 {
        font-weight: bold;
    }

    .class-4 {
        background-color: darkcyan;
    }

    .class-5 {
        text-transform: uppercase;
    }
}

Keep in mind that [class^="class-"] will affect all elements which contain classes that starts with "class-" like class-a, class-x, etc
More details about attribute selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

SASS - How can I assign two classes the same style except one property?

To be quite honest I'm not sure why u don't want to write two different selectors, or just overide some property in second one. E.g

.class1, .class2, .class3 {    &:before{    content: 'class';  }}
.class2:before {  content: 'class2';}

Sass - two classes in a single tag

Here you go:

.question_actions {
   float: right; 
   font-size: 1em;
   width: 110px; 

   .question_action {
       margin-bottom:8px;
       padding: 3px;
   }

   &.active {
    //some css
   }
}

Why and how to set multiple classes in sass?

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;
    }
}

SCSS: How to use two classes together with an ampersand?

In this case, a solution could be use a variable:

.my-btn {
  $this: &;
  &--primary, &--primary#{$this}--sm  {
    padding: 10px;
  }
}

Or use interpolation syntax

.my-btn {
  &--primary, &--primary#{&}--sm  {
    padding: 10px;
  }
}

---

Related Topics