How I properly use bootstrap mixin for box-shadow and transition?

Question

I am trying to use boostrap mixin for box-shadow and transition as below in my less file:

.service-box {
  .box-shadow(3px 3px 1px rgba(195, 195, 195, 0.4));
  .transition(0.4s);
}

Lets look at its compiled css:

.service-box {
  -webkit-box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  box-shadow: 3px 3px 1px rgba(195, 195, 195, 0.4);
  -webkit-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: '' 3px 3px 1px rgba(195, 195, 195, 0.4) 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

You can see above mixin not compiling properly, isn't it?

Can anybody tell what the reason for this? Thank you.

You should not use these mixins at all. It's a legacy leftover from times when no things like Autoprefixer exist. So what you really need is to write standard CSS `box-shadow` and `transition` and autovendorizing tools should do the rest. Note that Bootstrap itself [is built](https://github.com/twbs/bootstrap/blob/v3.3.7/Gruntfile.js#L180) with an autoprefixer so any vendorizing mixins used there are really nothing but useless deprecated leftover code from previous versions. — seven-phases-max, Jun 21 '18 at 08:47
@user3733831 "Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's supported browsers that have box shadow capabilities now support it." — IiroP, Jun 21 '18 at 09:10
Either way if it's `v3.3.7` where `.box-shadow` is as simple as [this](https://github.com/twbs/bootstrap/blob/v3.3.7/less/mixins/vendor-prefixes.less#L68) the CSS you get is indeed weird and looks like it's a result of some bad/wrong misconfig/tool in your build tool chain (i.e. it's not even the result of Less to CSS *compilation* but most likely something *after* that). — seven-phases-max, Jun 21 '18 at 10:01
Btw., another guess - check if there's *another* (not Bootstrap) `..box-shadow` mixin somewhere within your code (e.g. you did not throw in some other crappy "vendorising library" having its own mixins like that). Mixins in Less cascade so what you get may be a result of ... — seven-phases-max, Jun 21 '18 at 12:17
... something like [this](http://lesscss.org/less-preview/#%7B%22less%22%3A%22.service-box%20%7B%5Cn%20%20.box-shadow(1%202%203%20red)%3B%5Cn%7D%5Cn%5Cn%2F%2F%20Bootstrap%20mixins%3A%5Cn.box-shadow(%40v)%20%7B%5Cn%20%20-webkit-box-shadow%3A%20%40v%3B%5Cn%20%20%20%20%20%20%20%20%20%20box-shadow%3A%20%40v%3B%5Cn%7D%5Cn%5Cn%2F%2F%20Some%20other%20weird%20lib%5Cn.box-shadow(%40v)%20%7B%5Cn%20%20%20bla-bla-bla%3A%20''%20%40v%20blu-blu%20green%3B%5Cn%7D%22%7D). — seven-phases-max, Jun 21 '18 at 12:17
@seven-phases-max, yes your guess is true. I had an another (not Bootstrap) mixing within my code. Thanks for pointed out. — user3733831, Jun 21 '18 at 12:50

atazmin · Answer 1 · 2020-12-20T02:14:07.683

0

Here is what worked for me for Bootstrap v5

@include transition(bottom .5s cubic-bezier(0, 1, 0, 1), background-color .25s ease-in);

edited Dec 20 '20 at 02:14

answered Dec 20 '20 at 02:08

atazmin

4,757
1
32
23

How I properly use bootstrap mixin for box-shadow and transition?

1 Answers1