Как установить sass в sublime text

Обновлено: 03.07.2024

During the last couple of months, I have been delving into the world of SASS/SCSS, and as a result SASS/SCSS has become a frequently used tool in my personal projects; and has also featured in the tutorials I have been sharing here on Codesmite.

However, I have one major pet peeve with SASS/SCSS . I like to use as few programs as possible to streamline my workflow and I am a huge fan of Sublime Text. I use it for almost everything programming related. Unfortunately, by default, Sublime Text is incompatible with SASS/SCSS syntax.

In this article I will show you how to quickly and easily configure Sublime Text for syntax highlighting SASS/SCSS , and also how to compile SASS/SCSS files into raw CSS from within Sublime Text .

SYNTAX HIGHLIGHTING

Having easy to read code that can be quickly skimmed through can greatly improve workflow, especially when hunting for that elusive semi-colon that is causing compiling errors.

The example below, showing SASS in Sublime Text with the default CSS syntax highlighting is visually quite undesirable:

Fortunately, there is a very useful package available for Sublime Text that adds support for SASS/SCSS syntax highlighting and tab code completion.

INSTALLING WITH SUBLIME PACKAGE CONTROL

From inside Sublime Text press: CTRL + SHIFT + P ( Command + SHIFT + P for Mac users), this will open the Sublime Command Palette .
Type Package Control into the input box to narrow the selection, then select Package Control: Install Package from the list.
Sublime will take a moment to retrieve the list of available packages.
When the list of available packages appears, type SASS into the input box to narrow the selection and then select SASS – SASS Support for TextMate & Sublime Text (2 & 3) .
The package will now install automatically.

SELECTING SASS/SCSS SYNTAX HIGHLIGHTING

An option for SASS is now selectable from the syntax menu, this can be found by clicking the currently selected syntax located at the bottom right of the Sublime UI.

The syntax highlighting on SASS/SCSS files is a lot more desirable and easier to read now that Sublime Text understands the syntax:

OVERRIDE HAML DEFAULTS

When opening a file with SASS or SCSS extension Sublime Text defaults the file extension to Ruby HAML syntax highlighting. This default behaviour can be easily overridden by opening the syntax menu and selecting the SASS option in the drop down from the Open all with current extension as… option found at the top of the list.

THE THEME I USE

If you like the colours of the theme used in the examples, you can find it within Sublime Package Control by searching for Predawn Monokai . It is a modification of Flatland Monokai theme with the dark UI elements of Predawn .

BUILDING SASS/SCSS IN SUBLIME TEXT

Sublime Text now recognises SASS/SCSS syntax, it would be even better if it could also perform build operations on SASS/SCSS code directly from Sublime Text without having to open another program or Console Window.

Package Prerequisites:

OSX and Linux Operating systems include Ruby by default and require no further installation.

INSTALLING WITH SUBLIME PACKAGE CONTROL

From inside Sublime Text press: CTRL + SHIFT + P ( Command + SHIFT + P for Mac users), this will open the Sublime Command Palette .
Type Package Control into the input box to narrow the selection, then select Package Control: Install Package from the list.
Sublime will take a moment to retrieve the list of available packages.
When the list of available packages appears, type SASS Build into the input box to narrow the selection and then select SASS Build .
The package will now install automatically.

Once the package is installed there will be two new options: SASS and SASS – Compressed in the build systems, located at Tools > Build Systems from the navigation bar.

The SASS build option will output a compiled CSS file that preserves the layout and whitespace of your SASS/SCSS file.

Alternatively, the SASS – Compressed build option will output a minified CSS file that removes: comments, whitespace and the semi-colon of the last rule in each block, as none of these are required to be valid CSS .

To start the build select Build from the Tools menu or press CTRL + B ( Command + B for Mac Users) while a SASS/SCSS file is open.

Once the build is complete a compiled CSS file and a CSS Map file will be created in the same folder as the source SASS/SCSS file, as shown below:

Summary

Using only two easy to install packages, we are now able to write SASS/SCSS code in Sublime Text with readable, highlighted syntax; and can also run a custom build that will turn SASS/SCSS code into compiled CSS . There are many packages available for Sublime Text that can improve functionality and workflow, making Sublime Text an even more powerful tool for programmers.

Have a favourite Sublime Text Package that improves your workflow? Let us know in the comments below; we would love to check it out.

Sass build system for Sublime Text

This is a plugin for Sublime Text 2/3 providing four build systems for Sass/SCSS files:

Nested (default)
Compressed
Compact
Expanded

Requires Ruby & Sass libraries.

Install Ruby library

Reboot after installing it.

IMPORTANT: Don't forget to mark the option 'Add Ruby executables to your PATH'. If you don't check this option, you will have to modify the path in the Build file afterwards.

OS X & Linux: It's already installed. Easy! :)

Open your console ( Command prompt with Ruby on Windows or Terminal on Mac) and execute the following command:

gem install sass

Depending on your user permissions, the above command may not work. If that is the case, try executing this command:

sudo gem install sass

OPTION 1 - With the Package Control plugin (recommended)

The easiest way to install this package is through Package Control.

Download and install the Package Control Plugin. Follow the instructions on the website.

Open the command panel: Control+Shift+P (Linux/Windows) or Command+Shift+P (OS X) and select 'Package Control: Install Package'.

When the packages list appears type 'Sass' and you'll find the Sass Build System. Select to install it.

Now you can compile your Sass files! Launch your build with Control+B (Linux/Windows) or Command+B (OS X).

Enjoy your coding =)

OPTION 2 - With Git

Clone the repository in your Sublime Text "Packages" directory:

Depending on your version of Sublime Text, you can find your 'Packages' inside the following directories:

/Library/Application Support/Sublime Text 2/Packages/

/.Sublime Text 2/Packages/

OPTION 3 - Without Git

Download the latest source zip from Github and extract it into a new folder named Sass-Build in your Sublime Text "Packages" folder.

Using the build

After installing the package you will find four new options in Tools > Build system option in your Sublime menu: Sass — Nested , Sass - Compressed , Sass — Expanded , and Sass - Compact .

By default, your .scss and .sass files will be built using the Sass — Nested setting. Additionally, the files will be saved into the same directory as the Sass file. For information on how to change this setting, please see the Recommendations section below.

And remember, always you can launch the selected build with Control+B (Linux/Windows) or Command+B (OS X).

This plugin will work best when combined with either the Sass plugin or SCSS.tmbundle.
Also, I recommend the plugin SublimeOnSaveBuild. When you save your Sass files, they will transformed into CSS!

If you want to change the default folder of where your CSS is generated, you can edit the .sublime-build files, found in the Sass-build folder of the 'Packages' directory. In Sublime Text 3, you can easily access this directory through the Preferences > Browse Packages option in the Sublime menu:

Example: Save your CSS files into a css folder: "cmd": ["sass", "--update", "$file:$/../css/$.css"],

If you are using partials and running into issues, David Kiv suggests putting this code in the .sublime-build files:

Читайте также: