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 (I will write my steps to do so in the end, maybe someone will benefit from this :))
Another alternative is to use the VS Code Extension "Live Sass Compiler". It seems that this option is quite well accepted.
However, I wonder what benefits and differences these options have. E.g. I had some troubles with the extension yesterday and then used the dart sass as a dependency and solved my problem this way. Maybe this was due to something wrong in my code, but still, it left me with this question and I think others might have the same in the future.
PS: It is my first question here, don't roast me if I did something wrong :D
For those interested in how to change the code from node-sass to dart-sass here are the steps (at least for me these were the steps in the course I did):
Install dart sass using the command line: npm i -D sass
Change your scripts where it says node-sass to just be sass (in package.json)
Change the -w in your watch:sass script to --watch (in package.json)
You can also do npm uninstall node-sass to get rid of it
I do not know what exact tutorial you are looking at. Also, I am not so experienced at the front-end, but in my opinion, using Sass as a css-preprocessor isn't the best option on production for now.
But, since you are asking how to implement sass, I'll describe a procedure, like you are using React with npx create-react-app.
First, you were right, about using dart-sass over sass. This command should help you with that: npm install --save-dev sass. According to the question, seems you already tried that.
After that, add new script to your scripts in your package.json file: "sass" : "sass src/Sass:src/Css --watch --no-source-map" and you are done.
In my own opinion, I prefer to implement it via npm instead of VSC plugin. It will more stable after all. But if you are using it, for test/study purposes, I think, you could try both.
If you want to use the most actual version Dart SASS with 'Live Sass Compiler' you need to take care about the version. The most popular version is not supported for years so it does not support Dart Sass.
But there is a fork which is supported and as fork you can use same settings.
To your Question about NPM and Live Sass Compiler: both are Javascript Version off Sass. As Javascript versions they are not as fast as if you install SASS direct on your System. The difference between Javascript vesion itself its not as big. So I think the best choice between NPM and Live Sass compiler is to use Live Sass Compiler (the forked version!) as it is integrated to the editor and easier to use direct from there.
If you need a faster solution you really should install the original version. That is not as difficult as it sounds. And there is a VS Code Extension as well wich make it possible to use that original installed version easy direct up from VS Code.
Detailed Information:
Install SASS direct on your system:
https://sass-lang.com/install
Information to the named VS Code extension:
https://stackoverflow.com/a/66207572/9268485
I am using a CSS framework, which has documentation for user-created extensions. But these extensions are all written in SASS files on GitHub.
Now this framework is only a single CSS file. But for the extensions they are requiring to use NPM, or clone the entire GitHub project, and start using SASS commands, which I'm unfamiliar with.
Is it possible that I keep the current configuration: I.e. only have the main framework CSS file, and somehow convert each extension SASS file to CSS file and add that to my /css folder? Or that's not possible?
**Edit: It's the Bulma CSS framework, and this is the link to the Extensions repository: Wikiki
If the number of files are not too much, you could convert them manually using an online sass compiler
SassMeiser is my goto choice for online Sass compilers.
Maybe if you could provide a link to the repo, we'll have more clarity on how we could deal with it.
Edit: I just went through the repo. They already have the .min.css file for each extension in dist dir. You're better off just downloading the .min.css file rather than converting it yourself. Remember, you need the .min.js files also for the extension to work.
I was wondering if someone could help me with the following problem:
I have a web project in visual studio and I am using SASS for styling. I use Grunt to execute SASS and compile the .scss files to .css files. But for this to work Ruby must be installed on my system together with a SASS module. When someone else does a checkout of my project they cannot run SASS if they don't have ruby intalled on their system with this SASS module.
Is it possible to add a ruby installation (executable) with the SASS module to my project so that when someone else does a checkout of my project they can run SASS without having ruby installed on their system.
Thx in advance for any help, also this is my first question on stackoverflow ever, tips are welcome.
(Things I have run into but will probably not work are: Less, node-sas)
I don't think you'll be able to easily add a Ruby installation executable with your project. And I don't think you should.
Have a look on libSass, which was created and maintained by Sass authors. This library allow non-Ruby users to compile Sass. You've got plenty wrappers for various languages, like .NET, Java, JS, PHP, Python...
I think this could be a workaround that fit your needs.
So... In my school the computers are locked (I can't install software) Is there some way to run stylus (compile my stylus stuff) without installing node previously? Or some portable version of node that let me run stylus like it would in a normal machine? Thanks :)
You can use codepen to compile stylus. If you've got an account just click the settings 'cog' on the CSS tab and choose 'stylus' as your preprocessor. After you put in your code you can click the 'eye' icon to view the compiled output. Run totally in the browser so installation shouldn't be an issue.
You can use http://learnboost.github.io/stylus/try.html without registration and any fee. This site is official, that's why you can use the latest Stylus features there.
Is there a way to use Sass or Compass or anything like that without Ruby?
I have been looking around google and this site and can't find anything, any help would be appreciated. Thank you
Sass was originally written for Ruby, but now they've created libSass which is a C/C++ port of the Sass engine, which makes it easier to integrate the engine into an IDE or another language. At this point, you can use the Sass engine in Ruby, Node.js, Python, PHP, Java, .NET and others. For more information, visit libSass. Also, your IDE might have a plugin which would support Sass, without the need of ruby by using the libSass.
The original answer below may or may not apply to your situation (depends on whether or not your language has implemented support for libSass or not). I decided to leave it the way it is for archive reasons.
Sass (requires Ruby)
Sass is written in Ruby, so you’ll need Ruby installed as well.
Taken from sass's site
Compass (requires Ruby, as it's based on SASS)
Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.
Taken from compass's site
Less (written in js, requires node.js or less.js included in the page)
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. Taken from Less's site
These are the main processors out there that I know of.
You may write your own parser/port for any another language of choice.
In other words, no you can't use sass/compass without having Ruby because the program itself (sass & compass) IS written in Ruby. So you'll definitely need it in order to run it.
Actually there is a library that provides binding for Node.js to libsass, the C version of the Sass: https://npmjs.org/package/node-sass
It allows you to natively compile .scss files to css at incredible speed without Ruby installed.
To install just run:
npm install node-sass
And there is also a Grunt extension if needed: https://github.com/sindresorhus/grunt-sass (this is what I've been looking for in this question)
Find out more at: https://github.com/andrew/node-sass
It's true that the question is not clear enough, but i'll try to address some issues. There are other CSS pre-processors that don't rely on Ruby (two coming to my mind right now are Less, which i've used and liked, but not as powerful as Sass, and Stylus, which i haven't used, both based on JavaScript), but as you're specifically asking about Sass+Compass, and as i'm still looking for the same answer, i'll talk about that.
#JamundFerguson said:
Is there a way to compile Sass without Ruby? Depends.
There is
Sass is a pre-processing language. There's a compiler built in Ruby for it and anyone can write a compiler in any language. There's a C implementation of a Sass compiler called libsass which can be used on any language that allows to import C libs. It's the library used by node-sass, which is a compiler built in Node.js, which I didn't tried yet and don't know how it could work and if it's ready for production use. It may be a question of time for Compass to be ported (maybe you end up doing that?) and so we can have a compiler which doesn't depends on the Ruby gem (currently, there's a node-compass module that does relies on the Ruby gem).
Other languages
So far i've mentioned the possibility for a Node.js compiler, which, as you may know, it's a JavaScript environment, being the language of the web and my language of choice. But you didn't specified which language you would like the compiler to be written into. I think there may be compilers built in many languages, for example, #EricMeyer mentioned a Python compiler. Maybe he's using pyScss? That seems to have built-in support for Compass. But then you need a Python environment. So the thing is: you'll need some environment for a compiler unless you run natively compiled binaries. (Less has less.js which can be included on the page to run client-side and avoid the compiling step, but it's not meant for using it on production.)
Native apps
I've worked for a year with CodeKit, which does very well, compiles Sass/Compass, Less, Stylus and template languages like Haml, Slim, Jade, etc. Rebuilds your assets when they change automatically and you see the changed on your browser immediately. The only thing that i didn't liked was that when moving to a different computer, installing CodeKit, checking out project and trying to use it, i had to reconfigure the project settings, which i had to remember so i could get to a build like the one i made in the other computer. Also i started working with a team, and they had also to configure the project with the same settings (sometimes not having the same project config lead to ugly inconsistencies) and also members of the team using Ubuntu couldn't use it. That's why i started to think on making a command-line tool to build projects and discovered Grunt immediately, and fell in love with it.
As #Dave mentioned, there's Scout and also there's LiveReload, but haven't used them.
Conclusion
Conclusion is i have not a strong conclusion. I'm still looking for the same answer, but i hope this answer sheds a little bit of light on the status of compiling Sass/Compass outside of the Ruby environment.
Just a little bit of an update on this, you can use SCSS/SASS files and generate the correct files on the fly without installing Ruby by using a program called Scout.
Scout has its own self contained ruby environment and is coded in java so make sure you java is up to date before using. Linky here.
Regards :)
You can actually parse sass without ruby, you can use node-sass.
details here: https://github.com/andrew/node-sass
If this is for .NET, there is now a wrapper for libsass. Available from Nuget.
Adobe Brackets (free, open source) can compile LESS, SASS and Stylus when the files are changed, and update styles during live preview, you just need to install required extensions from the extension manager.
Get Brackets and enjoy !
Edit: As other questions suggest node-sass is also a good option if you have nodejs already installed.
macOS users can install Dart Sass by running:
$ brew install sass/sass/sass
Windows users can install Dart Sass by running:
$ choco install sass
More info:
https://github.com/sass/dart-sass