Scss tips

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the CSS-and-design category.

Last Updated: 2024-03-02

SCSS Tips

Other bits

.alert {
  / It can also be used to style the outer selector in a certain context, such
  / as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

becomes

[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}

And this adds suffixes

.accordian {
  // becomes .accordion__copy
   &__copy {
   }
}