This question already has an answer here:
Scss compiler error: no mixin named transition
(1 answer)
Closed 4 years ago.
I'm compiling Woocommerce's Storefront theme using Gulp and Sass and came across an error with one of the mixins:
Error in plugin "sass"
Message:
storefront/assets/css/woocommerce/woocommerce.scss
Error: no mixin named transition
on line 2831 of storefront/assets/css/woocommerce/woocommerce.scss, in mixin #content
from line 52 of node_modules/susy/sass/susy/language/susy/_breakpoint-plugin.scss, in mixin susy-media
from line 1881 of storefront/assets/css/woocommerce/woocommerce.scss
#include transition( left 0.3s ease-out );
Any ideas?
PS. There were some other problems with the Susy but downgrading to the susy-2.2.14 solve them.
EDIT: Solved by adding:
#mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
Either there is no mixin transition, it is not included\deleted or apply this answer.
#include expects a mixin. In this case it is expecting a mixin named
'transition' and I think you are trying to apply 'transition' as a css
property.
Check this page out: http://sass-lang.com/guide
Related
Is there an easy way to add transition: 1s all to all the classes in my CSS file without having to add it to each one manually?
I was hoping i could just add it to the body and that would affect everything but it doesnt.
Thank you
Use the following syntax to apply css to all elements
* {
transition: 1s all
}
SO, here my first mixin
.3transitions (#value1,#value2,#value3,#duration){
#value: ~"#{value1},#{value2},#{value3}";
.transition-property(#value);
.transition-delay(0);
.transition-duration(#duration);
.transition-timing-function(ease);
}
and here is the second (among many others)
.transition-property(#transition-property) {
-webkit-transition-property: #transition-property;
transition-property: #transition-property;
}
On webkit browsers I should get the compiled CSS with proper browser prefix, but I get
-webkit-transition-property: margin-top,opacity,transform;
instead of
-webkit-transition-property: margin-top,opacity,-webkit-transform;
How can I go around this please? Is there a way to determin in LESS that I am using a CSS3 style?
Since Less v2, it become easy to use plugins. The autoprefix plugin post-processed your Less code by autoprefixer.
You can install the autoprefix plugin by running the following command in the console:
npm install -g less-plugin-autoprefix
After installing the plugin you should be able to run for in stance the following command:
echo "element{ transition-property: margin-top,opacity, transform; }" | lessc - --autoprefix="last 20 versions"
The preceding command will compile into CSS code as follows:
element {
-webkit-transition-property: margin-top, opacity, -webkit-transform;
-moz-transition-property: margin-top, opacity, -moz-transform;
-o-transition-property: margin-top, opacity, -o-transform;
transition-property: margin-top, opacity, transform;
}
You can not use this autoprefix plugin when compiling your Less code client side in the browser. For client side in browser compiling you can consider to use -prefixfree This Javascript library add browser’s prefix to any CSS code leveraging Javascript.
When you can not run the autoprefix which requires Node installed, for instance those who compile Less with one of the alternative compilers, you should fall-back to prefix mixins such as that found here written by #seven-phases-max. Better you should not reinvent the wheel and try one of the mixin libraries that already fix the prefix problems for you.
I've started using LESS for CSS lately and was wondering if my method is the correct way to target multiple vendor prefixes by creating my own LESS "mixin" (I think)?
.transition (#transition: 1s) {
transition: #transition;
-webkit-transition: #transition;
-moz-transition: #transition;
}
So if I were for example to have a .btn class and call .transition (which works)
.btn:hover {
color: red;
.transition(#transition: 1s ease-in);
}
And for animations.
#animate-fadein: fadeIn 1.7s linear;
.animation (#animation: fadeIn .2s linear) {
animation: #animation;
-webkit-animation: #animation;
-moz-animation: #animation;
-o-animation: #animation;
}
.btn
.btn {
#animation(#animation: fadeIn .2s linear);
}
This method works by the way. I'm just curious. Is my method over-complicating things and or am I just reinventing the wheel?
Well, using mixins help you to code more DRY (Don't repeat yourself), so that's good and the main reason why you should use Less.
When your requirements change ( different browser to support) you will only have to change your mixins (which you can share over your projects too).
Notice that there are many mixin libraries to find on the web which have already create these prefix mixins for you. See: http://lesscss.org/usage/#frameworks-using-less-mixin-libraries
As already mentioned by #seven-phases-max, nowadays most people use autoprefix postprocessors to prefix their mixins. Also Bootstrap have integrate the autoprefixer into their Grunt build process in favor of the prefix mixins (since version 3.2). The only disadvantage of the most popular autoprefix postprocessor (https://github.com/postcss/autoprefixer) will be that it require Node.js installed and can not be used with some alternative compilers.
Since version 2 of Less its easy to use plugins. Less provide you an autoprefix plugin too. This plugin can be installed by running npm install -g less-plugin-autoprefix. After installing you can run for instance lessc --autoprefix="last 2 versions" main.less.
The Less autoprefix plugin an not use when compiling your Less code client side with the less.js compiler. -prefixfree seem to be a reasonable alternative when compiling Client side.
Last note about your vendor prefixes in some situations a [Graceful degradation strategy] (https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way#Graceful_degradation) will be better than trying to support even the most old browser with newest technologies.
I'm creating a mixin that will allow me to do prefix free styles for transform: rotate(45deg). The problem is that I have no idea how to do it in proper Stylus syntax. Here's what I have so far:
transform-rotate()
-webkit-transform: rotate(arguments)
-moz-transform: rotate(arguments)
-o-transform: rotate(arguments)
-ms-transform: rotate(arguments)
transform: rotate(arguments)
And then I would like to call it in my .styl sheet using the following:
transform-rotate(45deg)
But when I do that, I get the following error:
Cannot call method 'map' of undefined
I think the problem is that Stylus is trying to treat the native CSS3 rotate() mixin as a custom mixin, and when it tries, it can't find the implementation of rotate(). I'm not entirely sure, but that's my initial thought.
How do I write this out so that it'll compile properly? Any ideas would be greatly appreciated. Thanks in advance.
You don't need parentheses with Stylus, problem solved !
transform-rotate
-webkit-transform rotate arguments
-moz-transform rotate arguments
-o-transform rotate arguments
-ms-transform rotate arguments
transform rotate arguments
And I'd advise you to use Nib, a stylus plug-in that handles browser prefixing : http://visionmedia.github.io/nib/
I am wanting to animate two properties in Bootstrap v2.1.0,
The opacity and the margin.
I have tried:
.transition(opacity 0.5s, margin 0.25s);: No output
.transition('opacity 0.5s, margin 0.25s');: Invalid CSS output
.transition(opacity 0.5s); .transition(margin 0.25s);: Margin overrides opacity.
Note that I am using lessphp so solutions that use the JavaScript regex will not work.
I know I could copy the mixin and modify it to accept two parameters as well, but that just seems hacky, surely there is a better way?
Two Options (Depending on version of LESS)
LESS (1.3.3+)
The less2css.org shows this works with LESS 1.3.2 on experimentation, but the issue documentation seems to indicate this is a 1.4 release addition.
Whenever it became effective, at some point, the semicolon was introduced as a possible variable separator in parametric mixins while still allowing commas. The presence of a ; causes commas to be viewed not as separating variables, but rather as part of the value of the variable itself (a comma separated list). This then allows (to quote the site) us to use a "dummy semicolon to create mixin call with one argument containing comma separated css list."
Therefore the following works to produce the same output as above without the escaped string (NOTE the "dummy" semicolon put at the end of the variable entry, right before the closing parenthesis of the parametric mixin call):
.transition(opacity 0.5s, margin 0.25s;);
|
semicolon here
LESS (pre 1.3.3, but also works in later versions)
Do a string interpolation (~) for the passed in variables:
.transition(~"opacity 0.5s, margin 0.25s");
Both solutions output:
-webkit-transition: opacity 0.5s, margin 0.25s;
-moz-transition: opacity 0.5s, margin 0.25s;
-o-transition: opacity 0.5s, margin 0.25s;
transition: opacity 0.5s, margin 0.25s;