KPC
Kevin Powell - Community•3y ago
iLoveCoffee

How can I use variable in SASS extend?

I am trying to convert the following mixing to extend for example: 
=lineClamp($lineNumbers: 3)
    -webkit-line-clamp: $lineNumbers
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden
=lineClamp($lineNumbers: 3)
    -webkit-line-clamp: $lineNumbers
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden
4 Replies
Kevin Powell
Kevin Powell•3y ago
Oh I haven't seen .sass syntax in a long time! You could convert it to an extend if you want, but you wouldn't be able to have the $lineNumbers argument. One advantage of mixins over extends is that they accept arguments. What you could do, if you're really trying to optimize the code, is create an extend for what can be extended, and include that in the mixin... 
%lineClampRequiredProps
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden

=lineClamp($lineNumbers: 3)
    -webkit-line-clamp: $lineNumbers
    @extend %lineClampRequiredProps
    
.example-1 
    @include lineClamp(3)
    
.example-2
    @include lineClamp(5)
%lineClampRequiredProps
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden

=lineClamp($lineNumbers: 3)
    -webkit-line-clamp: $lineNumbers
    @extend %lineClampRequiredProps
    
.example-1 
    @include lineClamp(3)
    
.example-2
    @include lineClamp(5)
At the end of the day, once things have been gzipped by the server, you probably won't actually gain anything by doing this though.
iLoveCoffee
iLoveCoffeeOP•3y ago
@Kevin Thanks Kevin, I tried using variables but thought I could not write it properly (syntax error). Thanks for clarifying its not possible within extend. I've created extend as you've suggested and using it like this, all good. Thanks again! PS: I'm big fan of SASS over SCSS as I'm lazy 👀 
%lineClamp
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden

.hello
    @extend %lineClamp
    -webkit-line-clamp: 4
%lineClamp
    display: -webkit-box
    -webkit-box-orient: vertical
    overflow: hidden

.hello
    @extend %lineClamp
    -webkit-line-clamp: 4
Kevin Powell
Kevin Powell•3y ago
I started with it and loved it too, but switched because I write CSS more than 50% of the time, and I'd keep forgetting semi-colons and it drove me crazy, lol
iLoveCoffee
iLoveCoffeeOP•3y ago
That's a good thing specially for your students who only know CSS 🙂 But for personal use, SASS is sweet! No semi-colon, brackets, clean codes & specially changing nesting is so fast

Did you find this page helpful?