Using Sass (scss) to build a basic Style Guide
Install Ruby ๐ on your computer: brew install ruby
(Windows users will need to install Ruby from an installer online).
To globally install Sass on your computer, run gem install sass
.
We can watch our Sass files so they are automatically converted to usuable CSS. To do so, we run the following command in the same folder as our SCSS files:
sass -w your_file.scss
or sass --watch your_file.scss:compiled_css_file.css
Where we say sass please listen for changes in your_file.scss and output the changes to *compiled_css_file.css
To create and re-use variables:
$my_variable: 0px;
$my_other_variable: black;
body {
font-size: $my_variable;
color: $my_other_variable;
}
We can import other SCSS files for code organization!
variables.scss
$my_variable: 0px;
$my_other_variable: black;
style.scss
@import 'variables.scss';
body {
font-size: $my_variable;
color: $my_other_variable;
}
// sass allows us to use JS style comments... these won't be compiled into the CSS file
Note that every style guide is unique. This is just a good starting point.
- Headline Text: 300%
- B-Head (sub) text: 150%
- Nav Item: 100%
- Body copy (text): 100% - starting point could be
body { font-size: 16px }
- Byline: 75%
1rem
= 100%rem
is responsive and related to theroot
of the page.
// style guide variables
$headline-text: 3rem; // 300%
$body-text: 1rem; // 100%
$nav-item: 1.25rem; // 125%
$sub-header: 1.50rem; // 150%
$byline: 0.75rem; // 75%
body {
font-size: 16px;
}
- Sass Guide: http://sass-lang.com/guide
- Sass Meister (validator): http://sassmeister.com/