My Sass Learning

Use sematic variale name instead specific name like primary-color insdeat red

Adopt useful conventions.

• you can postfix color names with -color: $base-color: #333; $brand-color: red; $brand-80-color: rgba($color-brand, 0.8); $accent-color: yellow;
• add a prefix like header- or footer- for specific sections: // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa;

Keep a centralized config

I like to keep all my variables in a single file, called _config.scss, that I include in my primary stylesheet using the @import directive. This way, every other file that gets included after my config file will have access to those variables. @import base/config; @import base/typography; @import base/utilities; @import modules/button;

Use sematic variale name instead specific name like primary-color insdeat red

Use sematic variale name instead specific name like primary-color insdeat red