- This topic is empty.
-
AuthorPosts
-
December 5, 2013 at 10:15 pm #157850nixnerdParticipant
Here is the CSS I originally wrote:
#gun:active #shell { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: -70px; margin-left: -500px; width: 70px; -webkit-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s; -moz-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s; -ms-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s; -o-transition: margin-top 0.1s, margin-left 0.2s, width 0.25s; transition: margin-top 0.1s, margin-left 0.2s, width 0.25s; }
That works great. But… when I try to SASSify it… I run into problems.
Here is my mixin:
@mixin transition($property, $duration) { -webkit-transition: $property $duration; -moz-transition: $property $duration; -ms-transition: $property $duration; -o-transition: $property $duration; transition: $property $duration; }
Here is the SCSS:
#gun:active #shell { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: -70px; margin-left: -500px; width: 70px; @include transition(margin-top, 0.1s); @include transition(margin-left, 0.2s); @include transition(width, 0.25s); }
Here is the output:
#gun:active #shell { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; margin-top: -70px; margin-left: -500px; width: 70px; -webkit-transition: margin-top 0.1s; -moz-transition: margin-top 0.1s; -ms-transition: margin-top 0.1s; -o-transition: margin-top 0.1s; transition: margin-top 0.1s; -webkit-transition: margin-left 0.2s; -moz-transition: margin-left 0.2s; -ms-transition: margin-left 0.2s; -o-transition: margin-left 0.2s; transition: margin-left 0.2s; -webkit-transition: width 0.25s; -moz-transition: width 0.25s; -ms-transition: width 0.25s; -o-transition: width 0.25s; transition: width 0.25s; }
December 5, 2013 at 11:04 pm #157853AlenParticipantCan someone please explain what #{} is doing here?
Sass syntax doesn’t have brackets. http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html
December 6, 2013 at 2:58 pm #157899JoshParticipantWhy not just use Compass, if you don’t mind my asking?
December 6, 2013 at 6:59 pm #157903AlenParticipantJust look it up in Docs and view source: http://compass-style.org/reference/compass/css3/transition/
December 7, 2013 at 11:47 am #157922__ParticipantThe tradeoff is, it’s bulky. For example, some things only need a webkit prefix. But I didn’t want to write a bunch of mixins for every prefixable attribute. Maybe I should?
Have another look at @CrocoDillon’s post. Each of your “property” mixins will call the “prefixer” mixin, specifying only the vendors it needs. Definitely the way to go.
(This is how Bourbon does it; I’m pretty sure Compass does the same.)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.