Как подключить sass к vscode

8

How to start using SASS in Visual Studio Code

In this article I will explain how to set up the SASS web compiler with Visual Studio Code so that you can start writing SASS code for your projects.

What is the SASS?

SASS (Synthetically Awesome Style Sheets) is a scripting language that allows you to create CSS code faster and save time by reducing repetitive output. SASS allows you to parameterise repetitive inputs through variables, create functions and use nested syntax to iterate across elements.

Why do we need a SASS compiler?

The browser can not read SASS, it reads CSS. Therefore you will need a way to turn the SASS code into CSS code, a process known as transpiling.

Visual Studio Code SASS Compiler

The Sass Compiler Web Extension for Visual Studio Code is one of the best ways to have your SASS files transpiled into CSS.

To do so simply type in “Live Sass Compiler” into the extensions marketplace.

In the bottom right hand side you will see a cog if it is already installed or an install button if it isn’t. In this case simply click the button and the Live Sass Compiler will install.

After installation is complete, you should see a ‘Watch Sass’ button in the blue menu bar at the bottom of the screen, similar to the one below:

Once the compiler has started, simply create a new file with the same name as the file containing your .css code, but name it .scss instead. Once you have typed in some Sass code into the ‘scss’ file, hit save or CTRL + s and you should see a .css.map file along with a new .css file if you don’t already have one.

The map file simple shows which SASS file is being transpiled into a specific CSS file. You have to make sure to transpile your code by saving your work before you can view the updates in browser.

Name already in use

vscode-docs / docs / languages / css.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

CSS, SCSS and Less

Visual Studio Code has built-in support for editing style sheets in CSS .css , SCSS .scss and Less .less . In addition, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

VS Code has support for selectors, properties and values. Use kb(editor.action.triggerSuggest) to get a list of context specific options.

Proposals contain extensive documentation, including a list of browsers that support the property. To see the full description text of the selected entry, use kb(toggleSuggestionDetails) .

Syntax coloring & color preview

As you type, there is syntax highlighting as well as in context preview of colors.

Clicking on a color preview will launch the integrated color picker which supports configuration of hue, saturation and opacity.

Tip: You can trigger between different color modes by clicking on the color string at the top of the picker.

You can hide VS Code’s color previews by setting the following setting:

To just disable it for css, Less and SCSS, use

You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all declarations (for example, rule declarations) and for multiline comments in the source code.

Additionally you can use the following region markers to define a folding region: /*#region*/ and /*#endregion*/ in CSS/SCSS/Less or // #region and // #endregion In SCSS/Less.

If you prefer to switch to indentation based folding for CSS, Less and SCSS, use:

Emmet abbreviation support is built into VS Code, suggestions are listed along with other suggestions and snippets in the editor auto-completion list.

Tip: See the CSS section of the Emmet cheat sheet for valid abbreviations.

Syntax Verification & Linting

There is support for CSS version <= 2.1, Sass version <= 3.2 and Less version <= 2.3.

Note: You can disable VS Code’s default CSS, Sass or Less validation by setting the corresponding .validate User or Workspace setting to false.

Go to Symbol in file

You can quickly navigate to the relevant CSS symbol in the current file by pressing kb(workbench.action.gotoSymbol) .

Hovering over a selector or property will provide an HTML snippet that is matched by the CSS rule.

Go to Declaration and Find References

This is supported for Sass and Less variables in the same file. CSS variables per the draft standards proposal are also supported.

There is jump to definition for @import and url() links in CSS, SCSS and Less.

CSS custom data

You can extend VS Code’s CSS support through a declarative custom data format. By setting css.customData to a list of JSON files following the custom data format, you can enhance VS Code’s understanding of new CSS properties, at-directives, pseudo-classes and pesudo-elements. VS Code will then offer language support such as completion & hover information for the provided properties, at-directives, pseudo-classes and pesudo-elements.

You can read more about using custom data in the vscode-custom-data repository.

