Getting Sassy with Sass, CSS's wiser Uncle.

in programming •  7 years ago  (edited)

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 -- this is a little like npm, it makes installing packages ( or gems ) for Ruby easier.

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..

gem update --system

gem install compass

we should probrably install Sass at somepoint:

gem install sass

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/
|



next run either compass watch to watch for changes to Sass files and auto compile to CSS or manually run compass compile to turn your Sass into CSS.

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!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Lately I've wanted to learn SASS. A friend of mine showed me a piece of his SCSS files and I fell in love with the way he defined some elements as and nested some others. I'm looking forward your next post!

SASS is great, it's programatic CSS, check out this link for some inspiration. The website is also a great place to start learning the basics!

Thank you Adam, I'll check it out for sure :)

CSS is a bear. Just dabbling a tiny bit to adjust my Wordpress site was enough to send me running for the hills.

It can be a real nightmare at times, you might find this article worth reading, it covers some of the potential alternatives that were proposed during frontier times: https://blog.cloudflare.com/the-languages-which-almost-became-css/. There were some interesting approaches. CSS was never really developed to handle the large complicated websites of today.

Maybe that explains why I made one tiny change and broke my entire site! Thank God I had ctrl-c'd all the original code and pasted it into notepad before I saved my changes.