CODEWITHSUNDEEP
cssstylus
wickywills
wickywills

Reputation: 4204

Calculations with variables in Stylus

I have been going through the Stylus docs and looking at examples, but I can't seem to get a simple calculation to work when using a variable. For example:

Works

margin-right: (1200 / 2)px;

Doesn't work

$siteWidth = 1200;
margin-right: ($siteWidth / 2)px;

I've seen many examples about using variables inside calc and using % before the variable name, or {..} around the variable, but I've tried both and neither works. Am I missing something obvious here?

Update

I failed to mention that I am storing my variables in a separate stylus file. If I create the variable in the same file as I am using it within the calculation, it works fine, however if I try to call the variable when it is imported from another file, it doesn't work. The variables file is the FIRST thing that is included in my main styles.styl file, and I can use the variables site wide without issue - just not when using it in a division calculation for some reason.

Codepen

Upvotes: 0

Views: 1744

Answers (2)

wickywills
wickywills

Reputation: 4204

This was a bit of a tricky one, but I solved my problem using the below:

margin-right: 'calc(-%s / 2)' % $sitewidth;

I have actually changed my code a bit to include a new variable to get half the width of the site, as I might use it again:

$halfsitewidth = $sitewidth / 2;
margin-right: '-%s' % $halfsitewidth;

Upvotes: 1

Sergio Tx
Sergio Tx

Reputation: 3868

UPDATE:

Try this instead of parenthesis:

#{$site-width / 2}px;

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

Upvotes: 1

Related Questions