Compass & Compass App

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

Compass & Compass App

Postby thwbn » Sat Apr 02, 2016 12:26 am

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
thwbn
 
Posts: 15
Joined: Sun Mar 06, 2016 5:26 pm

Re: Compass & Compass App

Postby pmk65 » Sat Apr 02, 2016 12:56 pm

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
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark

Re: Compass & Compass App

Postby thwbn » Sat Apr 02, 2016 7:19 pm

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 :mrgreen: ) 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:
pmk65 wrote: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 ... :roll:

Thanks
thwbn
 
Posts: 15
Joined: Sun Mar 06, 2016 5:26 pm

Re: Compass & Compass App

Postby Aivars » Sun Apr 03, 2016 9:06 am

SASS syntax is supported by Rapid PHP (check menu File -> New - you'll see SASS CSS in the list).
Blumentals Software Programmer
User avatar
Aivars
Blumentals Software Developer
 
Posts: 2453
Joined: Thu Aug 22, 2002 1:40 pm
Location: Latvia

Re: Compass & Compass App

Postby thwbn » Sun Apr 10, 2016 11:55 pm

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
thwbn
 
Posts: 15
Joined: Sun Mar 06, 2016 5:26 pm

Re: Compass & Compass App

Postby pmk65 » Mon Apr 11, 2016 11:39 am

thwbn wrote: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?)
There are 10 types of people in the world: Those who understand binary and those who don't.
User avatar
pmk65
 
Posts: 678
Joined: Sun Dec 20, 2009 9:58 pm
Location: Copenhagen, Denmark


Return to Web Developer Talk

Who is online

Users browsing this forum: No registered users and 12 guests

cron