Compass & Compass App

[thwbn]

Hi,

does anybody use / know Compass-app for SASS, too? As far as I understand it is freeware now. Any comparison with prepros possible?

http://compass.kkbox.com/

I am looking für the best way to create CSS on a smart way. I was reading and searching for more then one week. But it not seems be possible to write *.scss in Rapid php including a automatic translating into css? Right or wrong? So I stil need an external translator, like compass-app or prepros, needn't I?

Is there any workaround to keep this workaround inside of Rapid PHP?

Thanks a ton for any ideas / answers!


Thorsten

[pmk65]

You could write a plugin that gets triggered when you save the SASS document. The plugin could then process it using external tools (That's what Prepros and other preprocessors do) and load the the CSS result file into another editor Tab if you want that.

A plugin like that already exists for processing LESS files. http://forums.blumentals.net/viewtopic.php?f=33&t=6494
It should be pretty east to adapt/convert that to SASS usage, since both SASS and LESS works in a similar fashion.

To use Compass.app you will have to install Ruby first. (Something that you don't need with Prepros as all that stuff is contained in the app)

A alternative to Ruby/Compass is to use the Node.js version of SASS.

https://github.com/sass/node-sass
https://npmjs.org/package/node-sass

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

To install just run this command from a command prompt (Provided that you have installed nodejs first):

Code: Select all

npm install node-sass

[thwbn]

Hi,

are you suhre, that I have to install Ruby?

https://github.com/KKBOX/CompassApp/wiki
or
http://compass.kkbox.com/
here I found:
Compass.app is written in Java (JRuby), and works in mac, linux and pc. You do not need to install Ruby environment to use it.



As far as I understood, the Compass.APP works the same way as prepros: it works in the background (after creating a project, project folder to tell Compass.APPto watch for and compile the scss files into the css file); An auto reload of the Browser window (I never test it in Compass.App)

After all you need to use your favorite text editor (lets call it Rapid php ) to create or change the *.scss file.
BUT there (in Rapid php) we do have nor a code completion neither a syntax control for Compass / SASS, haven't we?


By the way:

You could write a plugin that gets triggered when you save the SASS document.

I knew already about the LESS Plugin, but I am afraid, that I do not have the ability to write a plug-in like this for SASS ...

Thanks

[Aivars]

SASS syntax is supported by Rapid PHP (check menu File -> New - you'll see SASS CSS in the list).

[thwbn]

Hi,

sorry for delay.

In my mind, you should force the SASS support since
a) VS Code has a huge support for SASS https://code.visualstudio.com/Docs/languages/css
b) Bootstrap 4 will drop LESS and use SASS only: http://blog.getbootstrap.com/2015/08/19 ... p-4-alpha/

so in VS Code you can create and use (in code completion) your own variables in SASS. And there are options to auto process *.scss to *.css files! This is something I would really appreciate for Rapid PHP, too.


Thanks

Thorsten

[pmk65]

Hi,

sorry for delay.

In my mind, you should force the SASS support since
a) VS Code has a huge support for SASS https://code.visualstudio.com/Docs/languages/css
b) Bootstrap 4 will drop LESS and use SASS only: http://blog.getbootstrap.com/2015/08/19 ... p-4-alpha/

so in VS Code you can create and use (in code completion) your own variables in SASS. And there are options to auto process *.scss to *.css files! This is something I would really appreciate for Rapid PHP, too.


Thanks

Thorsten

Compiling CSS/JS is not really an editor task. And "VS Code" doesn't do that either. It passes the file to node-sass, and then it compiles the file.
Something similar is easily done using the editor API and a plugin. (I'll make a simple one for you if you want?)