CODEWITHSUNDEEP
csscompilationsasscross-compiling
Keegan Brown
Keegan Brown

Reputation: 213

How do you compile SASS code to CSS?

I just learned some sass using codecademy.com, and I have no idea how to "compile" my main.scss file to my main.css file. Does anyone know how I can do this with Notepad++ and/or Sublime Text as my text editor(s)?

Upvotes: 2

Views: 3719

Answers (2)

andrralv
andrralv

Reputation: 860

There are three options:

  1. As another person mentioned you can use a text-editor built in with Sass-builder as one of the options. This is the easiest option. You might still need to install Ruby to get it to work tough.

  2. You can use a Pre-processor such as Gulp or Grunt to do it for you. I recommend Gulp for beginners.

  3. You can do it manually by downloading SASS via Ruby package manager:

    • Install ruby: https://www.ruby-lang.org/en/downloads/
    • Open Powershell or Terminal and navigate to your project directory
    • Type "gem install sass" to have sass installed.
    • Now make a directory with all of your sass files and another one with the css file destination.
    • Type sass --watch "yoursassdirectory"/style.scss : "yourcssdirectory"/style.css
    • Now Sass will watch and compile your sass files as you save them.

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You need the SASS Pre-Processor to compile SASS into CSS. You should either use Compass or SASS to compile. When doing development on your project, you can run the compass watcher to keep your CSS files up to date as changes are made.

$ cd /path/to/project
$ compass watch

Compiling Sass into CSS in Sublime Text is possible with a plugin called SassBuilder, which you can install through Package Control (see screenshot).

SASS Builder

BTW, a quick question. main.scss to main.sass or main.css?

Upvotes: 6

Related Questions