The CSS Languages Features extension also provides a formatter. The formatter works with CSS, LESS and SCSS. It is implemented by the JS Beautify library and comes with the following settings:

• css.format.enable — Enable/disable default CSS formatter.
• css.format.newlineBetweenRules — Separate rulesets by a blank line.
• css.format.newlineBetweenSelectors — Separate selectors with a new line.
• css.format.spaceAroundSelectorSeparator — Ensure a space character around selector separators ‘>’, ‘+’, ‘

The same settings also exist for less and scss .

Transpiling Sass and Less into CSS

VS Code can integrate with Sass and Less transpilers through our integrated task runner. We can use this to transpile .scss or .less files into .css files. Let’s walk through transpiling a simple Sass/Less file.

Step 1: Install a Sass or Less transpiler

For this walkthrough, let’s use either the sass or less Node.js module.

Note: If you don’t have Node.js and the npm package manager already installed, you’ll need to do so for this walkthrough. Install Node.js for your platform. The Node Package Manager (npm) is included in the Node.js distribution. You’ll need to open a new terminal (command prompt) for npm to be on your PATH.

Step 2: Create a simple Sass or Less file

Open VS Code on an empty folder and create a styles.scss or styles.less file. Place the following code in that file:

For the Less version of the above file, just change $padding to @padding .

Note: This is a very simple example, which is why the source code is almost identical between both file types. In more advanced scenarios, the syntaxes and constructs will be much different.

Step 3: Create tasks.json

The next step is to set up the task configuration. To do this, run Terminal > Configure Tasks and click Create tasks.json file from template. In the selection dialog that shows up, select Others.

This will create a sample tasks.json file in the workspace .vscode folder. The initial version of file has an example to run an arbitrary command. We will modify that configuration for transpiling Sass/Less instead:

Step 4: Run the Build Task

As this is the only command in the file, you can execute it by pressing kb(workbench.action.tasks.build) (Run Build Task). The sample Sass/Less file should not have any compile problems, so by running the task all that happens is a corresponding styles.css file is created.

Since in more complex environments there can be more than one build task we prompt you to pick the task to execute after pressing kb(workbench.action.tasks.build) (Run Build Task). In addition, we allow you to scan the output for compile problems (errors and warnings). Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don’t want to scan the output, select Never scan the build output from the presented list.

At this point, you should see an additional file show up in the file list styles.css .

If you want to make the task the default build task to run execute Configure Default Build Task from the global Terminal menu and select the corresponding Sass or Less task from the presented list.

Note: If your build fails or you see an error message such as «An output directory must be specified when compiling a directory», be sure the filenames in your tasks.json match the filenames on disk. You can always test your build by running sass styles.scss styles.css from the command line.

Automating Sass/Less compilation

Let’s take things a little further and automate Sass/Less compilation with VS Code. We can do so with the same task runner integration as before, but with a few modifications.

Step 1: Install Gulp and some plug-ins

We will use Gulp to create a task that will automate Sass/Less compilation. We will also use the gulp-sass plug-in to make things a little easier. The Less plug-in is gulp-less.

We need to install gulp both globally ( -g switch) and locally:

Note: gulp-sass and gulp-less are Gulp plug-ins for the sass and lessc modules we were using before. There are many other Gulp Sass and Less plug-ins you can use, as well as plug-ins for Grunt.

You can test that your gulp installation was successful by typing gulp -v in the terminal. You should see a version displayed for both the global (CLI) and local installations.

Step 2: Create a simple Gulp task

Open VS Code on the same folder from before (contains styles.scss / styles.less and tasks.json under the .vscode folder), and create gulpfile.js at the root.

Place the following code in the gulpfile.js file:

What is happening here?

1. Our default gulp task first runs the sass or less task once when it starts up.
2. It then watches for changes to any SCSS/Less file at the root of our workspace, for example the current folder open in VS Code.
3. It takes the set of SCSS/Less files that have changed and runs them through our respective compiler, for example gulp-sass , gulp-less .
4. We now have a set of CSS files, each named respectively after their original SCSS/Less file. We then put these files in the same directory.

