Join Jen Kramer for an in-depth discussion in this video A few words on LESS, Sass, CSS preprocessors, and workflows, part of Customizing Bootstrap 3 with LESS.
- View Offline
Recently, SASS was released for bootstrap as an official distribution. If you look at these SASS files, you'll find that they're set up in a essentially the same way as the LESS files. Basically they've been translated line by line to go from the LESS syntax to SASS. So if you really want to use SASS, you can follow along with this course in terms of identifying the file structure and learning what types of changes happen where. The syntax is slightly different with SASS, but if you're familiar with SASS, you shouldn't have any trouble.
In the end, I chose to work with the LESS files because they were originally created for bootstrap rather than translated for bootstrap. We'll compile our files quickly and easily using Prepros. A compiler that's free to download for Mac and PC. These days there's a bunch of ways of compiling LESS and SASS. I've chosen to work with Prepros, because it's so fast and easy to set up. But there are some downsides to working with this as well, mostly in terms of working with teams and collaboration.
And then, finally, Ray's course, Bootstrap 3, Advanced Web Development, talks about using Bootstrap Plus LESS and CodeKit. In the interest of keeping this course as easy to follow as possible, I've decided not to use a grunt or gulp workflow. But, you could certainly use this working with either SASS or LESS in BootStrap.
- Setting up your working environment for Bootstrap and LESS
- Understanding the LESS file structure
- Creating and manipulating LESS variables
- Working with LESS mixins
- Creating custom styles using mixins and variables