March 26, 2023
node-Sass

Sass is arguably the most popular CSS preprocessor; he has helped us write clean, reusable, and modular CSS for years. This quick tutorial will cover what’s important and explain how to compile Sass to CSS using the command line.

What is Node-Sass?

Sass is a CSS preprocessor that allows you to extend the capabilities of CSS by adding work with variables, style nesting, mixins, inline imports, isolate the desired styles. Sass also has many other handy features to work with that are not available in native CSS.

  1. Install Node.js

To compile Sass via the command line, we first need to install node.js. Download it from nodejs.org’s official website, unpack and follow the helper.

  1. NPM initialization

NPM is a JavaScript package manager for Node. NPM makes it easy to install and remove third-party packages. To initialize a Sass project with NPM, open your terminal and navigate to your project directory using the cd (change directory) command.

Once you have reached the desired folder, run the command npm init. You will be asked to answer a few questions about your project, after which NPM will generate a file package. jsonin your folder.

  1. Installing Node-Sass

Node-sass is an NPM package that compiles Sass to CSS (and does it very quickly). To install node-sass, run the following command in a terminal:npm install node-sass

  1. Writing a Node-sass Command

Everything is ready to write a small script for compiling Sass. Open the package.json file in your code editor. You will see something like this:

In the scripts section, add the scss  command in the  test property, as shown below:

Let’s look at this line word by word.

1. node-sass: Refers to the node-sass package.

2. -watch: An optional flag means “monitor all .scss files in the scss/ folder and recompile them every time they change.”

3. scss: The name of the folder where we will put all our .scss files.

4. -o CSS: Folder where compiled CSS is issued.

When this script is run, it will watch every .scssfile in the folder scss/, then store the compiled CSS in the folder CSS/every time we change the .scssfile.

  1. Run the script

To execute our one-page script, we need to run the following command in the terminal:npm run scss

And voila! We monitor and compile SASS.

Building CSS, SCSS, and SASS with node-sass

How to bundle CSS, SCSS, and SASS styles with node-sass 

Usually, SCSS and SASS are built using special Webpack or Gulp builders. These tools are good, but when you make a simple website or landing page, setting up these faucets can take a long time. Using the node-sass package, I’ll show you how to set up building and minifying styles in a few minutes. You will need nodejs installed to complete all the above steps.

A bit about SCSS and SASS

SCSS is essentially the same CSS, only with the ability to use variables like in PHP. And SASS (Syntactically Awesome Stylesheets) is SCSS with simplified syntax without curly braces and semicolons at the end of each line. Both languages ​​allow you to use variables in style sheets and import and merge styles. While CSS currently supports variables natively, not all browsers support them yet (hello IE!). 

As a rule, style files are divided into sources and assemblies in more complex web applications. Style sources are usually divided into separate files. For example, styles for tables in one file lists in another, and so on. Then all this is combined using a directive @importinto one main sass file, which is processed by the preprocessor into regular CSS.

If you use CSS frameworks like Bootstrap or Bulma, you can easily customize them with SASS. 

An example of styles in SCSS:

$base-text: #343434;

$gray-text: #BBB;

p {

  color: $base-text;

}

p.gray {

  color: $gray-text;

}

An example of styles in SASS:

$base-text: #343434

$gray-text: #BBB

p

  color: $base-text

p.gray

  color: $gray-text

I am setting up and preparing the project.

Initializing the project and installing node-sass

mkdir node-sass

cd node-sass

npm init -y

npm I node-sass –save-dev

After the installation is completed, the following files should appear in the folder:

ls

node_modules package.json package-lock.json

We need to create folders for the sources, where we will locate the SASS styles and the folder.

mkdir -p src/sass

mkdir -p public/build

 The source code will be in the src/sass directory, and the collected styles will be in public/build.

Installing Bootstrap and Creating Stylesheets

For example, I will use the Bootstrap 4 CSS framework and some of my force tables.

First, you need to install Bootstrap:

npm I bootstrap

Now we can create some stylesheets and include Bootstrap in our project. I will create one central theme. Sass file, import bootstrap into it, and add some custom styles.

Here’s what happened:

@import ‘bootstrap/scss/bootstrap’

$main-color: #4c4c4c

$main-bg: #fafafa

body

  background-color: $main-bg

p

  color: $main-color

The line @import ‘bootstrap/scss/bootstrap means import file корень_проекта/node_modules/bootstrap/scss/bootstrap.scss (расширение файла можно не указывать). In this case, all styles from the bootstrap library are imported. But you can import them in parts. If you open the folder node_modules/bootstrap/scss, you will see a lot of scss files. For example, if you want to use only the grid, you must import the file bootstrap-grid.scss. 

The name of the imported file can be relative to the current file, for example, @import ‘./lists’or relative to the node_modules directory, as in my example. If you are specifying a path relative to node_modules, you will need to add an option –include-path node_modulesfor the npx node-sass.

Building Styles

Now we can put together our styles. We will use the previously installed node-sass package. To run binaries from npm packages, you need to use the console command npx __название_пакета__. In our case, the launch of node-sass will be performed by the command npx node-sass.

We start the assembly:

npx node-sass \

–include-path node_modules \

–output-style compressed \

src/sass/theme.sass > public/build/theme.css

If the command was executed without errors, then a file should appear public/build/theme.css- this is our collected and minified CSS, which can now be connected to the HTML page.

During site development, in order not to execute the command to build styles each time, you can use the option –watch. Then node-sass will track changes in style sources and automatically recompile CSS.

Adding commands to package.json

The syntax of some commands is quite cumbersome. In order not to drive them completely every time, they come up with short alias and save them in the package.json file in the scripts section.

{

  “name”: “node_sass_example”,

  “version”: “1.0.0”,

  “description”: “”,

  “main”: “index.js”,

  “scripts”: {

    “sass”: “npx node-sass –include-path node_modules –output-style compressed src/sass/theme.sass > public/build/theme.css”,

    “sass:watch”: “npx node-sass –watch –include-path node_modules –output-style compressed src/sass/theme.sass > public/build/theme.css”,

    “test”: “echo \”Error: no test specified\” && exit 1″

  },

  “keywords”: [],

  “author”: “”,

  “license”: “ISC”,

  “dependencies”: {

    “bootstrap”: “^4.0.0”

  },

  “devDependencies”: {

    “node-sass”: “^4.7.2”

  }

}

After saving the commands in package.json, the build can be done with the command npm run scissor npm run Sass:watchso that the CSS styles are automatically rebuilt when the sass / scss sources change.

 How to connect Sass to React?

Let’s understand which version of Node.js you need to choose for the node-Sass package to work correctly. An important clarification here is that we will not consider installing Sass using the Webpack config, but we will consider installing it for a project generated by the create-react-app utility. Let’s get started and start with definitions.

Conclusion

Today we looked at how you can connect Sass to a React (create-react-app) project, looked at the nuances associated with installing node-sass, and tested Sass on the example of using variables in a React application.

Also read this:http://besttechblogger.com/200-ml-in-cl-discover-our-best-tips-for-your-everyday-conversions/

Leave a Reply

Your email address will not be published.