DEV Community

Cover image for Setting Up Sass
aryaziai
aryaziai

Posted on

3 1

Setting Up Sass

Overview

Before initializing the configuration, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Configuration

Step 1

1) Create empty folder.
2) Create Index.html file.
3) Generate HTML boilerplate code for Index. If you're using Visual Code Studio simply type "!" and enter. Otherwise, type boilerplate manually or copy this template.
4) Reference CSS file in index.

<link rel="stylesheet" href="css/style.css" />

Step 2

1) Create folder titled "sass".
2) Create main.scss file inside "sass" folder.
3) Insert code into main.scss. Example:

$colors: (
 primary: #005dff,
 accent: #fff6bb,
);

$fonts: (
  primary: arial,
  secondary: verdana,
);


body {
  max-width:1100px;
  height: 100%;
  margin: 0;
  font-family: map-get($fonts, primary);

 a {
   color: map-get($colors, primary);
   text-decoration: none;
   &:hover {
     color: map-get($colors, secondary);
   }
 }
}

Note: We are using three Sass features in the code example: variables, nesting, and "&".

Step 3

1) Compile Sass.

Note: Two popular options for compiling are the Compile Sass NPM Package, and the Live Sass Compiler Visual Code Studio Extension. The following steps pertain to the extension, however, if you decide to use the NPM Package, please follow these instructions.

2) Configure settings. Visual Code Studio settings.json:

"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
  "liveSassCompile.settings.autoprefix": [],
  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,
  "scss.lint.zeroUnits": "warning",
  "liveServer.settings.donotShowInfoMsg": true

3) Click "Watch Sass" button at the bottom of Visual Code Studio. This will compile our sass code into the style.css file inside of our css folder (which is linked in our Index.html).

Conclusion

We are still using our style.css for our styling needs, however, we aren't writing directly inside the file. Instead we are using our main.scss file to compile our sass code into the style.css file. This allows for a lot more functionality, and ultimately cleaner css with the help of variables, nesting, and functions.

P.S. If you're interested in learning about color functionality with Sass, check out my other blog post.

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay