Re : LESS and SASS

Re : LESS and SASS

  
Is it possible to use LESS or SASS in the Agile Platform?
Hi Britni,

At the moment there's no support for LESS, SASS, or other CSS generating languages although we've been doing internally some experiments with LESS parsers, so there's a chance that native support might be added to the product in a near future.

However, if you have a huge amount of CSS you need to manage and using a tool like LESS would  turn into an advantage, you can still do it. Here's my suggested setup to perform such a task (which I've already used in some projects):
  1. Setup a folder where you'll use your source file and destination CSS file (eg: style.less and style.css)
  2. Open both files in an editor capable of recognizing when an open file changed so it refreshes its view automatically. For this effect you can use something from a lightweight notepad++ to a heavyweight visual studio.
  3. Run your favourite less compiler in watch mode so whenever you save style.less, style.css will be automatically updated. This way you save style.less in one of the editor's windows/tabs and the generated CSS should become immediately available in the other.
  4. You can then copy-paste the generated CSS into Service Studio's stylesheets
If you run this setup in a windows machine, I'd suggest using dotnetless instead of the original less (in ruby) since the .NET port runs way faster and seems to be more resistent to crashes.

Also if you end up editing your CSS (and your LESS) file a lot, a batch file for streamlining the first 3 steps can become a valuable asset. I use the following for editing the files with GVIM, but I'm sure you can adapt it to use any other editor:
start /b lessc style.less --watch
gvim style.less -c ":new style.css"
Cheers,

Miguel

What about now? I tried cannot..Still not supported or maybe we need some tricks to make it work?


At the moment there's no support for LESS, SASS, or other CSS generating languages although we've been doing internally some experiments with LESS parsers, so there's a chance that native support might be added to the product in a near future.

 Miguel



I also miss so much a way to better organize CSS. I think this has been overlooked for quite some time in Service Studio. A preprocessor would be great, as would having CSS variables (self-promotion alert).

But you can start using SCSS right now. I am experimenting with a workflow that includes SCSS in my OutSystems development. Here's what I do.

For each theme that I work, I create a copy of it, with a "Sass" suffix. Here's an example:

I make the Sass theme non-public, and use it as the source for the other theme. I never edit the PortalLayout theme. I use an external editor to change the Sass code (currently SassMeister), generate the resulting CSS, then when I'm done I copy it to the PortalLayout theme.


It's not the best solution, but the advantages outweigh the cost. And if more people start using this, it puts more pressure into OutSystems addressing this.

I use a very similar approach but I automate the processo further :)


I generally build my css/sass in a public dropbox, or a server I own, and import the generated css form there.

I can then refresh and edit code in my browser at will and paste back to the editor.

This reduces changes in service studio by a lot, which also results in a lot less published versions.


What I would love to see in outsystem would be a better way to work with preprocessors and variables, well integrated with studio, while also helping with building and documenting more robust components.


Notice that to use dropbox there is a bit of a trick on building the link, as for a server, there are no issues with that.