When working with sass I've tried my best to apply what I think is a conventional form of how to name your variables so they are most useful to you. Remember, this is not 'the' way, this is just from my experiences, if it helps you then great. If you disagree then let me know as I always want to hear different methods and ways to approach.

So I try to follow the method of property type for variable name, followed by a distinguishing change. Here are some examples of this:

Colors

[css] $color-grey-light: #dddddd; $color-grey: #818181; $color-grey-dark: #414141; [/css]

Fonts

[css] $font-header-light: 'Font-Header-light'; $font-header-bold: 'Font-header-bold'; $font-text: 'Font-text-normal'; $font-text-bold: 'Font-text-bold'; [/css]

Spacing

[css] $gap: 10px; $width-min: 940px; $width-max: 960px; [/css] Thanks for reading.

Monthly Archives: March 2014

SASS variable naming convention

When working with sass I’ve tried my best to apply what I think is a conventional form of how to name your variables so they are most useful to you. Remember, this is not ‘the’ way, this is just from my experiences, if it helps you then great. If you disagree then let me know

Read more