Sass/SCSS — Useful Mixins for faster development

Just an image!
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
@mixin transition($transition) {
-moz-transition: $transition;
-o-transition: $transition;
-ms-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition2var($transition1,$transition2) {
-moz-transition: $transition1, $transition2;
-o-transition: $transition1, $transition2;
-ms-transition: $transition1, $transition2;
-webkit-transition: $transition1, $transition2;
transition: $transition1, $transition2;
}
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin fonts($fsize: false, $fcolor: false, $fweight: false,  $flheight: false) {
@if $fsize { font-size: $fsize; }
@if $fcolor { color: $fcolor; }
@if $fweight { font-weight: $fweight; }
@if $flheight { line-height: $flheight; }
}
@include transform(translateX(0));//another one below@include transition(all 0.4s ease);

--

--

--

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jokova

Jokova

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

More from Medium

CSS variables are the secret sauce in your React function components 🌶️

HTML: And Why It’s a Must Use.

Adaptive responsive tables using react-table library

Talking about the useState hook