CODEWITHSUNDEEP
sass
Ramon Vasconcelos
Ramon Vasconcelos

Reputation: 945

Translating LESS mixins to Sass

Well.. Im a little familiar with LESS and when im trying to move up to SASS.

In less i create some framework this way:

.w(@x){width:@x;}
.h(@x){height:@x;}
.f(@x,@y){font:@x '@y'}

i save it framework.less and @import it on my main.less

I just searched but i didnt found how to do it in SASS.. Just read the docs in the official site but no success. Can anybody explain me or send me a tutorial link? All the links i found on google was a little hard to understand even to make SASS work.

LESS' docs are very simple to understand but SASS is too complicated..

Upvotes: 1

Views: 1640

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Those are called mixins. You would write them like so:

@mixin w($x){width:$x;}
@mixin h($x){height:$x;}
@mixin f($x,$y){font:$x $y}

Mixin invocation looks like this:

.foo {
    @include f(1.5em, sans-serif);
}

However, your f mixin has redundant arguments:

@mixin f($x){font:$x}

.foo {
    @include f(1.5em sans-serif);
}

Upvotes: 4

Related Questions