Step 3: Run the gulp default task

To complete the tasks integration with VS Code, we will need to modify the task configuration from before to run the default Gulp task we just created. You can either delete the tasks.json file or empty it only keeping the «version»: «2.0.0» property. Now execute Run Task from the global Terminal menu. Observe that you are presented with a picker listing the tasks defined in the gulp file. Select gulp: default to start the task. We allow you to scan the output for compile problems. Depending on the compiler, select an appropriate entry in the list to scan the tool output for errors and warnings. If you don’t want to scan the output, select Never scan the build output from the presented list. At this point, if you create and/or modify Less or SASS files, you see the respective CSS files generated and/or changes reflected on save. You can also enable Auto Save to make things even more streamlined.

If you want to make the gulp: default task the default build task executed when pressing kb(workbench.action.tasks.build) run Configure Default Build Task from the global Terminal menu and select gulp: default from the presented list.

Step 4: Terminate the gulp default Task

The gulp: default task runs in the background and watches for file changes to Sass/Less files. If you want to stop the task, you can use the Terminate Task from the global Terminal menu.

Customizing CSS, SCSS and Less Settings

You can configure the following lint warnings as User and Workspace Settings.

The validate setting allows you turn off the built-in validation. You would do this if you rather use a different linter.

To configure an option for CSS, use css.lint. as the prefix to the id; for SCSS and Less, use scss.lint. and less.lint. .

Set a setting to warning or error if you want to enable lint checking, use ignore to disable it. Lint checks are performed as you type.

Read on to find out about:

— Dig into Tasks to help you transpile your SCSS and Less to CSS. — Learn about the powerful VS Code editor. — Move quickly through your source code. — CSS is just the start, HTML is also very well supported in VS Code.

Does VS Code provide a color picker?

Yes, hover over a CSS color reference and the color picker is displayed.

Is there support for the indentation based Sass syntax (.sass)?

No, but there are several extensions in the Marketplace supporting the indented flavor of Sass, for example, the Sass extension originally created by Robin Bentley, now maintained by Leonard Grosoli.

Как подключить sass к vscode

Compiling Sass & LESS files in Visual Studio has never been easier. I&#39;ll show you how to use the Web Compiler extension to generate standard CSS files from multiple SCSS files on the fly.

What is SCSS?

Sass is a CSS preprocessor with enhancements to the CSS syntax. It&#39;s generally favoured over standard CSS for several reasons, I&#39;ve found that being able to use imports and mixings&#39; allows me to re-use code and maintain a larger codebase with more ease.

SCSS (Sassy CSS) is a newer standard, built as an enhancement to the older Sass standard.

What you can do after following this guide

Once you have followed the steps in this guide, your SCSS files will automatically be compiled to browser readable .css and minified min.css files every time you save the SCSS files.

Install The Extension

This tutorial assumes that you already have an ASP.NET Web Application open in Visual Studio.

We start by installing the Web Compiler extension to Visual Studio.

1. Click on Extensions > Manage Extensions > Online
2. Now search for «Web Compiler»
3. Click on the Download button
4. Close Visual Studio and wait for the installer to appear. Follow the steps to install the extension. NOTE that it can take a few seconds for the installer to appear. Wait for the installer to finish before re-opening Visual Studio.

Create Your SCSS file

We now need to create a SASS (scss) file. Start by creating a file named style.scss in the wwwroot > css folder

Now right click on the newly created style.scss file and click on Web Compiler > Compile file.

If everything worked as expected, you should now have a style.min.css file and a style.css file underneith the style.scss file. Contratulations, you&#39;ve now compiled a Scss file into standard browser compatible css.

Understanding compiler.config

The very first time you use the Web Compiler extension, a file named compiler.config will be created in the root of the project. This JSON formatted file containts the input and output file paths.

If you want to add an additional Scss and CSS file, either right click the CSS file in the GUI like we just done, or alternatively you can edit the compiler.config file directly. For example:

