Compile LESS to CSS

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

To write more manageable and complex CSS code, in AppBuilder, you can use one or more LESS files and compile them to a style sheet. When you modify the contents of a LESS file, AppBuilder can automatically recompile the associated LESS files in the import chain and their corresponding CSS files.

Prerequisites

  • Verify that you have added a LESS file in your app.

Procedure

In-Browser

  1. Log in the Telerik Platform and open the code for your app.
  2. In the Project Navigator, right-click the LESS file that you want to compile.
    You can compile only one LESS file at a time.
  3. Select Compile to CSS.
    If you have not compiled the LESS file before, the in-browser client creates a corresponding CSS file and nests it under the LESS file.
    If you have compiled the LESS file before, the in-browser client recompiles the existing corresponding CSS file.
  4. If needed, add a <link> reference for the CSS file in your HTML code.

Universal

  1. Run the universal desktop client, log in the Telerik Platform and open the code for your app.
  2. In the Project Navigator, right-click the LESS file that you want to compile.
    You can compile only one LESS file at a time.
  3. Select Compile to CSS.
    If you have not compiled the LESS file before, the universal desktop client creates a corresponding CSS file and nests it under the LESS file.
    If you have compiled the LESS file before, the universal desktop client recompiles the existing corresponding CSS file.
  4. If needed, add a <link> reference for the CSS file in your HTML code.

Windows

  1. Run the classic Windows desktop client, log in the Telerik Platform and open the code for your app.
  2. In the Project Navigator, select and right-click the LESS files that you want to compile.
    You can compile multiple LESS files at a time.
  3. Select Compile to CSS.
    If you have not compiled the LESS file before, the classic Windows desktop client creates a corresponding CSS file and nests it under the LESS file.
    If you have compiled the LESS file before, the classic Windows desktop client recompiles the existing corresponding CSS file.
  4. If needed, add a <link> reference for the CSS file in your HTML code.

Visual Studio

To develop style sheets with LESS in this version of the extension for Visual Studio, you can install your preferred extension with LESS support from the Microsoft Visual Studio Gallery.

CLI

To develop style sheets with LESS, apply the approach or tool available for your current IDE.

Next Steps

Continue development.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.