SASS中如何定义属性选择器？

Question

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?

Answer 1

You can also nest it like this

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

Answer 2

This converter website says:

input[type=submit]
  // properties

Answer 3

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)