Using Compass / sass for flexible percent width layouts?

Question

I am trying to use Sass (and Compass) to make it easy to create a percent width layout.

Using the formula from A List Apart target/context=result , where the context is 980px and the design width is 640px, I tried to make a rule

 #leftcol { width: ((640/980)*100%); } 

What compiles for

 #leftcol { width: 65.306%; } 

Is there an easier way than doing this without repeating it over and over?

Answer 1

No mixing required. Sass has a built-in percentage function that takes many units.

 width: percentage(640 / 980) width: percentage(640px / 980px) 

both results:

 width: 65.30612% 

Answer 2

I realized I made a mix:

 @mixin flex($target, $context){ width: (($target/$context)*100%); } 

and then use it

 #leftcol { @include flex(640, 980); } 

Answer 3

sass also allows you to define a function (so you can use, for example, the w / min width, as well as the width, or as part of another subexpression):

 @function flex-width($target, $context) { @return (($target/$context)*100%); } #leftcol { width: flex-width(640, 980); }