账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    sass能变量名拼接吗?
    41
    0

    想在循环中拼接变量名

    想要以下的结果

    .color01{
        border-color: #137ae9;
        background-color:#137ae9;
    }
    .color02{
        border-color: #30a66a;
        background-color:#30a66a;
    }
    ...

    我有一些颜色的变量

    $color01: #137ae9;
    $color02: #30a66a;
    $color03: #da424e;
    $color04: #e56281;

    想通过以下循环输出

    @for $i from 1 through 9
          {
            &.color0#{$i}
            {
              border-color: $color0#{$i};
              background-color: $color0#{$i};
            }
          }

    结果 $color0#{$i} 并不能执行

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 習慣了孤單 普通会员 1楼

      在Sass中,变量名是可以拼接的,但需要注意一些规则和限制。

      以下是在Sass中使用变量名拼接的示例:

      1. 使用双引号("")包围变量名: scss variable1: 5; variable2: 10;

      在这个示例中,变量1和变量2分别被定义为一个字符串,然后被分别用双引号包裹。变量名可以包含任意字符,包括字母、数字、下划线(_)、美元符号($)和破折号(-)。

      1. 使用单引号(")包围变量名: scss variable1: 5; variable2: 10;

      在这个示例中,变量1和变量2分别被定义为一个字符串,然后只使用单引号包裹。单引号仅适用于字符串类型的变量名。

      1. 使用星号(*)包围变量名: scss variable1: *2;

      在这个示例中,变量1被定义为一个星号(*),这意味着它的名称将由一个或多个字符组成。然而,这种方法不能直接拼接变量名,因为星号不能被直接包裹在变量名的字符串中。

      1. 使用变量名占位符(~)包围变量名: scss variable1: ~3;

      在这个示例中,变量1被定义为一个变量名占位符,这意味着它的名称将由一个星号()或其他字符占位符(例如,+、-、、/、@、[]、{})组成。占位符在被使用时会被替换为实际的变量值。

      在使用变量名拼接时,应该确保变量名的命名规则和Sass的内置命名规则相匹配。例如,如果变量名包含数字,那么它们应该被放在变量值之前。如果变量名包含特殊字符(例如,@、[]、{}等),那么它们应该被放在变量值的后面。如果变量名被拼接在其他变量名的后面,那么它们应该被替换为变量名占位符(如~、*、/、@、[]、{}等)的字符串,而不是变量值的字符串。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部