Ocean Ocean - 1 month ago 14
Less Question

How to refer the LESS file in asp.net webforms?

I am working on an asp.net webforms C# project. I have created a LESS file and compiled. When I used it in my aspx file head section as part of a CSS, the class in the LESS file is not recognized. I see "Missing property name before the colon (:) in the "(Property) : (Value)" declaration" message.

My LESS file, TreeviewStyle.less:

split-into-two{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 50px;
column-gap: 50px;
-moz-column-gap: 50px;
}

body {
}


My aspx file

<head runat="server">
<title></title>

<link href="TreeviewStyle.css" rel="stylesheet" />
<style type="text/css">

div > ul {
.split-into-two;
}
</style>
</head>

Answer

EDIT: After OP's comment, here is my answer:

div > ul {
    .split-into-two;
}

This syntax is invalid. I think you tried to set the .split-into-two class to every ul element nested in div, but you can't do that via css. You either have to apply the class manually to every ul in your template, use jQuery (or something) similiar to do that from JavaScript code, or modify your less file to get this result:

div > ul, .split-into-two{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 50px;
    column-gap: 50px;
    -moz-column-gap: 50px;
}

Keeping the old part for the sake of consistency:

You can't refer to the .less file directly.

First, you have to compile it using the lessc command line tool:

$ lessc TreeviewStyle.less TreeviewStyle.css

Then, you change your .apsx file to include the compiled css file:

<link href="TreeviewStyle.css" rel="stylesheet" />

Here is the source. Please, do a more thorough research next time.