CSS Calc Mixin
This mixin makes it easer to use the CSS calc function and pass in values that need to be processed by Sass, mainly em()
functions.
This mixin takes some simple arguments:
$attr
= the attribute you want to calc$value
= the calculated value in the expression$tb-property
and$tb-property
= setting these values to0
will set either the Top and Bottom, or Left and Right to0
$base
= the core width that is the base of the expression$operator
= use either-
,+
,*
or/
Example Sass
.block {
@include calc(width, em(220));
}
.block {
@include calc(margin, em(220), 0);
}
.block {
@include calc(width, em(220), true, 0);
}
.block {
@include calc(width, em(220), true, 0, 50%, '+');
}
Example output CSS
.block {
width: calc(100% - 13.75em); }
.block {
margin: 0 calc(100% - 13.75em); }
.block {
width: calc(100% - 13.75em) 0; }
.block {
width: calc(50% + 13.75em) 0; }
To install
A few choices, you could simple copy and paste the code into your project or Bower all the things!
$ bower install css-calc-mixin --save
In your Grunt file (using Grunt-Sass):
sass: {
dist: {
files: {
'application.css': 'sass/application.scss'
},
options: {
includePaths: [
'./bower_components/css-calc-mixin'
]
}
}
}
In your Sass manifest:
@import "css-calc-mixin";