How to setup SASS in Vite Environment and brief notes on important sass functionalities

I will bring you upto speed with how to setup Vite with React JS, how to setup scss/sass while working in vite development environment and all necessary to-know functionalities in sass.

Topics

• Setting up a React Js development envr. that runs with Vite
• How to add Sass to the Vite project
• Brief explanation of important sass functionalities

Whats Vite?
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Note - Vite requires Node.js version 18+ or 20+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

REACT JS + Vite + SCSS
Vite supports several frameworks/languages and has utility templates, that when run enables the creation of a development environment that integrates vite to the framework.
Now to spin up a React + Vite project we run the below command

npm create vite@latest my-vite-project -- --template react

# npm 7+, extra double-dash is needed:
# my-vite-project => Project name 
# react => specifies the framework I am initializing

Vite does not have inbuilt support for sass, .scss, .less, .style, .stylus, so to get the preprocessor available on vite it has to be installed. To install sass preprocessor, see below

# .scss and .sass
npm add -D sass-embedded 
# sass
npm add -D sass 

Brief explanation of everyday sass functionalities

• Statements - A Sass stylesheet is made up of a series of statements, which are evaluated in order to build the resulting CSS. Some statements may have blocks, defined using { and }, which contain other statements. For example, a style rule is a statement with a block. That block contains other statements, such as property declarations.

1. Universal Statements -> These types of statements can be used anywhere in a Sass stylesheet: -Variable declarations, like $var: value. -Flow control at-rules, like @if and @each. -The @error, @warn, and @debug rules.
2. CSS Statements -> These statements produce CSS. They can be used anywhere except within a @function: Style rules, like h1 { /* ... */ }. CSS at-rules, like @media and @font-face.
3. Top-Level Statements -> These statements can only be used at the top level of a stylesheet, or nested within a CSS statement at the top level: Module loads, using @use. Imports, using @import. Mixin definitions using @mixin. Function definitions using @function.

• Variables - Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

• Mixins - Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, Mixins are included into the current context using the @include at-rule, which is written @include or @include (), with the name of the mixin being included. and to distribute collections of styles in libraries.

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

• Functions - Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way.

@function some-func($param) {
    @return (100/$param);
  }
 .col-6 { font-size: some-func(5);}

@function add($numbers...) { 
   $add: 0; 
   @each $number in $numbers { 
    $add: $add + $number; 
   } 
   @return $add; 
 } 

 .gfg { 
  width: add(50, 30, 100); 
 }

• @use - The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules full of useful functions.

1. The simplest @use rule is written @use "", which loads the module at the given URL.
   Any styles loaded this way will be included exactly once
   in the compiled CSS output, no matter how many times those styles are loaded.

2. A stylesheet’s @use rules must come before any rules other than @forward, including style rules.
   However, you can declare variables before @use rules to use when configuring modules.
   

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

3 - By default, a module’s namespace is just the last component of its URL without a file extension. However, sometimes you might want to choose a different namespace—you might want to use a shorter name for a module you refer to a lot, or you might be loading multiple modules with the same filename.
You can do this by writing @use "" as .

// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

• @import - Sass extends CSS’s @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets’ CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import. Also, in the indented syntax, imported URLs aren’t required to have quotes.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@import 'foundation/code', 'foundation/lists';

• @extend - This the ability of a class to extend / expand its style by including style from another class using the @extend rule.

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

Thanks for reading

Purpose of this article - is to document a reference for important Sass functionalities.

References

• https://sass-lang.com/documentation/at-rules/use/
• https://github.com/Godwin-NJ/Sass-docs-gnj