モバイルのコーディングは、横の余白やwidthは%で指定する仕様の場合が多いです。
しかし、デザイン上で%を指定してもらえることはほとんどないので、pxサイズを元に計算することになります。

逐一計算するのも面倒なので、こんな関数にしました（SCCS）。

※ご使用は自己責任でお願いします。2016/09/09現在の内容です。

関数

// px to percent
@function px-to-per($px, $parent_width:750){
@return decimal-round( ( $px / $parent_width * 100% ) , 2);
}
// math function
//  _decimal.scss | MIT License | gist.github.com/terkel/4373420
@function decimal-round ($number, $digits: 0, $mode: round) {
$n: 1;
// $number must be a number
@if type-of($number) != number {
@warn '#{ $number } is not a number.';
@return $number;
}
// $digits must be a unitless number
@if type-of($digits) != number {
@warn '#{ $digits } is not a number.';
@return $number;
} @else if not unitless($digits) {
@warn '#{ $digits } has a unit.';
@return $number;
}
@for $i from 1 through $digits {
$n: $n * 10;
}
@if $mode == round {
@return round($number * $n) / $n;
} @else if $mode == ceil {
@return ceil($number * $n) / $n;
} @else if $mode == floor {
@return floor($number * $n) / $n;
} @else {
@warn '#{ $mode } is undefined keyword.';
@return $number;
}
}

使うとき

例） .content というdivの左右に58px相当のpaddingをつける

.content{
padding: 0 px-to-per(58);
}

まずは単純な計算から

デザインが750pxだった場合で、例えば58pxを%に計算するには、
58 ÷ 750 × 100
という式になります。

コード上では、以下のようになります。

58 / 750 * 100%

引数で渡して結果を返すようにする

さっきのを関数にして引数で「計算したいサイズ（58）」と「親のサイズ(750）」を渡すようにする。
親サイズはデフォルトの値としてもセットしておく。

// px to percent
@function px-to-per($px, $parent_width:750){
@return $px / $parent_width * 100%;
}

しかし、このままでは結果が「7.733333333%」のように小数点以下が長くなってしまいます。

小数点以下2桁を四捨五入する

数値を丸める関数は、round()、ceil()、floor()
が元々あるのですが、小数点以下の桁数の指定ができないんです。
7% と 7.5% とかだとけっこう違っちゃうので、小数点以下2桁くらいまでは含めたいところ。

Gistにいい関数が上がっていたので使用させてもらいました。ありがとうございます。
https://gist.github.com/terkel/4373420

第一引数に四捨五入したい値、第二引数に何桁まで計算するかを指定すると、以下のような感じになる。

decimal-round(7.7333333, 2) => 7.73

ということで、こうです。

// px to percent
@function px-to-per($px, $parent_width:750){
@return decimal-round( ( $px / $parent_width * 100% ) , 2);
}

内側のコンテンツの余白を求める時とか

CSSの%は、HTML全体のサイズではなく、基準のボックス内での割合となるので、基準ボックスの横幅が画面100%じゃない時には、そのままだと値が合わなくなってしまいます。

ということで、引数で親のサイズも指定できるようにしておきました。
親に余白がついてて、内側のコンテンツはデザイン上 634pxだったとすると、こういう感じに使う。

.content .inner{
padding: 0 px-to-per(58, 634);
}

以上です。他の人はどんな風にコーディングしてるんだろう。

追記

percentage()という関数があるのを後から知りました（´・ω・｀）
この関数を使えば、

$px / $parent_width * 100%

の部分を自前で計算しなくても良かったですね。

// px to percent
@function px-to-per($px, $parent_width:750){
@return decimal-round( percentage( $px / $parent_width ) , 2);
}

これでOK。なお、そもそも自前の関数にしなくてもいいのではないかとも思いつつ、多少 書き方が省略できるのと役割がわかりやすくなるのでまあ便利かなという感じです。