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

Setup

Setup

vite.config.ts

Setup

Import into your CSS

Setup

Use the utility classes in any component

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