The Simplest Sass Compile Setup
source link: https://pineco.de/the-simplest-sass-compile-setup/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
The Simplest Sass Compile Setup
Sass is an excellent tool to make CSS more dynamic, but it is still a burden for many of us because of the compiling settings. Let’s see how we can set up a minimal but well-functioning configuration.
I think the easiest way to compile Sass is through npm scripts. Using npm scripts, we can run any command – preconfigured, installed – with a simple line. Sass comes with a command-line interface (CLI), which we can configure widely; this is the one we will run through npm scripts.
The current version of Sass is 1.42.1 and wrote on Dart. We have two deprecated packages named LibSass and Node Sass. In this tutorial, we – and you should – use Dart Sass which is the default setting on install when we run the npm install sass command.
1. Install Node.js on Your System
To use npm (to install Sass), we first have to install Node.js, which we can easily do. Go to the official site and download the related installer (based on the operating system) or use your command line package managers like Homebrew or Chocolatey.
2. Initialize NPM
After the installation, we can access the npm command to init new projects and manage dependencies. The initialization means creating the package.json file where we store our configuration.
Open your terminal, navigate to the project root and run:
npm init
Answer the asked questions (which you can modify later) or/and press enters. After the initialization, our package.json file will look something like this:
{
"name": "sass-compile",
"version": "1.0.0",
"description": "A simple sass compile config.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Adam",
"license": "ISC"
}
3. Install Sass
To install Sass, we have to run the following npm command:
npm install sass --save-dev
The –save-dev flag means that Sass is a development dependency (as you will see in your package.json, it is under the devDependecies object).
Now we have the Sass functionality with access to the previously mentioned CLI with its commands.
4. Set The Compile Commands
We can add any new script under the scripts object. Just remove the default one (named test) and add the following:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded assets/scss:assets/css",
"sass-prod": "sass --no-source-map --style=compressed assets/scss:assets/css"
},
As you see, we set up two scripts to compile Sass:
- Dev: which is for development purposes. It isn’t compressed, has a source map and a watcher (to run until we stop it and watch for changes).
- Prod: which is making our production code. It is compressed, doesn’t have a source map, and runs only once.
Our project’s folder structure (should) look like this:
sass-compile/
├── assets/
│ ├── css/
│ │ └── main.css
│ └── scss/
│ ├── assets/
│ │ ├── _footer.scss
│ │ └── _header.scss
│ └── main.scss
├── node-modules/
└── package.json
We compile our Sass files from the scss to the css folder. We don’t have to specify file names explicitly (necessarily); the script will watch for all translatable files (the ones which don’t have a _ prefix).
For more information about the flags (the text in the command which stats with —), please visit the official CLI page.
5. Run The Scripts
After the previous steps, all we need is to run our scripts based on all needs. If you develop, then use:
npm run sass-dev
If you want to make a minified file, use:
npm run sass-prod
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK