csssasslessoocss

Using SASS & reference for OOCSS

Usually i use LESS for my projects but now im trying to go with SASS.

In LESS i do things like this

.module {
  background-color: blue;

  &-title {
    color: black;
  }

  &-type-2 {
    background-color: red;
  }
}

and the output CSS will be

.module { 
  background-color: blue;
}

.module-title {
  color: black;
}

.module-type-2 {
  background-color: red;
}

In SASS wont work, there is someway to do it in SASS?

Solution

  • As of Sass 3.3, you can do that with the following syntax:

    .block{
    &__element {
      // ...
    }
    &--modifier {
      // ...
    }
}