Up next in 10
This VSCode Extension Compiles SASS or SCSS to CSS in Realtime With Live Preview
Jul 4, 2025
Get the full source code of application here:
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video, I'll show you how to
0:04
compile your SAS files directly into CSS
0:08
inside uh VS code editor. Uh so there is
0:12
an extension right here which compiles
0:14
your SAS documents directly into CSS. So
0:17
let me just create a SAS file here. The
0:20
extension is sc.
0:24
And if I paste some code right here, you
0:26
will see this is a SAS file. Here we
0:28
have declared a bunch of variables. So
0:31
if I want to compile it into CSS file,
0:34
just go to the extensions tab and just
0:36
type this extension live SAS compiler.
0:42
So this extension will come right here.
0:44
This one is depreciated. Don't install
0:47
this one. Install this one. About 2
0:50
million downloads it has. I've already
0:53
installed it. So once you click the
0:55
install button the extension will be
0:57
enabled globally. And now what you need
0:59
to do just open the shortcut key go to
1:02
the command pallet control shiftp and
1:06
just write here type
1:11
live
1:12
SAS live SAS and you will see this
1:15
option compile current SAS file. You
1:20
just need to go to the command pallet
1:23
and just type here live SAS
1:26
compile current SAS file. So it is
1:28
compiling it. So now you will see the
1:30
compilation has been successful and in
1:32
the left hand side you will see it has
1:34
generated this uh compiled this SAS to
1:37
CSS file. It generated two files CSS map
1:41
file as well. This is your CSS file.
1:44
Your SAS has been successfully compiled
1:47
to CSS. So in this easy way you can use
1:51
this VS code extension to directly
1:53
compile your SAS into CSS and this will
1:55
save you a lot of time because you no
1:57
longer need to use any sort of third
1:59
party library for doing this process. So
2:02
in the VS code editor itself you can
2:04
compile your SAS documents directly to
2:06
CSS. Once again let me show you how to
2:09
do this. You open your command pallet.
2:13
Just type here live SAS
2:18
and then you will see a bunch of options
2:20
as well
2:23
but you need to select the first option
2:24
compile current SAS file and then it
2:27
will compile it and generate the CSS
2:29
file. So in this way you can do this and
2:33
uh also at the bottom side at the status
2:36
bar you will see this option appearing
2:38
watch SAS option. So this also does the
2:41
same thing in the status bar. It
2:43
actually watches in real time. As you
2:46
type your SAS code, it will compile all
2:50
the SAS that you write in this in real
2:52
time. So it is watching it. So let me
2:55
just paste the SAS file automatically.
2:59
Now as you type something inside the SAS
3:02
file, it will generate the CSS file
3:04
automatically. So this is little bit
3:05
easier. You will see this icon. It is
3:08
watching here. So it is watching your
3:10
SAS file and it will compile it once you
3:12
make any sort of changes. So this is a
3:15
great little extension that you can
3:16
install in VS code which directly
3:19
compiles your SAS into CSS. And please
3:22
hit that like button, subscribe the
3:24
channel and also check out my website uh
3:26
freemediatools.com
3:28
uh which contains thousands of tools.
#Programming