0

I have two files: all-styles.scss and custom-styles.scss

The first one (all-styles) contains all styles I use in the application. The second file supposes to contain SOME of the rules from the first one. I want to process these rules separately later (to make them customizable).

What do I need to check: are rules in the second file (custom-styles) totally repeat the structure of the same rules in the first file? Kind of special linter.

Any nice ideas of a regexp / algorithm to solve this task?

Or maybe any existing tool? I didn't find it so far.

Example:

all-styles.scss:

$brand-primary: #3D215E;
$brand-secondary: #DE9826;

.review {
  font-size: 16px;
  padding: 10px 0;
  background: $background-primary;

  &__section {
    padding: 12px 0 20px;
    color: $brand-secondary;

    @include breakpoint(p3) {
      display: flex;
      align-items: center;
    }
  }
}

Valid custom-styles.scss:

$brand-primary: #3D215E;
$brand-secondary: #DE9826;

.review {
  background: $background-primary;

  &__section {
    color: $brand-secondary;        
  }
}

Invalid custom-styles.scss:

$brand-primary: #3D215E;
$brand-secondary: #DE9826;

.review {
  background: $background-primary;
  color: $brand-secondary;             
}
Yuriy K.
  • 241
  • 5
  • 12
  • This is not programming question. – StudioTime Jul 18 '17 at 13:07
  • Can't you just cascade them? So say you want the styles from `all-styles.scss`, you only include that one in your file. If you want `custom-styles.scss`, simply cascade it over the previous file. I may very well be misinterpreting your question, but it seems like you might be overthinking this a bit. – Kevin Jul 19 '17 at 05:29
  • Yep, thank you @Kevin. It is really simpler than it looked before. I splitted huge scss tree into default and custom ones and simply importing custom into the default. – Yuriy K. Jul 26 '17 at 09:18

0 Answers0