I am trying to make a web page, and I need to use some images with transform/transition. But the Scss compiler from WebStorm gives me that error.
What can I do ? See in the image above.
For your #include you need to #mixin.
#MIXIN example:
#mixin protoName($someValue) {
-webkit-protoName: $someValue;
-moz-protoName: $someValue;
-ms-protoName: $someValue;
protoName: $someValue;
}
For yours code it can be something like this:
#mixin transform($val) {
-webkit-transform: $val;
-moz-transform: $val;
-ms-transform: $val;
transform: $val;
}
main {
.wrap {
#include transform(rotate(45deg) translate3d(0,0,0));
}
}
And your output look like this:
main .wrap {
-webkit-transform: rotate(45deg) translate3d(0,0,0);
-moz-transform: rotate(45deg) translate3d(0,0,0);
-ms-transform: rotate(45deg) translate3d(0,0,0);
transform: rotate(45deg) translate3d(0,0,0);
}
You can read more about it Here
Related
I am trying to convert from CSS to SASS and having trouble making a vendor prefix mixin for the transform property only. Any help or pointers is appreciated as I can't see where I am going wrong and I have tried Googling around with no luck.
Issue - Once SASS has processed it is stripping out the vendor prefix where it only includes the transform property.
Bellow is the sample output I am trying to achieve -
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
-ms-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
Mixin -
#mixin transform-prefix($values...) {
#each $vendor in ('-webkit-', '-ms-', '') {
#{$vendor}transform: #{$values};
}
}
&.active .line1 {
#include transform-prefix(rotate(-45deg), translate(-9px, 6px));
}
Output -
.slide-nav-button.active .line1 {
transform: rotate(-45deg), translate(-9px, 6px);
}
I have also tried this mixin but it strips out the prefix -
#mixin transform-prefix($values...) {
-webkit-transform: $values;
-ms-transform: $values;
transform: $values;
}
I know I'm late to respond.
but I'm going to fix this by only moving transform: into the first line of mixin
look like this
#mixin myBox($rot) {
transform: $rot;
-webkit-transform: $rot;
-ms-transform: $rot;
}
Compiled css
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
SCSS
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }
Why I got unexpected result filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
Can anyone please point out what mistake in this scss.
As I had mentioned earlier in comments, for this case we need to make use of interpolation like in the below code block to get the value of the $rotation variable printed. The syntax for interpolation is #{$var}. Interpolation is required because the variable's value needs to be placed within another string and then the whole thing needs to be assigned as the value to a property.
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }
I have the following scss file in my project
&.care-loading-icon{
.glyphicon-refresh-animate {
#include care-loading-animation
}
#keyframes spin {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
#-webkit-keyframes spinw {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spinm {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
}
I'm wondering if there is any way to simplify this with bourbon?
Looks like, from the documentation that you can use the mixin keyframes to simplify your keyframes implementation.
Like such
#include keyframes(spin) {
from { #include transform(0deg); }
to { #include transform(360deg); }
}
I have this little snippet of css which i want to use transform and then add rotate into it but getting a failure... am i doing this wrong? Im new to LESS so sorry if im going about this wrong.
CSS:
.class {
&::before {
.transform(.rotate(#deg: 45deg));
}
&::after {
.transform(.rotate(#deg: -45deg));
}
}
MIXIN:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
}
.rotate (#deg) {
-webkit-transform: rotate(#deg);
-moz-transform: rotate(#deg);
-ms-transform: rotate(#deg);
-o-transform: rotate(#deg);
}
So the way you have things set up above, you're basically passing the entire rotate mixin into the transform mixin. Which, if it actually knew how to parse, would end up with pretty garbled code. Instead, you can just use the top mixin and pass rotate into it. This is a better route, because it would allow you to use multiple transforms (which is a pretty common usage). Here's an example:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
}
.class {
&::before {
.transform(rotate(45deg));
}
}
And if you wanted to call rotate and translate at a future time, it would be as easy as adding translate, as well.
.class {
&::before {
.transform(translateY(-50%) rotate(45deg));
}
}
I have the following CSS:
.progress-bar {
transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
}
...and would like to refactor this with the Compass Transform mixin.
There are no examples in the documentation, so I tried this as a shot in the dark:
.progress-bar {
#include transform (0deg, 1, -50deg, 2px);
}
...and get this error:
Syntax error: Mixin transform takes 2 arguments but 4 were passed.
Is there a way to do this with Compass Transform?
You have to specify what transforms to use, separated by spaces. eg:
#include transform(rotate(-135deg) skew(-10deg, -10deg));
I believe it should be space separated list of transforms rather than comma-separated.
.progress-bar {
#include transform (rotate(0deg) scale(1) skew(-50deg) translate(2px));
}