does someone knows how to program a compiler that compiles SCCS/SASS to CSS without a VSCode extention? Can someone explain which language you need and maybe a basic concept? Thanks!
There are several ways to create your "own" sass compiler.
You could use "bundlers" like Parcel.js or Webpack where you have to write your own logic, to compile the sass/scss files.
Another way which could be similar like webpack is to use task runners like Gulp or Grunt.
Most of them will rely on some third party packages like node-sass (it is deprecated now) or dart sass.
Of course if you don't want to burn much time to learn one of these options (webpack, gulp, grunt) you could always write your own compiler with node.js
For me, I prefer to use webpack . Just have to write my webpack.config.js file once and could use it almost everywhere in my pet projects.
For most of these you will only need some javascript and you are good to go.
Hope it helps!
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 in the process of creating a website using Mono. It will be a standard webforms app (not MVC) but I'd like to use SASS for the CSS (specifically scss). However, I can't seem to get SASS to work with a mono webforms application. I tried using SassAndCoffee from NuGet and followed the standard setup instructions which said I should just reference my scss files as css files (e.g. application.scss would be referenced as application.css in a link attribute in the head. see http://blog.paulbetts.org/index.php/category/programming/mono-net/). That didn't work (or at least I'm assuming it didn't since my page rendered with no CSS and this scss has been tested on a rails platform so I know it works).
Next I tried using SquishIt which has an NSass wrapper. I followed the instructions here: http://www.cassandraking.net/wordpressapp/integrating-sass-into-net-using-nuget-and-squishit-sass/. This throw a 500 error because asp.net was unable to find NSass.Wrapper.proxy.dll. A quick google search led me to discover that because I was targeting "Any CPU", it couldn't choose between "NSass.Wrapper.x86" and NSass.Wrapper.x64". Sadly, however, MonoDevelop doesn't seem to want to give me the option to target x86 or x64 (the only option I have is to target "Any CPU").
I've kind of run out of options. Since I'm not using MVC, am I able to using SASS with a standard WebForms project using the Mono platform? Has anyone done this and can provide me some pointers?
In case anyone else runs into this, I never really found a viable solution in terms of a plugin. Honestly, Xamarin studio doesn't even seem to have a built in SASS editor as it isn't able to colour code anything in a SASS file. I ended up just using the sass command in terminal to convert a sass file to css. At a terminal prompt in the folder where your sass is kept type:
$ sass mysassfilename.sass:somecssfilename.css
To edit the sass file, I downloaded Microsoft's Visual Studio Code which has a version for the mac. It works rather well.
I tried to make simple web solution - a hello world solution - with the susy responsive toolkit. The instructions on the susy docs say to pull the sass folder in, but the sass doesn't seem to compile.
It is possible to get susy 2.2 to work in VS w/ web essentials?
I'm using VS2013 update 3 with web essentials.
I'd really appreciate it if somebody could upload a 'hello world' working solution. And so would this guy.
Additional Info for non-VS users:
Web essentials usually 'compiles' sass into css files.
Web essentials also has a menu option to compile the sass.
Once I uncomment the import statement, the sass no longer compiles or refreshes. No error message is shown. I'm pretty sure this is a web essentials plugin or web essentials dependancy problem.
At this time, VS web exetensions probably uses a sass compiler does does not meet the susy2.1's sass 3.3+ requirement.
The sass folder in the susy2.1 project compiles okay when compiled with koala - which supports sass version 3.3.7 as of writing.
As of now there is an issue with libSass and #import not working as expected. The author notes it here and links to libSass issues here
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