CODEWITHSUNDEEP
sassresponsive-designcompass-sass
Steve
Steve

Reputation: 14912

Using Compass/sass for percentage width responsive layouts?

I am trying to use Sass (and Compass) to simplify the creation of a percentage-width layout.

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

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

Which compiles to 

#leftcol {
  width: 65.306%;
}

Is there an easier way than to do that without typing that over and over?

Upvotes: 4

Views: 5076

Answers (3)

shaunc
shaunc

Reputation: 5611

sass also allows function definition (so you could use e.g. w/ min-width as well as width, or as part of other subexpression):

@function flex-width($target, $context) {
    @return (($target/$context)*100%);
}

#leftcol {
    width: flex-width(640, 980);
}

Upvotes: 0

philoye
philoye

Reputation: 2590

No mixin needed. Sass has a built-in percentage function that accepts a variety of units.

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

both result in:

width: 65.30612%

Upvotes: 10

Steve
Steve

Reputation: 14912

I figured it out, I made a mixin:

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

and then use it

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

Upvotes: 2

Related Questions