css sanity with sass: setup.

CSS can be painful to write and even worse to maintain...

"as I tack on line 1000 of a css file in fear of breaking something otherwise"

I think even those that truely love language would agree. If you lean towards the front end of web development CSS is unavoidable. CSS shouldn't be this painful, we as programmers/developers/hackers/code monkies should not shy away from making things look nice.

After all who do you write programs for....other people, normally not programmers.As far as anyone else is concerned the UI is the program. They don't care how nicely you've abstracted functionality, how that new method you tried out worked or if you have clear comments. They want to interact with the program.

There is a better way

introducing SASS: Syntactically Awesome Style Sheets:

This language makes sense, it organizes things effectively and clearly. Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

It's been around a while in web dev terms (since 2006), but has really gained popularity over the last few years and is currently used and supported in many web development technologies such as Bootstrap, Jekyll and is supported in the 2017 Adobe Dreamweaver (yes it still exsists).

So let's get started, I'll be using Linux this will probably work on Mac but will obviously not on Windows.

We have to have some way to compile the SassScript, for that we need Ruby a programming language that gained popularity with Rails a server side framework written in Ruby.

I use a RVM which stands for Ruby version manager... I'm sure you can guess what it does. This will keep things neat and tidy.

Follow the download instructions for RVM. After that run:

rvm install <the_ruby_version_you_want>

eg:

rvm install 2.3.1 rvm use 2.3.1

then:

rvm rubygems latest

now we install compass an open-source CSS Authoring Framework. This will allow us to turn our Sass files into CSS, you may or may not need sudo here..

We are ready to roll:

set up a config.rb file in your project root to let compass know what's up, here's a sample to get you started:

# Require any additional compass plugins here.
# defaults to project root

http_path = "/"
css_dir = "css"
sass_dir="sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

For more details on configuration check out the compass docs
be sure to set your paths correctly this example project looks like this:

index.html
|
css/styles.css
|
|--sass/ 
|    |-- partials/                   # Partials do a quick google search for "Sass partials"
|    |    |-- _base.sass        # imports for all mixins + global project variables
|    |-- styles.scss     
|
|--js/
|--images/
|--fonts/
|

Well I didn't really cover Sass here but at least your ready to go!

Head over to http://thesassway.com/ for some great tutorials. Check out the Advanced section to get your mind blown.

You can always try Sass at somewhere like Codepen without all the overhead. Simply choose Sass in the CSS preprocessors tab under settings.

It really is worth a little set up for a massive longterm gain. I've had great fun learning Sass and hope to dive a little deeper this year.

So I'll prob be posting about how to use Sass at some point in the future.

Until then...

Happy Styling!