Doubt how to use a Less class with RAZOR

Asked

Viewed 96 times

5

I’m doing some research to implement a feature to make life easier when it comes to programming.

It is possible to do this?

We are using VS2013 with Razor.

I have the following class Less:

.minColuna(@a) {
    -webkit-min-width: @a;
    -moz-min-width: @a;
    -ms-min-width: @a;
    -o-min-width: @a;
    min-width:  @a;
}

And I can’t call the method that:

inserir a descrição da imagem aqui

Razor makes sure he can’t identify @a as a variable and because of that, Ben. I already tried doing this by JS putting the class on the table but gave the same problem... And I’ve tried using it:

class="minColuna(@Html.Raw("@a"): 300px)"

But he doesn’t get the style :/

It is possible to circumvent this bug?

Or even there is something inside Jquery / JS / LESS / HTML that can do something like this for me?

css css3 less
  • 1

    If you’re going to parameterize tag by tag, why don’t you use style ? <th style="min-width:300px;"

  • because I’m not going to do this, I’ve simplified as much as possible for example. I’m going to use this in a datatable on JS

  • But is that really possible? To the best of my knowledge Less has to be compiled for css to work, even using less.js it will work with linked files or tags style included in html with type="text\less", but I’ve never heard that I could use direct in an attribute class, mainly because what you are trying to use is not even a class, he is a parameterized mixin

  • I don’t know if it’s possible to do, so I came to ask here

3 answers

2

Look at it this way. Creates a class that calls its function with the param value.

.tamanhoColuna(@x){
    min-width: @x;
}

.chamaFuncao {
  .tamanhoColuna(10px);
}

<p class="chamaFuncao"> Teste :D </p>

Heed

You will not be able to pass the value in real time, unless you LESS in real time.

  • 1

    the point is that I want to be able to send the value at the time I place the class, because here in the company we can’t keep fiddling with the CSS of the system

  • 2

    Less needs to be compiled in CSS. You will have to compile Runtime, then. Or change company. Why do guys ask to change the site, but do not let you touch the code... CRAP HUH!

1

Try the following:

.tamanhoColuna(@x){
    min-width: @x;
}

<p class="tamanhoColuna(@x: 200px)"> Teste :D </p>

  • partner thanks for the help, but it didn’t work. I edited the topic, you can look there?

0

This functionality already exists in HTML, it is well known as CSS inline.

Example:

th {background-color:#444; color:#FFF;}
<table>
  <tr>
    <th style="min-width:80px;">Col 1</th>
    <th style="min-width:160px;">Col 2</th>
    <th style="min-width:320px;">Col 3</th>
    <th style="min-width:640px;">Col 4</th>
  </tr>
</table>

Note: What you are trying to do is not even trying to reinvent the wheel, but the stone. Avoid that kind of thing, but if there’s no way, here’s a example of manual work.

Browser other questions tagged css css3 less

You are not signed in. Login or sign up in order to post.