Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="green">
  Just some green text, NBD
</div>

<br>

<div class="orange" id="orange">
  This ID overpowers the class
</div>

<br>

<div class="teal" id="teal">
  This class overpowers the [id="..."]
</div>

<hr>

<br>

<div id="what the heck?">
  How is this possible?
</div>

<br>

<img src="https://i.chzbgr.com/maxW500/6205109760/h929A65DC/" alt="sorcery">

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

// ID's are bad for CSS, they're just too powerful,
// so use classes whenever possible. But sometimes we
// want or need to use ID's in our markup for JS hooks.

// If you need an ID for Javascript
// use this method to style if you're
// worried at all about specificity issues.

[id="green"] {
  color: green;
}

// You see, a regular ID is much more powerful 
// than a class
#orange {
  color: orange;
}

// So you can't override the ID by increasing specificity
// like so
div.orange {
  color: teal;
}

// But here we'll write the ID style as such
[id="teal"] {
  color: teal;
}

// And then we'll override it with a regular old class
.teal {
  color: purple;
}

// Also, for a little mind-blowing...
// you can use a string as an ID inside brackets
[id="what the heck?"] {
  color: red;
}

SassMeister-output.css

[id="green"] {
  color: green;
}

#orange {
  color: orange;
}

div.orange {
  color: teal;
}

[id="teal"] {
  color: teal;
}

.teal {
  color: purple;
}

[id="what the heck?"] {
  color: red;
}

SassMeister-rendered.html

<div id="green">
  Just some green text, NBD
</div>

<br>

<div class="orange" id="orange">
  This ID overpowers the class
</div>

<br>

<div class="teal" id="teal">
  This class overpowers the [id="..."]
</div>

<hr>

<br>

<div id="what the heck?">
  How is this possible?
</div>

<br>

<img src="https://i.chzbgr.com/maxW500/6205109760/h929A65DC/" alt="sorcery">