Vs code css компилятор

How to Compile SASS/SCSS to CSS in Visual Studio Code

SASS is a CSS preprocessor that adds special features such as variables, loops, and functions into regular CSS. You can use SASS to write CSS. The goal is to make the coding process simpler and more organized.

SASS has two versions: .sass and .scss. The main difference between these versions is the syntaxes. Once we have created our .sass or .scss files, we need to convert them into standard CSS.

This guide will show how to compile your SASS/SCSS to CSS in Visual Studio Code.

Step 1: Install Live SASS Compiler Extension

1. Select the Extensions tab from the sidebar.
2. Search for Live Sass Compiler in the search box.
3. Click on the Install button.

Step 2: Open an existing project in VS Code

1. From the “Explorers” tab in the sidebar, click on the Open Folder button.
2. Open the folder from your preferred directory.
3. Once the folder is opened, you’ll see all the source files.
4. As you can see from the above image, I have set up a simple HTML file to style it using SASS.

Step 3: Create a SASS/SCSS file

1. Inside the “Explorer” panel, click on the New File button.
2. Enter any name and press Enter. Make sure to add .sass or .scss at the end of the filename.
3. Now, write the SASS code to style your HTML file. For example, I am entering the following code:

Click on the Watch Sass button from the Status bar at the bottom of VS Code.

Finally, the extension will generate a .css and map.css file inside the project folder. The following image shows our output.

As you may have noticed, the Live Sass Compiler extension compiles your SASS files in real time. Also, choosing SASS over directly writing CSS removes many syntax requirements, like blocks and semicolons. It makes it easy to execute CSS.

Источник

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.

Usage/Shortcuts

1. 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 .
2. 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.
3. Press F1 or ctrl+shift+P and type Live Sass: Compile Sass — Without Watch Mode to compile Sass or Scss for one time.

Features

• 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)

Installation

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

Settings

All settings are now listed here Settings Docs.

FAQ

All FAQs are now listed here FAQ Docs

Extension Dependency

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

What’s new ?

Version 3.0.0 (11.07.2018)

Changelog

To check full changelog click here changelog.

LICENSE

This extension is licensed under the MIT License

Источник

Live Sass Compiler

Like it? Leave a review (please)
Something wrong? Report an issue
New hear? Watch the YouTube video A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS at real-time.

Project links

Features

• Live SASS & SCSS compile.
• Customizable file location of exported CSS.
• Customizable exported CSS style ( expanded , compressed ).
• Customizable extension name ( .css or .min.css ).
• Quick status bar control.
• Exclude specific folders by settings.
• Autoprefix support (See settings section)
• Reference a node module with a leading tilde e.g ~/nodePackage/theSass.scss

Usage/Shortcuts

1. Click to Watch Sass from the status bar to turn on the live compilation and then click to Stop Watching Sass from the status bar to turn off live compilation.
2. Press F1 or ctrl+shift+P and enter Live Sass: Watch Sass to start watching and Live Sass: Stop Watching Sass to stop watching.
3. Press F1 or ctrl+shift+P and enter Live Sass: Compile Sass — Without Watch Mode to compile one time compile the current file.

Under the hood details

This extension is actually quite simple in it’s implementation. Partial files compile all files in your project and non-partials compile just themselves. By default partial files are those that start with an underscore » _ » however, you can specify a location/glob pattern by changing the liveSassCompile.settings.partialsList setting (which defaults to [«/**/_*.s[ac]ss»] )

Installation

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

Our Open Source Commitment

The open source community is struggling! Open source maintainers spends countless unpaid hours supporting those using their project, they need some support back! This is why we have an Open Source Commitment.

Any monthly donations that we get — specifically referencing this project — will be shared with our dependencies (specified below). We support the packages that need it most, so we may not donate to all dependencies (often those developed/maintained by big enterprises). We can also only support the ones have a means of receiving donations.

Who should donate to this project?

• Those who use this product and receive some kind of profit as a result. Why not allocate a small margin to those supporting your project? This would mean the world to them.
• Those with a little extra money that they wouldn’t mind using to support the open source community

Who do you share with?

How much do you share? (% are rounded to nearest £)

• Donations < £20/m =>£0
• Donations > £20/m
  • fdir => 10%
  • picomatch => 10%
  • fdir => 25%
  • picomatch => 25%

  We hope that the project(s) we’re supporting also have their own open source commitment, supporting the projects that make their solution work.

  Thank you Ritwick Dey

  A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it.

  Источник

  easy-compile README

  Easily work with LESS/SASS/SCSS/TYPESCRIPT files in Visual Studio Code. «Compile-on-save» for LESS/SASS/SCSS/TypeScript files without using a build task.

  Features

  • Compile TypeScript and Less/Sass/Scss on save
  • Support autoprefixer for Less/Sass/Scss
  • Support mearge all media queries
  • Support inline setting (Only for Complie)
  • minify .js and .css files

  Usage

  Complie

  For TypeScript, Only compile after you setup outfile or outdir.

  Minify

  Run Command «Minify — Easy Complie» to minify files

  Extension Settings

  Settting

  Inline Setting (Only work for Less/Sass/Scss/Typescript)

  • Settings can also be specified per file as a comment on the first line.
  • Settings are comma-separated and strings are not «quoted».
  • Example:

  Settings[Less/Scss/Sass]

  • Compiles a different less file instead of this one.
  • All other settings are ignored.
  • Filepath is relative to the current file.
  • Multiple main files can be specified (see FAQ).
  • Redirects the css output to a different file.
  • This setting can be used to override a project-wide «out»: false setting, where you only want certain .less files to be generated.
  • If filepath is used, but no file extension is specified, it will append .css
  • If folderpath is used, the less filename will be used, but with the .css extension
  • Filepath is relative to the current file.
  • The default output extension is .css .
  • This allows you to specify an alternative output file extension (e.g. .wxss instead of .css )
  • This applies to the .map file also (e.g. .wxss.map )
  • When present, this enables the autoprefixer plugin (included).
  • This plugin automatically adds/removes vendor-prefixes needed to support a set of browsers which you specify.
  • The autoprefixer option is the comma-separated list of browsers for autoprefixer to use (or alternatively a string array of them).
  • See browserslist documentation for further examples of browser queries.
  • NOTE: If used with the inline setting, the browsers listed must be unquoted and semi-colon separated (because comma is already the directive separator): e.g.
    // autoprefixer: > 5%; last 2 Chrome versions; not ie 6-9, sourceMap: true, out: ../css/style.css

  Tips

  Acknowledgements

  Источник