How do you define attribute selectors in SASS?

CssAttributesCss SelectorsSass

Css Problem Overview

In CSS, you can do this:

input[type=submit] {
  // properties
}

It's a very useful for styling form buttons.

How do you do the same thing in SASS?

Css Solutions

Solution 1 - Css

You can also nest it like this

input
  &[type="submit"]
    .... 
  &[type="search"]
    ....

Solution 2 - Css

This converter website says:

input[type=submit]
  // properties

Solution 3 - Css

I use the one below in my project.

.bg-brand-3 {
  background-color: black;
  &[type="button"]:enabled {
    &:hover {
      background-color: orange;
    }
    &:active {
      background-color: green;
    }
  }
  &[type="submit"] {
    // css
  }
}

The :enable has the same meaning as :not(:disabled)

Categories
Recommended Css Solutions
Recommended Attributes Solutions
Recommended Css Selectors Solutions
Recommended Sass Solutions

Previous Solution:

Scaling Node.js

node.jsScalability

Next Solution:

Jquery Ajax error handling to ignore aborted

JqueryAjaxError Handling

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCraig WalkerView Question on Stackoverflow
Solution 1 - CssRajeeshView Answer on Stackoverflow
Solution 2 - CssCraig WalkerView Answer on Stackoverflow
Solution 3 - CssQuang DongView Answer on Stackoverflow