https://github.com/mohammadmd1383/vscode-sassc
Compile sass/scss in visual studio code without need of installing Node.js
https://github.com/mohammadmd1383/vscode-sassc
compiler extension node-js nodejs sass sass-framework scss scss-framework stylesheet stylesheets visual-studio-code vscode vscode-extension
Last synced: 20 days ago
JSON representation
Compile sass/scss in visual studio code without need of installing Node.js
- Host: GitHub
- URL: https://github.com/mohammadmd1383/vscode-sassc
- Owner: MohammadMD1383
- License: mit
- Created: 2021-06-28T16:55:22.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-25T12:35:00.000Z (almost 4 years ago)
- Last Synced: 2025-03-26T14:55:57.038Z (about 1 month ago)
- Topics: compiler, extension, node-js, nodejs, sass, sass-framework, scss, scss-framework, stylesheet, stylesheets, visual-studio-code, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 198 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Visual Studio Code SASS/SCSS Compiler
Compile sass/scss in visual studio code without need of installing **Node.js**
## Table Of Contents
- [Features](#features)
- [How To](#how-to)
- [Config File](#config-file)
- [Extension API](#extension-api)
- [Known Issues](#known-issues)
### Features
- **Single Compilation**: compile any sass/scss file without need of being in a sass/scss project:
- see in vscode output
- compile it next to current sass/scss file
- compile it anywhere you want
- **Live View**: see the compiled css next to sass/scss as you edit
- **Compile Project**[\*](#reference): compile a sass/scss project
- **Watch Project**[\*](#reference): use sass/scss `watch` feature to compile your project
### How To
**Single Compilation**-**Live View**:
1. open any `.{sass,scss}` file
2. click the 
icon at top right of editor
3. choose the compilation mode
**Compile Project**:
1. open a vscode workspace(folder)
2. add a `sassconfig.json` file at the root of your sass/scss files
3. a status bar item appears (Compile Project)
4. click on that and your project will be compiled
**Watch Project**:
1. follow steps 1 and 2 of previous section
2. right click on `sassconfig.json` file
3. click _Watch Project_ and your project will be watched
- open commands by pressing F1
- **destroy watch**: destroys an active watch
- **show active watches**: shows the current active watches
### Config File
Here is the syntax of `sassconfig.json` file:
```ts
{
outDir?: string,
removeComments?: boolean,
sourceMaps?: boolean,
indentType?: "space" | "tab",
indentWidth?: number,
linefeed?: "cr" | "crlf" | "lf" | "lfcr",
omitSourceMapUrl?: boolean,
outputStyle?: "expanded" | "compressed"
}
```
### Extension API
This extension provides some commands that can be used by other extensions
Current Commands:
- `vscode-sassc.api.render`
- parameters
- `sass.Options` options: see [sassCompileOptions](https://sass-lang.com/documentation/js-api#options)
- returns `sass.Result`: see [sassResult](https://sass-lang.com/documentation/js-api#result-object)
### Known Issues
- nothing yet!
---
*: needs sassconfig.json file to be in the root of sass/scss project