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.

Any news on this?

I will tell you a story...

I started to learn Outsystems about 2 months ago. I was really happy to see how easy it is to build an app. Everything makes sense and is intuitive for who has/had back-end knowledge and for who is front-end developer even better, don't need to lose time building components/widgets because outsystems provide them.

I was happy until the moment I get to the tutorial to build the styles. It is kinda disappointing that in 2020 Outsystems is not supporting any kind of CSS preprocessors. It would be huge improvement.

Second, I noticed that we are limited to only three stylesheets files: the web block, theme (global) and page/screen (local). I am fine with the block and screen stylesheets but I think that we should have a chance to split the main theme stylesheet in smaller files for better organization. It is impossible to manage a huge file of css. I know that, I have been there back to 2012. Maybe there is a way to workaround this situation, but I am still a newbie in Outsystems :) At least they could add a find bar on the top of css editor to help find the classes we need to change. I know that we can do it through the main Service Studio Search but it is not so practical.

Third, the naming of classes. To follow the best practices of CSS we must follow only one convention, and the recommended one, at least what I support, is the one where we separate words by hyphens (hyphenated words). In Outsystems we can find classes like that, for example, "layout-top" or "menu-icon". But we also can find classes using the CamelCase technique, for example, "Menu_TopMenuActive" or "Form" (this happens more with Traditional Web App modules. With mobile apps I noticed that classes have better naming).

I hope that Outsystems is doing something about it right now. At least introducing preprocessors support.

Please :)

You can add extra style sheets, java script etc, but you cant then edit them in Outsystems. 


Add them as a resource, then add them to your page in the preparation using the AddStyleSheet action in HTTPRequestHandler or using @Import.


Celso Adrião Soares wrote:

I will tell you a story...

I started to learn Outsystems about 2 months ago. I was really happy to see how easy it is to build an app. Everything makes sense and is intuitive for who has/had back-end knowledge and for who is front-end developer even better, don't need to lose time building components/widgets because outsystems provide them.

I was happy until the moment I get to the tutorial to build the styles. It is kinda disappointing that in 2020 Outsystems is not supporting any kind of CSS preprocessors. It would be huge improvement.

Second, I noticed that we are limited to only three stylesheets files: the web block, theme (global) and page/screen (local). I am fine with the block and screen stylesheets but I think that we should have a chance to split the main theme stylesheet in smaller files for better organization. It is impossible to manage a huge file of css. I know that, I have been there back to 2012. Maybe there is a way to workaround this situation, but I am still a newbie in Outsystems :) At least they could add a find bar on the top of css editor to help find the classes we need to change. I know that we can do it through the main Service Studio Search but it is not so practical.

Third, the naming of classes. To follow the best practices of CSS we must follow only one convention, and the recommended one, at least what I support, is the one where we separate words by hyphens (hyphenated words). In Outsystems we can find classes like that, for example, "layout-top" or "menu-icon". But we also can find classes using the CamelCase technique, for example, "Menu_TopMenuActive" or "Form" (this happens more with Traditional Web App modules. With mobile apps I noticed that classes have better naming).

I hope that Outsystems is doing something about it right now. At least introducing preprocessors support.

Please :)