The Bullets
· Goodbye IE8 (and iOS6). Support is now IE9 and up.
· Swapped from LESS to SASS (.scss) language.
· Dropped pixel measurements nearly everywhere in lieu of em’s and rem’s.
· A new grid tier @ ~480px, making the breakpoint syntax now xs, sm, md, lg, and xl.
· Panels, thumbnails and wells are all replaced with cards.
· Dropped glyphicons.
· A new and fairly robust selection of margin and padding shim classes.
· An extended version of normalize, dubbed “Reboot”.
· A rework and extension of responsive utility classes.
The Sass Swap
Everything has been converted over to the .scss syntax of the Sass language. If you don’t know scss syntax yet do not fear. If you’re comfortable with Bootstrap’s previous precompiler, Less, then the most significant differences you’ll find are how variables are declared and how mixins are used. Variables are simply prefixed with $ rather than @:
LESS
@myVariable: #FFFFFF;SCSS
$myVariable: #FFFFFF;Mixins syntax is slightly different as well:
LESS
.border-radius (@radius) {…}.box {.border-radius(4px);}
SCSS
@mixin border-radius($radius) {…}.box {@include border-radius(4px);}
However, keep an eye out for is more semantic component-based css. Mixins seem much more popular in Sass. For instance, lets imagine a common page layout with a main column of 8 columns wide and an aside of 4 columns. Instead of seeing this:
div.container div.row div.col-md-8 /div div.col-md-4 /div /div/div
You might now see “component”-style markup instead:
div.container div.row div.main /div div.aside /div /div/div
With accompanying SCSS:
.main {@include make-col-span(8);}.aside {@include make-col-span(4);}
This makes the class names much more semantic. BTW, this is totally possible to do in .less but I don’t see it nearly as often for unknown reasons. Part 2 covers the change from pixel to rem/em measurements with a bit of a deep dive into understanding rem’s and em’s better.