mixins.scss: what are those arrays before writing CSS styles

user_15670131 0
Viewed 17

these are the custom styles I have added my mixins.scss, But I want these styles to be implemented both on data-vb-theme default and dark, how do I do this without writing a separate file?

[data-vb-theme='default'] .ant-table-tbody > tr > td,
[data-vb-theme='default'] .ant-table tfoot > tr > td {
  padding: 0.05rem;
  padding-top: 0.05rem;
  padding-right: 0;
  padding-bottom: 0.05rem;
  padding-left: 0;
}

I do not want to keep repeating the code for [data-vb-theme='dark'], [data-vb-theme='other'] and other. How do I achieve this I am not familiar with SCSS

reactjs less sass css-selectors css
1 Answers

Since you are using sass you can use nesting

[data-vb-theme='default'],
[data-vb-theme='dark'],
[data-vb-theme='other'] {
  .ant-table-tbody > tr > td,
  .ant-table tfoot > tr > td {
    padding: 0.05rem;
    padding-top: 0.05rem;
    padding-right: 0;
    padding-bottom: 0.05rem;
    padding-left: 0;
  }
}
user_1281650
Related