How to Install Dart Sass in Linux?
SASS or Syntactically Awesome Style Sheet is an upgrade over standard CSS and provides much-needed features that are missing from CSS like variables, operators, at-rules, nesting, mixins, inheritance, and much more. SASS files are used the .scss extension. Unfortunately, even modern browsers like chrome and Firebox can’t understand SASS syntax so, we use transpilers such as dart-sass to transpile or compile .scss to .css files. You can read more about SCSS by clicking here. Dart Sass is the primary implementation of Sass replacing the legacy Ruby SaaS. It’s fast, easy to install, and it compiles to pure JavaScript. Let’s discuss the most common ways to install dart-sass on any Linux distro. We will also see how to use sass to convert an SCSS file to a CSS file.
Installation on Dart Sass in Linux
From source code
Step 1: Download the latest release of Dart Sass by clicking here.
Step 2: Extract the tar file to /opt.
$ sudo tar -xvzf ~/Downloads/dart-sass-1.52.1-linux-x64.tar.gz -C /opt/
Step 3: Add export PATH=”/opt/dart-sass:$PATH” to the last line of the .bashrc/.zshrc.
$ echo ‘export PATH=”/opt/dart-sass:$PATH”‘ >> ~/.zshrc
Step 4: Save the changes to .bashrc/.zshrc by running
$ source ~/.zshrc
Step 5: Verify the installation
$ sass –version
From NPM
Step 1: Install SASS globally by executing the following command:
$ npm i -g sass
Step 2: Verify the installation process by running: sass –version
$ sass –version
Usage
We will create a basic HTML and.SCSS file for styling. Then we will use dart-sass to convert our scss file into a .css file, that a browser can understand
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div> <h1>Welcome to GeeksforGeeks.</h1> <br> Visit </a> </div> </body> </html> |
CSS
$font-lg: 48px; $font-sm: 24px; $lightcolor: #359917; $darkcolor: #126d12; $pd: 18px 36px; div { height: 100vh; width: 100vw; display: flex; flex-direction: column; align-items: center; margin-top: 10%; } h1 { font-size: $font-lg; } a { background-color: $lightcolor; color: white; font-size: $font-sm; padding: $pd; text-decoration: none; &:hover { background-color: $darkcolor; } &:active { background-color: $darkcolor; } } |
Next, compile the SCSS file using dart-sass.
$ sass input.scss:output.css
The style.css file is transpired from the scss file and is used in the HTML page.
Please Login to comment...