Last Updated: 2024-04-25

SCSS Tips

• import exists in scss and raw css
• switch from @import to @use https://sass-lang.com/documentation/at-rules/import -- and use migration tool
• with sass imports, that file is evaluated as though its contents appeared directly in place of the @import
• there are partials (_) as well as regular imports
• nesting an import scopes a chunk of CSS to a particular element or media query
• we can make some imports depend on media queries @import "landscape" screen and (orientation: landscape);

Other bits

• Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that $font-size and $font_size both refer to the same variable
• Variables can be lists of values ll, like 1.5em 1em 0 2em, Helvetica, Arial, sans-serif, or [col1-start].
• Variables can have units like 12 or 100px.
• Variables can be scoped if declared within a selector
• The & selector can be used in nested contexts to potentially switch order

.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 {
   }
}