How to override vendor-prefixes.less

Question

User-944633366 posted

There appears in VS 2017 to be a file created on build called "vendor-prefixes.less" Inside http://localhost/project/Content/less/mixins/

My problem: I'm trying to simply change the width of a modal-dialog from standard 600px to 900px but it keeps getting overridden by this  "phantom" file.

Does anyone know how to fix it? Thanks.

Joe

Answer 1

User347430248 posted

Hi jbassett,

it is possible that you are changing the width at wrong place and because of that reason you think that it is not working.

I suggest you to use inspect element of browser and check for width of your model dialog.

also try to make changes from there and check whether it is working or not.

other then that , currently we don't know that what project structure you have. how make changes and which "phantom file" you are talking about.

so try to provide a detailed information, we will try to provide you further suggestions to solve your issue.

Regards

Deepak

Answer 2

User-944633366 posted

Deepak,

Thanks. Yes if I use the Chrome browser I see in inspect it shows the place where the width of the modal-dialog is set to "600px." (here: http://i68.tinypic.com/2d7wjue.png).

I have no idea what this "vendor-prefixes.less" file is, and this project was just a standard project in VS 2017. There is bootstrap involved and jquery but nothing crazy.

It appears this place (in the image) is where the modal-dialog is being set.

Maybe I'm doing something wrong? Thanks for the help.

Joe

Answer 3

User-944633366 posted

Ok I fixed it but I don't understand Why.

Fix: 

1.) Put NOT a .css link but actual CSS code at the bottom of the Masterpage (not the ascx or the index.aspx, but the main masterpage).

2.) The CSS text would be:

<style type="text/css">

.modal-dialog {
width: 900px;
}
</style>
</body>

</html>

3.) IF I just linked to the css file like this: 

<link href="/assets/css/style.css" rel="stylesheet" />

AT the same place in the masterpage it won't work, I need the actual CSS code.

Maybe it's me, and it might be, but I've been "programming" as they call it for over 35 years on every platform. CSS is the biggest piece of crap "theory wise" to the layman (meaning I haven't studied it but it just seems sloppy) I've ever seen. I would argue it's set humans back in time similar, although not as severely as our sole-adoption of the web browser in 1992 as the mechanism we would use to communicate instead of just using "applications with IP stacks" which already existed (that was 20 years lost humanity). 

Answer 4

User163386893 posted

Hi,

The recommendation is to stop rely on this technique and consider using a dedicated prefixing tool (e.g. Autoprefixer, -prefix-free etc.). Hardcoding vendor prefixes via CSS pre-processor mixins (Less, SCSS or whatever) is a pure anti-pattern these days and considered harmful. Auto-prefixing tools will make your code clean, readable, future-proof and easily maintainable/customizable.

See for example: less-plugin-autoprefix
Original answer:

Well, currently LESS does not support "property name interpolation" so you cannot use a variable in property names. There's a hack however: How to pass a property name as an argument to a mixin in less So if you don't mind "dummy" properties in the output CSS, here we go:

.property_(@property, @value) {
    _: ~"; @{property}:" @value;
}

.vendor(@property, @value) {
    .property_('-webkit-@{property}', @value);
    .property_( '-khtml-@{property}', @value);
    .property_(   '-moz-@{property}', @value);
    .property_(          @property,   @value);
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}

Output:

#usage {
  _: ; -webkit-border-radius: 3px;
  _: ; -khtml-border-radius: 3px;
  _: ; -moz-border-radius: 3px;
  _: ; border-radius: 3px;
  _: ; -webkit-box-shadow: 10px 10px;
  _: ; -khtml-box-shadow: 10px 10px;
  _: ; -moz-box-shadow: 10px 10px;
  _: ; box-shadow: 10px 10px;
}

Update:

Less v1.6.0 introduced Property Interpolation feature so now you don't need any hacks anymore:

.vendor(@property, @value) {
    -webkit-@{property}: @value;
     -khtml-@{property}: @value;
       -moz-@{property}: @value;
            @{property}: @value;
}

#usage {
    .vendor(border-radius, 3px);
    .vendor(box-shadow, 10px 10px);
}