Sass:修改名称遵循特定模式的所有ID元素

时间:2017-03-06 14:07:08

标签: javascript jquery wordpress sass

我正在修改一个Wordpress模板,该模板使用#id-name .panel-grid-cell格式创建新的小部件 正如你在这里看到的那样:

#pg-w58b983b2259ee-0 .panel-grid-cell, 
#pg-w58b983b2259ee-1 .panel-grid-cell,
#pg-w58b983b2259ee-2 .panel-grid-cell,
#pg-w58b983b2259ee-3 .panel-grid-cell,
#pg-w58bd4d4e56422-0 .panel-grid-cell,
#pg-w58bd4d4e56422-1 .panel-grid-cell,
#pg-w58bd5656edd58-0 .panel-grid-cell, 
#pg-w58bd5656edd58-1 .panel-grid-cell, 
#pg-w58bd5656edd58-2 .panel-grid-cell, 
#pg-w58bd5656edd58-3 .panel-grid-cell, 
#pg-w58bd5656edd58-4 .panel-grid-cell, 
#pg-w58bd5656edd58-5 .panel-grid-cell,
#pg-w58b9733479d6f-0 .panel-grid-cell, 
#pg-w58b9733479d6f-1 .panel-grid-cell, 
#pg-w58b9733479d6f-2 .panel-grid-cell, 
#pg-w58b9733479d6f-3 .panel-grid-cell,
#pg-486-0 .panel-grid-cell, 
#pg-486-1 .panel-grid-cell,
#pg-w58bd39810eb65-0 .panel-grid-cell,
#pg-w58bd3cc5d740c-0 .panel-grid-cell, 
#pg-w58bd3cc5d740c-1 .panel-grid-cell, 
#pg-w58bd3cc5d740c-2 .panel-grid-cell
{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

问题是这些名称是使用JavaScript / JQuery动态创建的。 这意味着下次用户创建新窗口小部件时,它将具有随机创建的具有相同格式的名称

问题是:

如何在名称遵循模式的所有ID元素中左右填充零(0):#id-name .panel-grid-cell using SASS?

类似的东西:

$my-variable .panel-grid-cell
{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

1 个答案:

答案 0 :(得分:1)

试试这样:

div[id^="pg-"]  .panel-grid-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}