I inherited a website that uses scss files for styling specific pages. I am not familiar with scss.
I just want to make a few changes. How can I convert the scss files to css?
I tried a quick and dirty method of using the browser's inspector to copy the parsed css, but it seems to capture the pieces that make scss work. The online converters fail with undefined variable issues. I am willing to do the homework, if you can point me in the right direction.
Thanks.
Basically you need a compiler for Sass, and for this you need: NodeJS, npm and install Sass.
Install Sass
So you need:
Install NodeJS;
Install npm;
Install Sass.
If you search the Internet you find enough content on the three and how to install in your environment (Windows, Linux or Mac).
I'm looking to install Webpack4 for a project.
Part of what I want it to do is lint css.
Just about every resource I find points to "stylelint-webpack-plugin" (https://github.com/JaKXz/stylelint-webpack-plugin).
That project's not been getting updated for a long time.
From what I can tell the webpack team bullied the dev responsibile for lots of the work on stylelint-webpack-plugin right out of the community.
So now the project's got nobody doing the work and it's "looking for a maintainer". After that whole mess, doesn't look like anyone's signing up.
From my perspective -- Oh Well! Next !?
Is there a different alternative to stylelint-webpack-plugin for lint-ing styles in a webpack setup?
The stylelint-webpack-plugin now belongs to the official webpack-contrib GitHub organisation. The plugin's dependencies are up-to-date and it supports the latest version of stylelint (version 9).
I believe it is the still the most appropriate plugin for using stylelint within Webpack.
I am using CSSLint via the CLI. I have spent quite a bit of time following the steps found here and here to write custom css linting rules. They are tested and they work correctly, however now that I have created the rules I am not sure how to actually add them to the linter (or installed via npm) so that can be used via the CLI to lint my projects. I have scoured the documentation in the github wiki and cannot seem to find an answer.
Keep in mind these rules are project specific and they are not meant to be submitted to the csslint github repo.
Figured it out. I used 'grunt release' and then published it as an npm module, and then installed it. The cause for the issue was that I needed to uninstall the original version of cssLint as it was overriding the new one.
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.
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