Can a sass #mixin accept an undefined number of arguments? - undefined

I'm trying to create a sass mixin for transitions. This is what I have so far.
#mixin transition($var)
-webkit-transition: $var
transition: $var
I want to be able to pass it multiple arguments like this
#include transition(color .5s linear, width .5s linear)
Unfortunately, I get the following error
Syntax error: Mixin transition takes 1 argument but 2 were passed.
Is there a way to do this so it produces the following output in css while still accepting an undefined number of arguments?
-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

Variable Arguments
Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list. These arguments look just like normal arguments, but are followed by .... For example:
#mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
#include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
is compiled to:
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
From : SASS official Documentation
So you basically just need to change your mixins declaration to look like this :
#mixin transition($var...)
-webkit-transition: $var
transition: $var

When you call the mixin, call it like this:
#include transition( (color .5s linear, width .5s linear) );
With the extra parens. This will key sass into the fact that you want this used as a single argument.
EDIT: See Jeremie Parker's answer above if using Sass 3.2 or later. Real Variable Arguments were added in 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

In case you want multiple arguments and vendor-prefixed, like the fallowing scenario:
#include transition(transform .5s linear, width .5s linear)
Expected
-webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear;
-moz-transition: -moz-transform 0.5s linear, width 0.5s linear;
-ms-transition: -ms-transform 0.5s linear, width 0.5s linear;
-o-transition: -o-transform 0.5s linear, width 0.5s linear;
transition: transform 0.5s linear, width 0.5s linear;
I suggest you this Mixin, I found on Meaningless Writing.
Code
#function prefix($property, $prefixes: (webkit moz o ms)) {
$vendor-prefixed-properties: transform background-clip background-size;
$result: ();
#each $prefix in $prefixes {
#if index($vendor-prefixed-properties, $property) {
$property: -#{$prefix}-#{$property}
}
$result: append($result, $property);
}
#return $result;
}
#function trans-prefix($transition, $prefix: moz) {
$prefixed: ();
#each $trans in $transition {
$prop-name: nth($trans, 1);
$vendor-prop-name: prefix($prop-name, $prefix);
$prop-vals: nth($trans, 2);
$prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
}
#return $prefixed;
}
#mixin transition($values...) {
$transitions: ();
#each $declaration in $values {
$prop: nth($declaration, 1);
$prop-opts: ();
$length: length($declaration);
#for $i from 2 through $length {
$prop-opts: append($prop-opts, nth($declaration, $i));
}
$trans: ($prop, $prop-opts);
$transitions: append($transitions, $trans, comma);
}
-webkit-transition: trans-prefix($transitions, webkit);
-moz-transition: trans-prefix($transitions, moz);
-o-transition: trans-prefix($transitions, o);
transition: $values;
}

Compass has a transition mixin that you could take a look at (or you could just use Compass). You can take a better look at it here: http://beta.compass-style.org/reference/compass/css3/transition/.
By the looks of it you can't do an undefined number of mixins as the maintainer of Compass also aids in maintaining Sass and you can see that he has defined a maximum number of 10 separate arguments for his transition mixin.

Related