All input files will be watched for changes, and the corrisponding output files will be updated when you make a change to the Scss, providing you have the extension installed. So remember to install the Web Compiler extension again if you work on the project from a new computer, since extensions don&#39;t currently follow the project between installations of Visual Studio.

Как установить sass в visual studio code

Live Sass Compiler

[If you like the extension, please leave a review, it puts a smile on my face.]

[If you found any bug or if you have any suggestion, feel free to report or suggest me.]

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.

Click to Watch Sass from Statusbar to turn on the live compilation and then click to Stop Watching Sass from Statusbar to turn on live compilation .

Press F1 or ctrl+shift+P and type Live Sass: Watch Sass to start live compilation or, type Live Sass: Stop Watching Sass to stop a live compilation.

Press F1 or ctrl+shift+P and type Live Sass: Compile Sass — Without Watch Mode to compile Sass or Scss for one time.

• Live SASS & SCSS Compile.
• Customizable file location of exported CSS.
• Customizable exported CSS Style ( expanded , compact , compressed , nested ).
• Customizable extension name ( .css or .min.css ).
• Quick Status bar control.
• Exclude Specific Folders by settings.
• Live Reload to browser (Dependency on Live Server extension).
• Autoprefix Supported (See setting section)

Open VSCode Editor and Press ctrl+P , type ext install live-sass .

All settings are now listed here Settings Docs.

All FAQs are now listed here FAQ Docs

This extension has dependency on Live Server extension for live browser reload.

Version 3.0.0 (11.07.2018)

