boostrap SASS and drupal

I’m learning SASS to speed up the process of styling my site. Tutorials

Sass allows for reusable variables and nesting. To create a variable use the $ at the top of the scss file. Nesting just means you stye elements in a nested way instead of

nav ul li a {
background: yellow;
}

you use

nav {
    some properties.
   ul {
       some properties.
      li { 
          some properties.
         a {
            background: yellow;
}}}}

Partials (import)

which are reusable code sections. These scss files start with _name for the name and they are imported into main scss files using import “name”; without the underscore.

Extend

css classes just like regular classes. @extend .class

Mixins

Mixins are code fragments that you can pass variables into. This rounds the corners for all browser types with a  border radius.

SASS vs SCSS

SASS allows for more shortcuts. It doesn’t require brackets which i love because i suck at typing them {}. Weak pinkies.

Mixin in sass is =name_of_mixin for defining it and +name_of_mix for including it

File name ends with .sass instead of .scss

No semi-colons in sass

@import doesn’t require ‘quotations’. Just @import file

Floats don’t take up the entire width. Regular divs do. Float collapses things.

There’s now a clearfix hack that avoids the use of clear: both div elements. It uses the css classes before and after.

There are mixin libraries that are already built up like bourbon. It includes the clearfix mixin which can be added with a simple +clearfix.