开发者社区 问答 正文

sass中#{}是什么意思

好像读取变量的符号,但又不知具体跟直接用$读取变量有什么区别

展开
收起
a123456678 2016-03-11 13:50:19 2051 分享 版权
1 条回答
写回答
取消 提交回答
  • 一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

    //sass style
    //-------------------------------
    $borderDirection:       top !default; 
    $baseFontSize:          12px !default;
    $baseLineHeight:        1.5 !default;
    
    //应用于class和属性
    .border-#{$borderDirection}{
      border-#{$borderDirection}:1px solid #ccc;
    }
    //应用于复杂的属性值
    body{
        font:#{$baseFontSize}/#{$baseLineHeight};
    }
    
    //css style
    //-------------------------------
    .border-top{
      border-top:1px solid #ccc;
    }
    body {
      font: 12px/1.5;
    }
    2019-07-17 18:59:06
    赞同 展开评论
问答地址: