Integrating LESS or SASS

Integrating LESS or SASS

  

Hello community,


Is it possible to integrate a CSS pre-processor like LESS or SASS in Outsystems? I'm developing a web app which will be used in Internet Explorer and i'm using CSS variables. So i though integrating these pre-processors, i could solve my problem.


Any thoughts?


Best regards,

Rafael Valente 

Jogait wrote:

Please take a look at https://www.outsystems.com/forums/discussion/7904/re-less-and-sass/


Hello Jogait,


I already had seen that post but i didn't read anything that i could use. In other words, there wasn't enough info on how to integrate a pre-processor with Outsystems.

Hi Rafael.

I don't think it's currently possible to tightly integrate CSS preprocessors with OutSystems. That post is a good reference, and describes how to loosely integrate, which is all you can do right now.

Leonardo Fernandes wrote:

Hi Rafael.

I don't think it's currently possible to tightly integrate CSS preprocessors with OutSystems. That post is a good reference, and describes how to loosely integrate, which is all you can do right now.


Hello Leonardo,


I read your response in the other post, but i'm having a hard time understanding how you integrate the SCSS in the Outsystems environment. My only problem is with Internet Explorer that doesn't interpret CSS variables. Maybe, i don't even have to use pre-processors and there is a workaround for this in another way. Unfortunately, for what i researched, i really need to implement a pre-processor but i would like to have a step by step way to do it, kinda like "Using pre-processors in Outsystems for dummies" thing.

do people still use IE?

Edge is capable of basic css-variables, so that should not be a problem.


but I am afraid you have to do that manually and then simply copy/paste it in the stylesheet.



J. wrote:

do people still use IE?

Edge is capable of basic css-variables, so that should not be a problem.


but I am afraid you have to do that manually and then simply copy/paste it in the stylesheet.




Hello J,


Ok, some context may be needed:

The web app i'm developing shows colors by user considering their color preference. Therefore, i need to use those CSS variables. Also, this web app will be used by the population. I don't control if people still use Internet Explorer but i must prepare my app for that. 

If that's your scenario, you can control the look-and-fell of your app with root classes and descendant selectors. Here's how it works.


Let's say you style your app according to their football team: sporting users get green buttons and links, benfica users get red buttons. Then you could simply use two classes: sporting-user and benfica-user. You place one of these classes (depending on the type of user) on the <html> or <body> tag - or any other element that encloses your entire layout. In OutSystems, this can be easily done by adding a container around your layout block and using the class extended property to programmatically select the appropriate class.

Then all you need is to overload your stylesheets with the different styles depending on the root class:

.sporting-user a, .sporting-user .Button { background-color: green; }
.benfica-user a, .benfica-user .Button { background-color: red; }

Leonardo Fernandes wrote:

If that's your scenario, you can control the look-and-fell of your app with root classes and descendant selectors. Here's how it works.


Let's say you style your app according to their football team: sporting users get green buttons and links, benfica users get red buttons. Then you could simply use two classes: sporting-user and benfica-user. You place one of these classes (depending on the type of user) on the <html> or <body> tag - or any other element that encloses your entire layout. In OutSystems, this can be easily done by adding a container around your layout block and using the class extended property to programmatically select the appropriate class.

Then all you need is to overload your stylesheets with the different styles depending on the root class:

.sporting-user a, .sporting-user .Button { background-color: green; }
.benfica-user a, .benfica-user .Button { background-color: red; }


Hello Leonardo,


That's a good solution but i have a bigger problem. I don't know which colors the user will choose since these colors will be chosen at runtime. With that said, i can't say which colors i will need, understand? This is the reason why i'm using CSS variables. I have a set of 4 colors that can be customized according to user preferences. When the user chooses these colors, the app must respond immediately to the changes.

In that case, you won't be getting support for Internet Explorer.

If the custom stylesheet is not too big, you can try is to embed a <style> tag in the HTML using an unescaped expression, and compute the style definitions using whatever logic you want.

Leonardo Fernandes wrote:

In that case, you won't be getting support for Internet Explorer.

If the custom stylesheet is not too big, you can try is to embed a <style> tag in the HTML using an unescaped expression, and compute the style definitions using whatever logic you want.


Let me see if i understood, i need to put an expression in every single screen i have with that <style> tag to assign the value of the colors that the user choose?

Yes. Of course, you would do that inside the layout blocks that you use in your theme, so that you wouldn't need to repeat it on every page.

I see. In order to do that, i must insert the <style> tag in the <head> of the html, right? If i just put an expression in the screen, the <style> tag will be applied  to the <body> and it will not have the desired effect. With that said, how can i add the <style> tag to the <head> tag?

Style tags in the body do work in every browser, although they are not allowed by spec. The only downside of including it in the body is that, if you include it after the content, you could have the content being rendered before the styles are applied. But that is not a problem if you include the styles at the top of the body.


If you really want the style tag to be appended to the head element, there are some actions in the extension HTTPRequestHandler that allow you to do that. I remember that there is an action to add a <link> tag, probably there's another one to add a <style> tag but I cannot remember right now.