Sometimes the designer gives you static design with column widths, that doesn't fit exactly in the grid system. For example the container is 200px, and there are two columns - 110px and 90 px. To make a fluid design, you have to represent them as percentages - so just use this little scss function that will return the appropriate width, represen…

width-to-ratio.scss

//--------------------------------------------------------------
//	Width to ratio
//	You can pass to the mixin the target and the context in units:
//	fixed-to-fluid(35px, 100px);
//	Or you can pass just ratio from the pixels
//	fixed-to-fluid(35/100);
//--------------------------------------------------------------
@function fixed-to-fluid($target-width, $context-width:false) {

  //Process ratio
  @if (type-of($target-width) == "number" and unitless($target-width) and $context-width == false) {
	@return percentage($target-width);
  }

  //Process target and context 
  @if (comparable($target-width, $context-width)) {
	@return percentage($target-width / $context-width);
  }

}