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=""实际上 inserts ，如果未定义，则""删除分配实际上会打印。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

然而！如果你问我，我建议你做一些不同的事情——像这样做一个透明的 mixin 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

可以像使用泛型一样透明地使用该 mixin font-size。更重要的是，有两种使用方法：

.foo
  font-size 1rem

.bar
  font-size 10

您可以在此处使用rem单位，将其转换为后备中的像素，或使用无单位数字，将其转换为您希望它出现在您的问题中。rem并且重要性将被保留，您甚至可以使用$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 回答