SCSS / SASSでパーセントを計算する

121

計算によって幅をパーセンテージでscssに設定したいのですが、エラーになります。

"...- width：（4/12）％"の後の無効なCSS：予期された式（たとえば、1px、太字）は ";"でした

私は何かしたいです

$my_width: (4/12)%;

div{
width: $my_width;
}

そこに％記号を追加するにはどうすればよいですか？

pxとemで同じ質問

css sass

— ニック・ギナント
ソース

何もいじることはありません。数値の単位を計算に追加したいだけです。（400/20）pxと同じ。scssに数値とpx / em /％を含めるにはどうすればよいですか？私は、「グローバル変数」を持っている可能性がありそうすれば私は一度変更することができます

— ニックGinanto

$ my_widthのような括弧を追加してみてください：（（4/12）％）;

— 2012年

申し訳ありません。申し訳ありませんが、確認してもう一度試す機会がありませんでした。{$ my_width：（4/12）％;}

— Sri

回答:

211

パーセント関数を試しましたか？

$my_width: percentage(4/12);
div{
width: $my_width;
}

— トーマス
ソース

pxとemに同様の機能はありますか？

— Nick Ginanto

確かではありませんが、ドキュメントのソースセクションで、基になるロジックを見ることができます：Sass :: Script :: Number.new（value.value * 100、['％']）、そうでない場合は、これを直接行うことも、自分でラッパー関数を作成することもできます。

— Tomas

@NickGinanto for px +px、行の終わりに追加するだけです。例width: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoatいいえ、どのような状況でもこれを行うべきではありません。単位の追加は、乗算（例：）を介して行う必要があります。$foo + $bar * 1px単位を連結すると、文字列のみが得られます。

— cimmanon 2015年

@cimmanonは最近それを変更しましたか？私がコメントを投稿したとき、それはそうではなかったと確信しています。

— DisgruntledGoat 2015年

別の方法：

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sassは値を％で出力します。

— rlejnieks
ソース

この作業を行うには100/6 * 1％を使用する必要がありましたが、それ以外の場合は1666.67％でした。

— sp00n 2015

* 100％が実際に行っていることはどこにありますか？

— Ini 2018

私はそれをこのように機能させることができました：

div{
   width: (4/12)* 1%;
   }

この方法では、特別な関数を使用する必要はありません。

— エンリケ・クシェッティ
ソース