Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KZeni/c1baf748c05047da78398e7e4d3ca174 to your computer and use it in GitHub Desktop.
Save KZeni/c1baf748c05047da78398e7e4d3ca174 to your computer and use it in GitHub Desktop.

Tools to choose from

The official SASS site has a list of possible options here: https://sass-lang.com/install

There are paid options, free options, and even open source options. These are then available on Windows, Mac, and/or Linux. They’re also inter-operable so it’s not a requirement that we use the same tool (though some consistency might be nice when it comes to sharing settings, discussing things, etc.)

I’ve personally used https://codekitapp.com (paid & Mac only; my current app of choice), and http://livereload.com (has paid options for helping further development & support, but it is provided 100% free per it being fully open source [Windows option is fully free even from the main download option]).

There’s then also http://koala-app.com (free & open source), https://prepros.io (paid), https://scout-app.io (free & open source), and others.

What’s nice is that you can really use the tool of your choice and it should play nice (I know Kaitlyn uses a different tool from me) since it’s still just taking the SASS/SCSS, non-minified JS, and other files and compiling/minifying them per their established standards. It’s the lack of having this being done while everyone else is doing it/using it that then becomes a problem. Again, this should actually become a useful tool that you’d likely not see any reason to go back to not using it later on & could be used on all projects to get the benefits these tools provide & keep things consistent across projects.

Also, I believe all of the tools I’ve mentioned here (definitely the ones I’ve tried) allow for website folders to be defined so the tool then watches for a file (SCSS, JS, etc.) to be edited and then automatically re-generates the output file (minified & combined CSS, minified JS, etc.) to then be uploaded (with the settings then allowing for customization as needed, but we’ve aimed to keep things as using the default/recommended settings as much as possible for the projects we’ve created so setup time should be minimal.)

In short, just adding one of these tools to your workflow this should automate JS minification (and map file creation) as well as SASS compiling (and CSS minification & map file creation). Making things quicker & more consistent (as well as being able to work on projects that have this being used; among other things) that’s currently being missed out on.

About SASS

When it comes to the benefits of SASS, one of the biggest things is the inclusion of variables. That way, you can have things like brand colors, colors used elsewhere throughout the site, dimensions, fonts, and any properties defined once to then be used throughout the entire site/theme’s CSS without worrying about inconsistencies, needing to update multiple items when something changes, etc. There's also nesting (no need to manage a super long line of CSS selectors… just nest them like the HTML already is and it handles the rest), mixins (create shorthand/functions for whole blocks of CSS that’s reused thought the site so things like browser prefixes are handled automatically, etc.), import (commonly used for a “globals” file where all of the variables, mixins, etc. are defined so that can be referenced by any number of separate SCSS [and resulting CSS] files without needing to be defined for each file… this can even result in an import that doesn’t add any CSS to the output & is purely there for the variables, mixins, etc. which don’t have any output in themselves.]), and more. You can see each of these & more detailed with examples here: https://sass-lang.com/guide

About Bourbon (a SASS library) which is used on a few of our sites

Also, we have some projects using the Bourbon SASS library for things like being able to use #{$all-buttons} as a selector that automatically fills out to be all permutation of button elements, browser prefix automation, simplification of gradient implementation, and more. Additional details can be found here: https://www.bourbon.io/docs/4/ (we’re still using v4 on a large variety of projects since v5+ removed useful options with updating not have much shown for benefits given the tradeoff at this time).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment