Using LESS in HANA Cloud Portal

Hi,

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 – https://help.hana.ondemand.com/cloud_portal/frameset.htm?cf8a8f30977c4f8885144dc566015323.html

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