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

/wp-content/uploads/2013/11/1_326917.jpg

3. Click on “Import”

/wp-content/uploads/2013/11/2_326918.jpg

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:

/wp-content/uploads/2013/11/4_326919.jpg

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

/wp-content/uploads/2013/11/5_326920.jpg

Please contact me for any related issue.

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

Inbal Sabag



To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Daniel Ruiz

    Hi Inbal,

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

    🙂

    D.

    (0) 
  2. Suseelan Hari

    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 🙂

    Regards,

    Hari Suseelan

    (0) 

Leave a Reply