A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
Compile Sass or Scss file to CSS at realtime with live browser reload feature
Questions tagged [live-sass-compiler]
28 questions
9
votes
2 answers
Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)
I am doing an online course on Advanced CSS and Sass and found out that the way it is shown in the course is a bit outdated.
The course uses node-sass in the dependencies, which is deprecated. A direct alternative to this would be to use Dart-sass…
MikhailRatner
- 452
- 6
- 13
2
votes
0 answers
SCSS Variable not applying globally
I have a variable and gallery partial: _variables.scss, _gallery.scss
When I import the variables file, which contains only one line $primary: #e0291a;, it works in the main style.scss file, but not in the _gallery.scss file.
My project is only…
HenrijsS
- 656
- 4
- 25
2
votes
0 answers
SCSS files in different project folders get compiled into one CSS file
I have a folder with multiple projects, each project has its own folder.
The structure is like this:
project 1
project 2
...
project n
dist
sass
index.html
Each project consists of a dist and sass folder.
The problem is, when I compile a Sass…
SassCrafter
- 46
- 3
1
vote
2 answers
How to view the Scss's @debug result in vscode or in browser dev tools?
How can I watch @debug result in scss?
I'm using the Live Sass Compiler by Glenn Marks in VSCode. Is there a way I can see the debug output in the terminal or chrome console?
Code example:
@debug 'hello world';
@debug math.div(10, 3);
Rocky Barua
- 512
- 1
- 4
- 17
1
vote
1 answer
Live Sass Compiler is Node Sass or Dart Sass?
I found 2 extension are named Live Sass Compiler. One of them which developed by Ritwick Dey has been deprecated. And it was not compatible Dart Sass (@use or @forward). Another one is…
Misa
- 21
- 3
1
vote
2 answers
Live Sass compiler does not compile list operations
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a…
Script Raccoon
- 261
- 2
- 14
1
vote
1 answer
autosave main scss file instead of having to save it manually
My folder structure is as follows
I am using 'live sass compiler' in vscode to watch files. But every time I update other scss files like _globals.scss I have to manually save style.scss for the changes to reflect. Is there a work-around to auto…
Palx
- 57
- 5
1
vote
1 answer
Partial Compiling of SCSS file into CSS
I use lates Vscode with the extension "live SASS Compiler". I want to use bootstrap, so I linked a style.css file in html, which is supposed to have all the compiled bootstrap.css codes (including mine). To customize the Bootstrap theme, I have…
Tanvir
- 1,642
- 8
- 32
- 53
1
vote
1 answer
With VSC Live Sass Compiler, is there a way to create multiple source directories which output to respective CSS directories?
I'm using VS Code and Live Sass Compiler to handle my SCSS files. We have our standard styles for various pages. Those files are sourced at ~/scss and compile to ~/dist/css/.
However, I'm starting to write out custom components and I want to link…
Millhorn
- 2,953
- 7
- 39
- 77
1
vote
1 answer
VS code live Sass compiler not generating css file
Checked at least 10 different sources for a solution but cant find anything that helps. As you can see in the pics, I have a path specified in settings.json but it's not generating a css file in the specified css folder when I click "Watch…
TheLonerCoder
- 19
- 4
1
vote
2 answers
SCSS: -ms-prefix causes error in CSS file
I am using the Live Sass Compiler in Visual Studio Code.
My SCSS file contains this grid:
$grid-cols: 12;
$grid-gutter-x: 16px;
$grid-gutter-y: 16px;
.grid {
position: relative;
width: 100%;
display: grid;
grid-template-columns:…
michaelT
- 1,533
- 12
- 41
0
votes
1 answer
Sass compilation error (underfined variable)
I'm trying to compile a Sass file
The root file looks like this
@use '_colortheme'
@use '_config'
@use '_datepicker'
@use '_main'
In partial _main I'm trying to use variables from _colortheme and _config but get the error for all the…
keyc9
- 15
- 5
0
votes
0 answers
media-query not being transferred from scss to css when using vscode: live sass compiler
I'm working on making a webdesign responsive and therefor now trying to implement media-queryies with skeleton brakepoints. But when compiling the scss file to css with the vs code extension, the query doesn't show up in the css file and as a result…
Nyghtqore
- 1
- 5
0
votes
0 answers
CSS background color not reflecting
So I am following along with a youtube tutorial to set up my VSCode on front-end development for beginners. Heres the link to the video. https://www.youtube.com/watch?v=aydFCQiUW44&list=WL&index=10&ab_channel=CoderCoder
My issue is that as I follow…
vel P
- 1
- 1
0
votes
1 answer
liveSassCompile.settings.savePath when set to null generate css in various folder that contains css why? how to stop from doing that
I want to only watch the scss on the folder I am current on, because not all projects I work the scss on the same folder so I can't specify savePath to a particular path.
I am trying to use liveSassCompile extension on Visual studio code, with…
Adriana
- 1