The parameter provided for 'container' is invalid.

Using LESS for CSS Development in MDriven Turnkey

LESS is a dynamic stylesheet language that enhances CSS with features like variables, mixins, and functions. It simplifies maintaining and scaling styles in MDriven Turnkey by allowing you to define constants and reusable styles. This guide will walk you through setting up and using LESS for CSS development in MDriven Turnkey.

Prerequisites

Ensure you have the following before starting:

• Visual Studio installed.
• A local MDriven Turnkey environment. Refer to Documentation:Turnkey local development tips for guidance.

Step 1: Install the Web Compiler Extension

The Web Compiler extension in Visual Studio compiles LESS files into CSS automatically.

1. Open Visual Studio and go to the Extensions menu.
2. Search for "Web Compiler" in the Visual Studio Marketplace.
3. Install the Web Compiler extension.

Step 2: Create and Edit LESS Files

With the Web Compiler installed, you can create and edit LESS files for your MDriven Turnkey application.

1. Open your MDriven Turnkey project in Visual Studio.
2. Navigate to the content directory where your stylesheets are stored.
3. Create a new LESS file, such as tkuser.less.
4. Define your styles using LESS syntax. For example, set a background color variable:

@background-color: #f0f0f0;
body {
  background: @background-color;
}

Step 3: Compile LESS to CSS

Compile your LESS file to CSS using the Web Compiler.

1. Right-click on your LESS file in the Solution Explorer.
2. Select "Web Compiler" and then "Compile file".
3. A corresponding CSS file will be generated automatically.

Step 4: Use Variables and Functions in LESS

LESS supports variables and functions, enhancing styling consistency.

1. Define variables for colors, fonts, or other reusable style properties.
2. Use functions to manipulate these variables, such as adjusting opacity or blending colors:

@primary-color: #3498db;
@secondary-color: lighten(@primary-color, 20%);

Step 5: Test and Refine Styles

Test your compiled styles in your local development environment.

1. Use the LocalTurnkeyPrototyper to run your application locally. See Documentation:Turnkey local development tips for setup details.
2. Refresh your application to view the updated styles.
3. Adjust your LESS files as needed and recompile to see changes immediately.

By incorporating LESS in MDriven Turnkey, you can create more maintainable and scalable stylesheets. This approach simplifies CSS management and enhances your ability to create consistent and dynamic themes across your application.

Source

Based on the MDriven video MDriven Turnkey | Fast CSS Dev.