sass

Updated: September 28, 2024

Syntactically awesome style sheets is a preprocessor for creating css.


Table of Contents

INSTALLATION

#MACOS
--xcode-select -install  * if ruby install has trouble
brew install ruby
sudo gem install sass
sudo gem install compass
sudo gem install css_parser

#LINUX
sudo gem install sass

MOST COMMONLY USED COMMANDS

sass-convert example.scss example.sass    # make a sass file out of a scss file
sass-convert example.sass example.scss    # make a scss file out of a sass file
sass example.scss:example.css             # make a css file out of a scss file
* this also generates a map file that is used for debugging *
sass --watch example.scss:example.css     # keeps css file up-to-date with any changes
sass example.scss:example.css --style compact   # makes format of code one liners.
sass example.scss:example.css --style compressed  # no white space, everything sqooshed.
sass example.scss:example.css --style expanded  # normal human readable format.
    --style expanded --sourcemap=none   # generate without a .map debugging file.

SETUP A PROJECT

sass --watch SCSS.scss:CSS.css --style expanded --sourcemap=none
sass-convert SCSS.scss SASS.sass


### MOSTLY GOING TO USE WHILE WORKING ON FILES
sass --watch example.scss:example.css --style expanded --sourcemap=none

### FOR LARGE PROJECTS
sass --watch Dir:NewDir   # watch a whole project and make a spot for files to be made.