Skip to Content (Press Enter)
2022-10-31 07-43-52
Rahul Tiwari
61Views
6Comments
Solved
How to write nested classes in css?
Question
Reactive
CSS
Application Type
Reactive
Service Studio Version
11.54.23 (Build 62741)

I want to apply specific CSS classes based on parent class for the responsive behavior of my web block.

I get an error when I try to write nested CSS classes.

How can I do it in Outsystems?


See the below image for nested class samples.

0
0
26 Jan 2024
Copy Link
2024-01-20 14-53-12
Ahmed Essawy
Solution

I do not think Outsystems supports nested CSS selectors like &. also, the whole OutsystemsUI CSS is written without any kind of selector.

you may load external CSS file with your own syntax but it is not recommended, kindly check this post : https://www.outsystems.com/forums/discussion/49067/using-local-css-file/




2
0
26 Jan 2024
Copy Link
2022-10-31 07-43-52
Rahul Tiwari

I have marked it as a solution as it states clearly that nested CSS classes are not allowed in Outsystems as of now.
It doesn't solve my problem but it should be enough for other developers to understand the current limitation of Outsystems

0
0
28 Jan 2024
Copy Link
2022-03-29 14-13-57
Hassan Shaddad

apply specific CSS classes based on a parent class for responsive behavior, you can do the following:

  1. Without Preprocessors: If you are not using a preprocessor, you will need to manually write out the full selector for each nested style. In your case, you should separate each nested class into its own selector. Here is an example based on your screenshot:





0
0
26 Jan 2024
Copy Link
2022-10-31 07-43-52
Rahul Tiwari

Currently, I do like this only but it's not very clean or structured.
Anyways looks like Outsystems does not support nested CSS classes as of now. Its a pity but I hope they allow it in the future.

0
0
28 Jan 2024
Copy Link
2023-02-19 05-11-08
Faais

Hi Rahul Tiwari,

Nesting style CSS is supported in OutSystems. It's showing just a warning/error symbol in the stylesheet, but I am able to publish, and it was working fine. You can check the images below. 






0
0
05 Apr 2024
Copy Link
2024-04-05 03-05-03
Kharlo Ridado

Service Studio Theme might not support this feature since it's just a recent publication for CSS. Though since December 2023, this feature has worked across the latest devices and major browser versions. 

I suggest using it with caution if you're planning to support older browsers or devices. Find more information here

Regards,

Kharlo

0
0
06 Apr 2024
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.