ruby-on-rails - このサスを機能させる方法

Question

私は非sassを持っています:

.rounded-corners {
  -moz-border-radius-topleft: 4px;

次のようなことをしたい：

$radius_size: 4;

.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;

また

.rounded-corners {
  -moz-border-radius-topleft: $radius_sizepx;

しかし、これらは機能しません。この呼び出しの構文は何ですか?

どうも

Answer 1

どのバージョンのsassを使用していますか? 最初の例 ( -moz-border-radius-topleft: #{$radius_size}px;) が機能するはずです。それは3.1.16で私のために行います。

Answer 2

最初のオプション（補間を使用）は、うまくいくように見えます：

$radius_size: 4;
.rounded-corners {
  -moz-border-radius-topleft: #{$radius_size}px;
}

ただし、一般的には、変数自体に単位を格納するのが最善だと思います。これは、算術式で変数を使用すると、SASS が (可能であれば) 単位を自動的に変換するためです。

$radius_size: 4px;
.rounded-corners {
  -moz-border-radius-topleft: $radius_size;
}

Answer 3

Compassの使用も検討してください。それを使用すると、次のように記述できます。

$radius_size: 4px;
.rounded-corners {
  +border-top-left-radius($radius_size);
}

そして、これは自動的に生成されます:

.rounded-corners {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  -ms-border-top-left-radius: 4px;
  -khtml-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
}