Sass, Compass learnings

sass.txt

* Sass classes can be reused with @extend 
  e.g.
  .box {
margin: 10px;
}

.red-box {
  @extend .box
  color: red;
}

* In Sass variable names assignment is done with : instead of =

* Sass variable names doesn't distinguish between - and _ for e.g. $red-color and $red_color will mean the exact same thing.

* Sass file names which start with an _ are not the direct candidates for compilation. For e.g. _base.scss might be imported into main.scss and while compiling main.scss will be the only file being compiled. During import we can also omit the .scss extension.

* We write sass functions with @function and return with @return.

* compass init command will initialize a compass project from command line. It generates a config.rb which will hold the settings for the compilation of compass. Once compass is used it can be watched with compass watch.

* Compass documentation gives the global variables to override any default value. If we want to call a mixin with only one prarmenter in the middle we can specify it's name and value. For e.g. @single-box-shadow($blur: 30px) will only change blur value.

* Compass doc is awesome :) .. vendor prefixes also can be configured in similar fashion we can override whether we want a specific vendor prefix or not.

* Compass provide URL helpers. for example in a property like background: url() I can use background: image-url() and it provide necessary paths needed from the config.rb based on the http_path and images_dir. For local development we can also enable the relative_path flag in the config which will allow us get the relative paths of the images. 

* while using image-url it also appends a random number based on the creation/updation time of the image so that, incase the image has been modified it will update the browser cache automatically.

* Sprites can be handled by compass with @import "icon/*.png" and then @include all-icon-sprites.

* Hover or active pseudo classes can automatically be added if we rename the image properly. For e.g. if we have two images like phone.png and phone_hover.png and use the above mixin it will automatically generate a hover state toggling the images.