CSS Hover transition not working on my website [duplicate]

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet:
.nav a
{
text-transform:uppercase;
text-decoration:none;
color:#d3d3d3;
line-height:1.5 em;
font-size:.8em;
display:block;
text-align:center;
text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15);
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: text-shadow .2s linear;
-moz-transition: text-shadow .2s linear;
-o-transition: text-shadow .2s linear;
transition: text-shadow .2s linear;
}
.nav a:hover
{
color:#F7931E;
text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15);
}
As you can see, the transition properties are overwriting eachother. As it stands, the text-shadow will animate, but not the color. How do I get them both to simultaneously animate? Thanks for any answers.
Transition properties are comma delimited in all browsers that support transitions:
.nav a {
transition: color .2s, text-shadow .2s;
}
ease is the default timing function, so you don't have to specify it. If you really want linear, you will need to specify it:
transition: color .2s linear, text-shadow .2s linear;
This starts to get repetitive, so if you're going to be using the same times and timing functions across multiple properties it's best to go ahead and use the various transition-* properties instead of the shorthand:
transition-property: color, text-shadow;
transition-duration: .2s;
transition-timing-function: linear;
EDIT: I'm torn on whether to delete this post. As a matter of understanding the CSS syntax, it's good that people know all exists, and it may at times be preferable to a million individual declarations, depending on the structure of your CSS. On the other hand, it may have a performance penalty, although I've yet to see any data supporting that hypothesis. For now, I'll leave it, but I want people to be aware it's a mixed bag.
Original post:
You can also simply significantly with:
.nav a {
transition: all .2s;
}
FWIW: all is implied if not specified, so transition: .2s; will get you to the same place.
If you make all the properties animated the same, you can set each separately which will allow you to not repeat the code.
transition: all 2s;
transition-property: color, text-shadow;
There is more about it here: CSS transition shorthand with multiple properties?
I would avoid using the property all (transition-property overwrites 'all'), since you could end up with unwanted behavior and unexpected performance hits.
Something like the following will allow for multiple transitions simultaneously:
-webkit-transition: color .2s linear, text-shadow .2s linear;
-moz-transition: color .2s linear, text-shadow .2s linear;
-o-transition: color .2s linear, text-shadow .2s linear;
transition: color .2s linear, text-shadow .2s linear;
Example: http://jsbin.com/omogaf/2
.nav a {
transition: color .2s, text-shadow .2s;
}
It's possible to make the multiple transitions set with different values for duration, delay and timing function. To split different transitions use ,
button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}
Reference: https://kolosek.com/css-transition/
Here's a LESS mixin for transitioning two properties at once:
.transition-two(#transition1, #transition1-duration, #transition2, #transition2-duration) {
-webkit-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
-moz-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
-o-transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
transition: #transition1 #transition1-duration, #transition2 #transition2-duration;
}
It's also possible to avoid specifying the properties altogether.
#box {
transition: 0.4s;
position: absolute;
border: 1px solid darkred;
bottom: 20px; left: 20px;
width: 200px; height: 200px;
opacity: 0;
}
#box.on {
opacity: 1;
height: 300px;
width: 500px;
}
In Sass you can achieve using below code
#mixin transition($transitions...) {
$unfoldedTransitions: ();
#each $transition in $transitions {
$unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
}
-webkit-transition: $unfoldedTransitions;
transition: $unfoldedTransitions;
}
#function unfoldTransition ($transition) {
// Default values
$property: all;
$duration: .2s;
$easing: null; // Browser default is ease, which is what we want
$delay: null; // Browser default is 0, which is what we want
$defaultProperties: ($property, $duration, $easing, $delay);
// Grab transition properties if they exist
$unfoldedTransition: ();
#for $i from 1 through length($defaultProperties) {
$p: null;
#if $i <= length($transition) {
$p: nth($transition, $i)
} #else {
$p: nth($defaultProperties, $i)
}
$unfoldedTransition: append($unfoldedTransition, $p);
}
#return $unfoldedTransition;
}
// Usage: #include transition(width, height 0.3s ease-in-out);
All credit goes to tobiasahlin
https://gist.github.com/tobiasahlin

Flaticon smooth scaling effect on hover

I'm trying to give my flat icons a nice smooth scale effect on hover. I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
Thanks,
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
transition: all .2s ease-in-out;
}
.flaticon-city:hover {
transform:scale(1.3);
}
and this doesn't work either:
.flaticon-city:before {
font-size: 64px !important;
margin-left: 0px !important;
color: #00ACDE;
}
.flaticon-city:hover {
transform:scale(1.3);
transition: all .2s ease-in-out;
}
I have tried this but that doesn't work (the zoom works, but no smooth effect). Any idea what the issue is?
The issue is simply that you specified transition for .flaticon-city:before, but apply the transform on .flaticon-city:hover.
Edit:
It “doesn’t work” in your example, because you have a problem with specificity:
#page-content #services .service i {
/* … */
transition: color .4s ease;
}
.flaticon-city:hover {
transform: scale(1.3);
transition: all 2s ease-in-out;
}
The first rule as higher specificity than the second one, but they both apply to the same i element that holds your icon – and therefor, you have now specified color as transition property only (because you have overwritten the transition), so changing the transform is not transitioned any more.
Just combine the two transitions into one:
#page-content #services .service i {
transition: transform 2s ease-in-out, color .4s ease;
}

