search

trendwerk / sphynx

A light & simple WordPress starter theme 😽
16 stars 2 forks source link

Merge variables to single .scss file #789

Closed sboerrigter closed 7 years ago

sboerrigter commented 7 years ago

I prefer to keep all Sass variables in a single file so you won't have to look through different files to find the variable you are looking for. For example: text-color could be in colors.scss or in typography.scss.

This would look like this: https://github.com/sboerrigter/pressless/blob/master/assets/styles/abstracts/variables.scss

luukdv commented 7 years ago

Maybe we can drop the implementation variables too. For example, just use $green instead of $primary-color. It's simpler, you don't have to check which color corresponds to which 'implementation' every time, and you can see which color is used by just reading the styling.

sboerrigter commented 7 years ago

After thinking about this I don't think it is a good idea to drop the color implementation variables like $primary-color. Variables like $border-color and $heading-color help the developer to implement the right colors and makes. This way you don't have to remember things like the grey shade of the headings.

haroldangenent commented 7 years ago

Code style

It seems this discussion is also about the code style in @sboerrigter's example (indentation for all variables, see #801).

I would like to keep things consistent, so what's the proposal here? Indent every declaration for all selectors or just indent all declared variables? Or just indent all variables in the variables file? How about lists or maps? Should those be indented?

If we'd apply this code style, I suggest we find some ruleset for this, so things will keep being consistent no matter who works on it. Personally, I wouldn't invest time in such a trivial thing and keep things the way they are.

Implementation variables

I agree with @luukdv. When developing, I hardly ever use the implementation variables blindly. A design is often mixed and inconsistent (because things look better that way). Most of the time, I use this workflow:

  1. Check which color is used in a design;
  2. Find that RGB value in the variables file;
  3. Check if there's an implementation variable that applies to this situation.

Part 3 is just overhead in my opinion. It also takes some time, because you cannot blindly use those colors, but you have to wonder: 'if this implementation variable is changed, do I want the color to change in my component as well?'. For me, things become more abstract than necessary for simple implementation.

Refactoring / changing a color isn't easier with implementation variables as well, because you have to check each component anyway.

sboerrigter commented 7 years ago

Okay then. I've kept the code style the way it is and removed the implementation variables. Can you check my PR again?