HLS SASS Guide

guide.md

CSS tricks SASS style guide

https://css-tricks.com/sass-style-guide/

Common SASS File Structure

File names end in .scss

main.scss

Secondary SCSS files are imported to an index.scss

  main.scss
  components ---  _index.scss
  components ---  _button.scss
  pages      ---  _index.scss
  pages      ---  _home.scss

// Main SCSS file
// Filepath: main.scss
// Import all sub index files

@import "components/index";
@import "pages/index";

// Components Index
// Filepath: components/_index.scss
// Import component files

@import "button";

// Pages Index
// Filepath: pages/_index.scss
// Import page files

@import "home";

Use the newer SCSS syntax

// Button styles
// Filepath: components/_button.scss

.btn{
  color:yellow;
  font-size:24px;
  
  a{
    text-align:center;
  }
}

// Home page styles
// Filepath: pages/_home.scss

$black:#000;

.main-home{
  background:#eee;
  color:rgba($black, .7);
  
  h1{
    font-size:2.5em;
    text-align:center;
    
  }
}

###Compilers

SASS works by using a compiler. You write your code in the SASS/SCSS syntax, run the code through a compiler, and it spits out regular CSS.

List of some compilers:

https://prepros.io/

http://gulpjs.com/ with certain packages

http://gruntjs.com/ with certain packages

####Ruby commands in the terminal to compile SASS:

*Must have Ruby language

sass --watch scss:css