Update Sass variable names and add easings

locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.

https://locomotivemtl-boilerplate.vercel.app/

MIT License

458 stars 71 forks source link

Update Sass variable names and add easings #118

Closed lucasvallenet closed 2 years ago

lucasvallenet commented 2 years ago

Standardize SCSS variable namespaces.

Updates

Font weights $bold ➝ $font-weight-bold I've updated them but I think we can drop these variables

Colors $white ➝ $color-lightest $link-hover-color ➝ $color-link-hover $color ➝ $font-color

Eases $Power1EaseOut ➝ $ease-power1-out I also added missing easings (circ, back, ...)

mcaskill commented 2 years ago

This is fantastic and a much needed improvement.

My only suggestion would be that I think whitespace after a colon is better than before it:

- $facebook-color:  #3B5998;
- $instagram-color: #E1306C;
- $youtube-color:   #CD201F;
- $twitter-color:   #1DA1F2;
+ $color-facebook     : #3B5998;
+ $color-instagram    : #E1306C;
+ $color-youtube      : #CD201F;
+ $color-twitter      : #1DA1F2;

If I'm looking for the definition of a variable somewhere, it's quicker to search for $color-twitter: rather than using a regular expression \$color-twitter *:.