Skip to Content
Author's profile photo Inbal Sabag

Using LESS in HANA Cloud Portal


Recently, I got questions about the way to use LESS as part of HANA Cloud Portal:

What is this all about?

This month, HANA Cloud Portal moved from styling using CSS to leaner styling using LESS. When you design your site, you define only the values for predefined set of LESS parameters, for example – site font color, site background image and others. To keep version compatibility, we keep support CSS formatting, but this isn’t the best practice anymore and might be deprecated in the future. 

What is LESS?

LESS (Leaner CSS) is a dynamic stylesheet language. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax. LESS is open source. The indented syntax of LESS is a nested metalanguage. as valid CSS is valid LESS code with the same semantics. LESS provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between LESS and other CSS pre-compilers being that LESS allows real-time compilation via LESS.js by the browser. LESS can run on the client-side and server-side,or can be compiled into plain CSS.

The compilation is done as part of HANA Cloud Portal code, means – you upload single LESS file and behind the scene we compile it into CSS format.

How you should design you site starting today?

Full documentation is here –

  1. Select the Cloud Portal Theme entry in the Themes table.
  2. Click Download. The File Download dialog box opens.
  3. Save the LESS file in your file system. –> see below the recommended why to edit it. 
  4. After modifying the LESS file as needed, click Add Theme. The Add Theme dialog box opens.
  5. Browse to the new LESS file to upload it.
  6. Click Add.

How to enable syntax highlighting for LESS in Notepad++?

Once you saved the <filename>.LESS file in your desktop, you can open it with Notepad++.

However, I guess that you’d like to see the parameters highlighted (just like you got used to do with CSS).

So this is how you do that –

1. Download the attached LESS.XML file

2. Open Notepad++ > language menu > define your language


3. Click on “Import”


4. Browse for the XML file that you have downloaded in step 1.

5. Restart the notpad++ and open any LESS file

6. Now, go to languages > and select the last entry:


Now, you can easily edit your LESS file, since everything is highlighted. 


Please contact me for any related issue.

Now – design beautiful sites on top of HANA Cloud Portal 🙂

Inbal Sabag

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Ruiz
      Daniel Ruiz

      Hi Inbal,

      Nice content there. Documentation hyperlink is not working thou, would you mind adding an URL that can be resolved externally?



      Author's profile photo Inbal Sabag
      Inbal Sabag
      Blog Post Author
      Author's profile photo Eliel Schurman
      Eliel Schurman

      Great blog 🙂

      Author's profile photo Yaron Ganor
      Yaron Ganor

      Nice job.

      Author's profile photo Former Member
      Former Member

      Hi Inbal,

      Thanks for sharing good information. Very interesting and good info.

      Keep sharing new and different information.

      Keep up the good work! 😎

      Advanced wishes for New Year 2014 🙂


      Hari Suseelan

      Author's profile photo Inbal Sabag
      Inbal Sabag
      Blog Post Author

      Thanks Hari 🙂

      Additional blogs will be posted very soon...

      Author's profile photo Shreyas Pandya
      Shreyas Pandya

      Wow, very interesting blog..! Thank you for sharing Inbal.


      Shreyas Pandya