single SCSSで割り算がうまくいかない! | Heastea's Blog , loves Music & Movies

普段、コーディングするときSCSSをコンパイルしてCSSを書いてるんですが、

pxをemにしようと思って割り算を使おうとしたんですが、

例えば、

width: (100 / 50)em;

ってやってもうまくいかなくて、

どうやらコンパイルされるとemの前に余計なスペースがはいってしまうのが原因でした。

んで最終的に今のところでの対処方法が、

 

(100 / 50)*1em;

 

にしたらうまくいきました。

ほかの演算子もまぜるとスペースが消えるようです(゜o゜)

もっといい方法があるのかもしれませんが、現状の対処方法でした

 
SCSS使ってない人は、はじめは慣れるまで少し時間必要かもですが、

それ以上の効率が確実に手に入るのでぜひ覚えることをオススメします!!

 

個人的な便利ポイントとしては、

今回書いたようにSCSS上で計算式で表記してもOK

CSSにコンパイルするときにちゃんと数値になおしてくれるので、

いちいち自分で電卓で計算して記述する必要がありません!

あとは要素も入れ子でかけて、慣れると従来のCSSの記述より断然見やすい!!

(例)

#wrapper #content .hogehoge{
...
...
}

が


#wrapper{

 #content{

  .hogehoge{
   ....
  }
 }
}

こんな感じになるので、

親要素の名前変えたりとかするときも一箇所かえればOKだし、

いちいち親要素の名前書く必要がないのでだいぶラク!!

などなど、

ちなみにfor文使ったり、変数とかも使えるので、調べてみてね(゜o゜)☆

 

 

SCSSで割り算がうまくいかない!
Tagged on:     

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Real time web analytics, Wordpress visitor counter, Wordpress visitor tracking
100{7b59e5e1dc5a8512912b9c1440e27d968b9bdd44696347a70a639ea70b7a7076}Japan Japan

Total: 89