• Upgrade sass.js library that included fixes for 8 digit Hex code & grid name. [Fixes #39, #40, #78]

To check full changelog click here changelog.

This extension is licensed under the MIT License

About

Compile Sass or Scss file to CSS at realtime with live browser reload feature.

Development Environment Setup for Sass/SCSS

In this Sass/SCSS tutorial we learn how to set up a complete development environment with Node & NPM, Visual Studio Code and Sass.

We also cover how to set up a workspace, initialize a project and working with the terminal.

Sass/SCSS Development Environment

Before we can start writing any Sass code, we will need to set up a development environment.

For this course, our development environment will consist of the following technologies:

The Node Package Manager (NPM)

Every Node.js installation comes bundled with npm, which we will need to install, run and build our Sass/SCSS scripts. We also use it to work with PostCSS later on.

note If you need it, Sass can integrate easily into other languages like C, Rust and Python through LibSass .

note Unfortunately, the Ruby implementation of Sass reached its end of life in March 2019. Ruby can not be used for Sass anymore.

MS Visual Studio Code as our code editor.

VS Code is a free IDE for Windows, Mac and Linux with native Sass support. It has an integrated terminal, as well as some optional extensions, that will make our lives just a little bit easier.

If you don’t want to use VS Code as your code editor, you could try one of the alternative IDEs at the end of the lesson.

Local Sass installation.

The Sass package can be installed either globally (it will be available in any project in our system), or locally (it will be available only to the current project).

We should always install Sass locally to avoid conflicts between projects.

Install Node.js

Node.js is a runtime environment that can execute JavaScript code outside of a web browser.

Node comes bundled with the Node Package Manager (NPM) which allows us to easily install and manage Javascript packages like Sass.

If you don’t already have Node.js installed, please follow the steps below to install it on your system.

Windows:

1. Point your browser to the Node.js Downloads page.
2. Ensure that you are selecting from the LTS (Long Term Support) tab.
3. Choose either the 32 bit or 64 bit .msi installer, based on which version of Windows you’re running .
4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Mac:

1. Point your browser to the Node.js Downloads page.
2. Ensure that you are selecting from the LTS (Long Term Support) tab.
3. Choose the 64 bit .pkg installer.
4. Once the download has finished, launch the installer and follow the steps in the installation wizard.

Linux:

1. Head over to Nodesource and follow the installation instructions.

Nodesource provides the official Node.js binary distributions.

Verify:

To verify that Node.js was installed, run the following command in your terminal. Any version number means the installation was successful.

Install MS Visual Studio Code

Please follow the steps below to set up MS Visual Studio Code.

1. Point your browser to the Visual Studio Code downloads page.
2. Choose a download based on your operating system and install VSCode once the download has finished.

note Windows users: If you are on a shared computer, choose the User Installer. Otherwise, choose the System Installer.

If you’re having trouble installing VSCode, please see the official documentation for help.

Workspace

Next, we need to create a workspace. A workspace is simply a folder somewhere on our system that contains all the files we need for our project.

1. Create a single folder called “LearningSass” on the Desktop.
2. Open the folder as a project/workspace in your IDE.

If you’re working in Visual Studio Code, go to File > Open Folder, then navigate to the “LearningSass” folder on the Desktop and select Open Folder.

Terminal

From this point, we’re going to start working in the terminal.

If you’re working in Visual Studio Code, go to Terminal > New Terminal to launch a new terminal instance in the bottom pane of the IDE.

It will be pointed to the “LearningSass” folder automatically, so there’s no need to navigate to it. That also means you can skip to the next section .

If you’re not working with VS Code or an editor with an integrated terminal, you will have to open your terminal and navigate to the “LearningSass” folder manually.

Windows:

Click on Windows button, type cmd and press Enter to launch the Command Prompt.

Mac:

Open Applications > Utilities and double-click on Terminal.

Linux:

Press Ctrl Alt T to open the terminal.

To navigate to a directory on the computer, we use the cd (change directory) command, followed by the path to the directory we want to change to.

The command above tells the terminal that we want to navigate into the Desktop, then the “LearningSass” folder.

tip If you want to navigate up into a parent directory, use the ../ command.

If we’re in the “Desktop/LearningSass” directory, the command above will move up one level to “Desktop”.

Going back into the “LearningSass” folder from there is easy.

Once we’re in the “LearningSass” folder, we can initialize our project and generate a package.json file.

NPM init & package.json

Any project that uses Node.js will need to have a package.json file, and when we initialize a project with the init command, we generate this file.

Basically, it will contain information about the project, its source control, any dependencies it has and commands that it uses.

To initialize a project, run one of the following commands in the terminal in your project directory.

If you add the —yes flag to the command, it will initialize the project immediately without asking you to input the details of your project.

note You can change these details by editing the package.json file directly later on, so it doesn’t really matter if you skip them now. The defaults are fine at this point.

If you don’t add the flag, the console will ask you to enter certain details about your project. If you want to skip one of the questions, you can simply press Enter.

When the project has been initialized, you should see the package.json file in the “LearningSass” folder.

If you open it, it will look similar to the following.

Install Sass

Finally we’re ready to install Sass.

As mentioned before, we will install Sass locally. This means that it will only be available in the current project and so avoid any conflicts or complications because of a global installation.

To do this, run the following command in the terminal in your project directory.

While that’s installing, let’s go through the command above.

The first part is the way we install any NPM package.

The [package] part is replaced by the name of whatever we want to install, in this case sass .

The next part is the flag that specifies extra options.

This particular flag tells NPM that we want to save Sass as a development dependency.

We also have the option to save Sass as a runtime dependency by changing the flag.

But Sass is not a runtime environment, so we don’t save it as one.

Once Sass has finished installing, there should be a new folder called “node_modules” in the project. This folder contains Sass and all of its own dependencies.

The package.json file has also changed.

We can see a new entry called devDependencies with the sass version underneath it.

This means that anyone working with this project will need to have those dependencies installed.

As an example, let’s consider that we want to share this project with someone. We would need to include the whole “node_modules” folder so that the other person working on it will have the same tools available.

The problem is that the “node_modules” folder can in some cases become extremely large.

If we specify our runtime and development dependencies, we don’t have to include the “node_modules” folder when we share the project (or add it to source control).

The other person can then install all of these dependencies on their own system with just one command.

To demonstrate, let’s delete the whole “node_modules” folder from our project.

To reinstall all the dependencies from the package.json file, we simply have to run the following command.

Once the installation has finished, the “node_modules” folder will be back, along with Sass.

Bonus: IDE Alternatives

You can find a list of alternative IDEs below if you don’t want to use Visual Studio Code.

Installation instructions can be found in the Atom flight manual .

Optionally, a terminal can be added with the PlatformIO IDE Terminal package.

Installation instructions can be found in the official documentation for Windows or Mac .

Any version above 16.3 has an integrated terminal.

Installation instructions can be found in the unofficial documentation .

Optionally, a terminal can be added with the Terminus package.

Installation instructions can be found in the Help section .

Webstorm has an integrated terminal.

There are also a few GUI applications that will help you get up and running with Sass quickly.

• (free) Koala
• (free) Scout App

Lastly, there are web-based services that allow you to work with Sass.

Instructions on how to use a preprocessor can be found in the documentation .

We recommend setting up an environment that will closely mimic the one you will be using in production.

How to setup and use SASS in VS Code (Dart SASS support + Live page preview)

SASS stands for “Syntactically Awesome Style Sheets” and it is an extension to CSS which helps us write more flexible styles – in other words, it’s a CSS preprocessor.

CSS are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. SASS lets you use features that don’t exist in CSS yet like nesting, mixins, inheritance and others.

Note: How does SASS Work?

A browser does not understand SASS code. Therefore, you will need a SASS preprocessor to convert SASS code into standard CSS.

This process is called transpiling. So, you need to give a transpiler some SASS code and then get some CSS code back.

In other words, SASS helps us organize large stylesheets in a more maintainable way. In this article, you will learn to set up development environment for SASS in Visual Studio Code.

How to setup SASS dev environment in VS Code

Now follow the step by step methods to get started with SASS inside VS Code:

Step 1: Download Visual Studio Code (VS Code) and install it on your system.

Step 2: Open VS Code and then click on extensions tab.

Step 3: Search for DartJS Sass Compiler and Sass Watcher by CodeLios and install it.

This extension will do magic part of SASS in your project which is compatible with latest Dart SASS.

Step 4: Then install Live Server from VS Code Marketplace.

This extension allows browser to auto reload.

Step 5: Create a directory named “SASS-DEV” in VS Code.

Step 6: In root directory create “index.html” file and then add the following html code:

The current directory structure and html code will look something as illustrated:

Step 7: Next create a directory called “sass” in your root project directory. Then, under “sass” directory create another file called “style.scss”.

.scss or .sass?

In SASS there are two ways of writing – .scss and .sass – however after being compiled they generate similar output.

.scss is the modern standard. It’s syntax is very similar to CSS in that it uses brackets and semi-colons. Even normal CSS is valid in this syntax.

.sass is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules.

Step 8: Now let’s jump straight to write some code in “style.scss”.

Then save the file by pressing CTRL + S which will automatically generate “style.css”, “style.css.map”, “style.min.css” and “style.min.css.map” for you.

While writing down code, you only need to write code in “style.scss” and it auto generate plain css for you in “style.css” file.

Note: Never add code in your css file else it will erase automatically by SASS compiler.

Step 9: After all setup click on “Go Live” from VS code status bar which will fired up Chrome browser to open the Live server with IP address and port. You can start building your project along with the all the assets. Any file changes such as “index.html” will automatically reload on your open browser.

Here is how the output looks on Google Chrome browser:

If using an extension from VS Code marketplace is bit overwhelming, you can roll the preprocessor into your workflow by using a simple GUI on your development machine and compile as you go.

Several applications are available for SASS but the best two applications we recommend are as follows:

Prepros: This tool compiles SASS with automatic CSS prefixing and includes a built-in server for cross-browser testing. All its features are available with its free unlimited trial and bonus it runs on Mac, Windows, and Linux.

Koala: This GUI application is also cross-platform and offers real-time compilation. Koala runs on Mac, Windows, and Linux.