SASS / SCSS

CSS preprocessor

Features

• Mixins
• Function
• ...

Mixin

              
                @mixin mobile-only {
                  @media (max-width: $mobile-width) {
                    @content;
                  }
                }
              
            

              
                .root {
                  @include mobile-only {
                    display: none;
                  }
                }
              
            

Function

                
                  @function spacing($space) {
                    @if $space == 4 {
                      @return "4px";
                    } @else if $space == 8 {
                      @return "8px";
                    }
                    ...
                  }
                
              

                
                  .root {
                    padding: spacing(4);
                  }
                
              

CSS Modules

Locally scoped CSS

Class conflict

Component1.scss

              
                .root {
                  color: red;
                }
              
            

Component2.scss

              
                .root {
                  color: green;
                }
              
            

              
                .root { color: red; }
              
            

to

              
                .root-h2l5l { color: red; }
              
            

              
                import styles from './Component.module.scss';
              
            

classnames

A helper package for common className requirements

Apply multiple classNames

Apply conditional className

More info about classnames:

classnames

Tailwind CSS

Utility-first CSS framework

Elements are styled using utility CSS classes.

tailwindcss.com

CSS in JS

Extending CSS with JS features

There are different CSS in JS approaches, e.g.:

• styled-components
• vanilla-extract (compiled to css)
• Emotion
• JSS
• Stitches