What is sass? Install and compile Sass into CSS (Install and Compile Sass)

Tram Ho

Surely when embarking on writing CSS code on a slightly larger project, no one will inevitably have 1 CSS file thousands of lines of code, and that will be a terror for you one year after reading. and have to maintain that mess of lines of code. Therefore, in this article, I will introduce to you a great support tool to help you write more structured, readable and maintainable CSS code – called SASS .

Why use Sass? What features does Sass have?

As the introduction I mentioned above, using Sass instead of writing CSS code directly will help you more easily manage your code structure, maintainability, and of course, you will feel more professional when writing. code ? ))

So what are the characteristics of Sass that make us spend time learning ???

On Viblo there are quite a few detailed explanations of Sass, so I will just summarize the remarkable features of Sass and give examples for you to understand. Link to find out more details about us will be below the references section.

  • Variables (Declaring variables) : Sass allows you to use variables to declare a certain value to use more than once in the code. For example, you want the main color tone of your web to be blue. You will put a $ color variable with the value “blue” and you use them in your code. Then, when he was about to finish the project, what did the wicked guest prefer the orange website ?????? Ez =))) Instead of finding each line of code to change the color like when writing CSS, you just need to change the value of the variable $ color from blue to orange. It’s quite a time saver, =)))
  • Nesting (Write nested code) : Avoid repeating having to rewrite the nested tags as many times as writing CSS -> Save time when writing code and the code will be cleaner. Especially useful when used with 'BEM methodology' .
  • Partials : Split the code into small component files and finally import them into a common file.
  • Mixin, Function : It’s a bit like writing functions in other languages ​​like C or JS ——–> Learn more: link in the references section. ?
  • Some other features : Control Directives ( @if , @for , @while , …), Extends (Inheritance), ….

Install and compile Sass

  • Use Applications (understand the software): There are many applications that are easy to install and help you run Sass code if you are not familiar with using command lines such as CodeKit , Compass.app , Hammer , Koala , … You can search gg to understand more, but I see quite a lot of people use Koala because it is open source that can run on both Mac, Linux and Windows.
  • Use on Command Line:
    1. Install on Windows using Chocolatey: Chocolatey is basically a package manager that helps you quickly and easily insatll an application with the command line on Windows. Install: choco install sass
    2. Install on Mac OS X using Homebrew: brew install sass/sass/sass

    For those who use Node.js like me, you can also install Sass with the npm package manager. This is the current method I am using, so the whole part will be about installing and compiling Sass with npm.
    -> Install Npm : apt-get install npm -> sudo apt-get update

    -> Install Node-sass : npm install -g node-sass . If not used the flag -g node-sass will only be installed in your current directory.

    -> Compile Sass files : node-sass "input file's direct path" "output file's direct path" . For example: "node-sass sass/main.scss css/style.css" ( main.scss is the main Sass file after importing all partials, style.css is the css file after compiling the Sass file).

    However, if you use the above compile statement, every time you change the Sass file, you have to run the command once. Back to the code-saving problem =))), use this command instead: "node-sass sass/main.scss css/style.css -w" . We add the -w (watch) flag to make npm “keep an eye on” the file for me, whenever the Sass file changes, they will automatically be compile automatically.

Epilogue

This article is quite long already. Hope I helped you understand more about this great CSS support tool. Quit writing pure CSS and switch to Sass right away and you will find yourself saying it is not wrong, it is extremely great =)))). If you have any suggestions or questions, please comment below to support me ?

References

About Sass :

https://viblo.asia/p/sass-can-ban-QWkwGnNEG75g

https://viblo.asia/p/sass-nguoi-ban-vo-cung-huu-dung-khi-su-dung-css-L4x5xNmaZBM

Sass Documentation :

https://sass-lang.com/install

https://sunlightmedia.org/using-node-sass-to-compile-sass-files-in-an-npm-script/

Share the news now

Source : Viblo