How do I make buttons that have the same transitions and some of the same properties, but then also have some differing properties?

So, I've barely done any design and am trying my hand at it, but I guess I'm thinking of things wrong when it comes to using class and id in my html and css since I'm thinking of it from a programming perspective. I was thinking of class as a sort of parent class and id representing a child, where they can inherit properties while at the same time having their own; however, though in some regard this seems to work, my transitions don't work as I expect them to when I hover over them.
I have an unordered list of buttons like this
<li><button type = "button" id = "first">Press Me</button></li>
and this css:
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
#first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
#second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
#third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#9bffcd;
}
For first only the color transition works, for second only the border transition works, and for third only the background and color transitions work. It seems that the transitions only work for the properties I haven't overridden. Is there anyway of preserving these transitions while keeping their individual properties? I might override these transitions for other buttons, but I was just curious how I would go about maintaining it for some. Thanks
While writing reusable code always prefer to class rather that id which will help you to override the properties very easily and you don't have to be explicit.
So, here is example as you need. I think it will work for you.
HTML
<button type="button" class="first">Press Me</button>
<button type="button" class="second">Press Me</button>
<button type="button" class="third">Press Me</button>
CSS
button {
padding: 15px;
font-size: 24px;
border-radius: 25px;
-webkit-transition: all 0.2s linear 0.2s;
-moz-transition: all 0.2s linear 0.2s;
-o-transition: all 0.2s linear 0.2s;
transition: all 0.2s linear 0.2s;
}
.first{
background-color:#ff9bcd;
border: 5px double #ffffff;
}
.second{
background-color:#ff9bcd;
border: 5px double #9bffcd;
}
.third{
background-color:#ffffff;
}
button:hover{
background:#9bffcd;
border: 5px dotted #ff9bcd;
color:#fff;
}
Link to Fiddle .
Have a nice code day.
Put the pseudo :hover selector to each button ID selector.
Try: #first:hover { ... } #second:hover { ... } #third:hover { ... }

Peculiar case with CSS Transition for Web Site Navbar on Firefox

My site address is http://applocity.blogspot.com/
I have a navigation bar (#cssmenu if you want to find it in the source code) and for some odd reason this is occurring: I made it so the links change colors upon hover and that works fine. But I wanted to add a transition so the background-color changes colors by fading in and out. This works fine on Chrome but it only works on the sub-links (e.g. under device and category) on Firefox. I have not been able to figure out why this happens.
#cssmenu a {
background: #999999;
color: #FFF;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
padding: 0px 25px;
//border-radius: 5px; (NOT ACTIVE)
}
#cssmenu ul li:hover > a {
background: #66FF99;
color: #000000;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-ms-transition:background 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
(There is more on the source code of the site--CTRL+F #cssmenu)
What I've tried so far:
Putting background-color instead of background
Using -moz-transition...of course
Re ordering and placing where I put the transition attributes in the CSS code (e.g. under #cssmenu as well as #cssmenu:hover.
I figured it out. Here is the link to my solution. http://jsfiddle.net/mrytF/2/
The problem was coming from lines 59-61. You had this code:
.cssmenu a {
-moz-transition: background 1s ease;
}
When .cssmenu doesn't exist. So I commented this code out, and it works fine now in firefox. I also commented out some CSS that I thought was redundant
Hope this helps
Edit
Fixed the problem with not having the sub-menu show. The main problem here was that you had line 22 as #cssmenu ul li.hover, when it needed to be #cssmenu ul li:hover.
Here is the fiddle
http://jsfiddle.net/mrytF/3/

Drawing an L shape button with hover effect purely with CSS3

Been trying to figure out how to create an L shape button using only CSS3. I've managed to do it by mirroring a rectangle to create the shape but I am also trying to implement a hover effect on the button as well. It works only on the main rectangular shape.
Any ideas on how to go around this or possibly a more efficient way of executing this problem.
here's the jsfiddle:
http://jsfiddle.net/kryon17/kpRKA/
Not sure if this is what you needed, but I recreated it using borders. Let me know if this solves your problem.
HTML
​
CSS
a {
margin:100px;
display:block;
width:50px;
height:50px;
border-bottom: 30px solid black;
border-right: 30px solid black;
}
a:hover {
border-color: #676767;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
Source | Demo