How to Get the Same Object with a Class in SCSS

Including another class in SCSS

Looks like @mixin and @include are not needed for a simple case like this.

One can just do:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

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.

How to combine class and ID in CSS selector?

In your stylesheet:

div#content.myClass

Edit: These might help, too:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

and, per your example:

div#content.sectionA

Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass is faster than div#content.myClass because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!

Using two CSS classes on one element

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

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