The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

SASS @mixin urgent

  • # February 14, 2013 at 9:43 am

    1) With .scss i wrote this:
    @mixin radius($radius1,$radius2){
    **border-radius: $radius1 $radius2 / $radius2 $radius1;**

    But here, “/” forward slash is accepted as Dividing sign i guess. If i say
    **@include radius (30px,20px),**
    i get in CSS
    **border-radius: 30px 1 30px;**
    How to solve it?

    2)Again, in SASS
    @mixin translate($type, $value){
    transform: $type($value);
    -moz-transform: $type($value);

    . I use
    @include translate(rotate,30deg)
    But it compiles to CSS as like this :
    transform: rotate 30deg;
    Parantheses disappear ?

    # February 14, 2013 at 10:30 am

    First one is solved, i should use “border-radius: #{$radius1} #{$radius2} / #{$radius2} #{$radius1};

    What about second?

    # February 14, 2013 at 10:31 am

    LOL at thread title!

    Urgent CSS :)

    # February 14, 2013 at 10:43 am

    OK, i solved second two :D I should use
    @mixin translate($me){
    transform: $me;

    And call it as like :
    @include translate(rotate(30deg));

    Thanx for reading ;)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed