4

行を複製せずに!important定義に条件付き文字列を追加したい...これまでに最も近いのはこれです：

fontSize(size, isImportant = false)
  importantString=""
  if isImportant
    importantString = !important

  font-size unit(size, 'px') importantString
  font-size unit(size / 10, 'rem') importantString

これはimportantString=""実際には挿入されるため機能せず、割り当てが定義されていない場合""は割り当てを削除すると実際に出力されます。importantString

最良の方法は次のようなものです。

font-size unit(size, 'px') if isImportant !important

しかし、それは不可能だと思います。

4

4 に答える 4

3

質問に答える—unquote()の引用符を囲むだけで使用できるためimportantString、がない場合は何も出力されませんimportant。

これは次のようになります。

fontSize(size, isImportant = false)
  importantString = isImportant ? !important : unquote("")

  font-size unit(size, 'px') importantString
  font-size unit(size / 10, 'rem') importantString

でも！あなたが私に尋ねるなら、私は何か違うものを作ることをお勧めします—このように透明なミックスインを作りfont-sizeます：

font-size(size, args...)
  $rem_ratio = 10 if not $rem_ratio is defined
  if unit(size) == 'rem'
    font-size unit(size * $rem_ratio, 'px') args
    font-size size args
  else if unit(size) == ''
    font-size unit(size, 'px') args
    font-size unit(size / $rem_ratio, 'rem') args
  else
    font-size arguments

そのミックスインは、ジェネリックを使用できるので、透過的に使用できますfont-size。さらに、それを使用する2つの方法があります。

.foo
  font-size 1rem

.bar
  font-size 10

remそこで、フォールバックでピクセルに変換される単位を使用することも、質問に含めるように変換される単位なしの数値を使用することもできます。また、重要性は維持され、変数remを使用して1つのピクセルにいくつのピクセルがあるかを宣言する方法もあります。$rem_ratio

楽しみ！

于 2012-10-19T20:29:32.287 に答える
1

よりクリーンな解決策があるかもしれませんが、私は次のようなものを選びます：

fontSize(size, isImportant = false)
  if isImportant
    font-size unit(size, 'px') !important
    font-size unit(size / 10, 'rem') !important
  else
    font-size unit(size, 'px')
    font-size unit(size / 10, 'rem')

更新：残りのパラメーターを使用した代替ソリューション：

fontSize(size, args...)
  font-size unit(size, 'px') args
  font-size unit(size / 10, 'rem') args

使用法：

p
  fontSize(12, !important)

h1
  fontSize(14)

更新：名前付きの引数、おそらくより良い：

fontSize(size, important = null)
  font-size unit(size, 'px') important
  font-size unit(size / 10, 'rem') important
于 2012-07-19T12:37:43.943 に答える
0

「表示」ではコンパイルなし

スタイラス

display block !important

Css

display:block
于 2013-09-19T16:11:59.963 に答える
0 
display( arg = '' )
    if arg == 'inline-block'
        display arg
        zoom 1
        *display inline
    else if arg == 'box'
        display -moz-box
        display -webkit-box
        display box
    else
        display arg
于 2014-05-08T16:48:17.440 に答える