-1

I am newbie with Sass and I am creating a nested run with the next values

.heightAndWidth {
    height: 21px;
    width: 20px;
}

But I would like extend this rule and add 10 px in a specificclass, instead of 21, 31 but reusing the nested rule is this possible? How can I do it?

inane
  • 626
  • 10
  • 26

1 Answers1

2

sorry this is scss

@mixin heightAndWidth($px) {
  width : $px; 
  height : $px; 
}

.box { @include heightAndWidth(10px); }

here is sass

=widthAndHeight($px)
  width:    $px
  hight:    $px

.box
  +widthAndHeight(10px)

http://www.sass-lang.com/guide

you can find to documentation here. 

$a = 100px; 
div {
    background: black;
    height:100px;
}
.one {
    width: $a;
    $a = $a+100;
}
.two {
   width: $a;
   $a = $a+100;
}
.three {
   width: $a;
   $a = $a+100; 
}
aahhaa
  • 2,240
  • 3
  • 19
  • 30
  • ok I understand your example but is it possible dinamically to and 10 px to 21, for example? Thanks for your explanation – inane Mar 12 '15 at 18:17
  • as far as i know, you can't do that, the only way I will put it up shortly. – aahhaa Mar 12 '15 at 18:27
  • http://jsfiddle.net/3zbcu1a4/ – aahhaa Mar 12 '15 at 18:31
  • Thank you @wlin your perspective it was cool for my implementation but I have the next doubt if the parameter in the function is "%" instead of px or em, gives me an error, what could it be the approach in this instance? – inane Mar 13 '15 at 12:52
  • http://jsfiddle.net/3zbcu1a4/1/ this for % – aahhaa Mar 13 '15 at 13:42
  • thank you @wlin for your explanation but I would like to do it with your first piece of code in the inside of mixin, for example @mixin `heightAndWidth($%)` – inane Mar 13 '15 at 13:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72937/discussion-between-inane-and-wlin). – inane Mar 13 '15 at 15:18