SCSS Framework

Bootstrap - sass

### Install ###
gem install bootstrap-sass                                            // install in system
compass install bootstrap -r bootstrap-sass                           // if project isset
compass create my-new-project -r bootstrap-sass --using bootstrap     // if create new project with install

### Use ###
style.scss
@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap";                  // if download
@import "bootstrap";                                                          // if install with Compass
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";    // if install with Bower

copy _variables.scss > in to scss (change name)

@import "customVariables";                                                            // FIRST !!!

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";            // then...
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";

http://www.saltycrane.com/blog/2015/02/customizing-bootstrap-sass-version-using-grunt-and-bower/

config.rb

require 'compass/import-once/activate' #<- remove if framework exist?
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css/dev"
sass_dir = "css/dev/scss"
images_dir = "media/img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Foundation - sass

gem install zurb-foundation
compass create PROJECT_NAME -r zurb-foundation --using foundation
* or *
gem install foundation
npm install -g bower
npm install --global foundation-cli
bower install foundation-sites
foundation new <myproject path>
    (optional) if bower complains do this:
    cd <myproject path>
    bower install foundation --allow-root

syntax compass

http://beta.compass-style.org

compass create <myproject>

@import "compass/reset";    //get reset file
@import "meta/typography";  //get my fyle

@include debug-vertical-alignment;  //debug by vertical line

@import "compass/typography/vertical_rhythm";
@import "compass/typography/links";
@import "compass/css3/hyphenation";

@include rhythm-margins(2);         //margin for block *up/down* (2-lines)
@include margin-trailer;            //margin down

@mixin rhytm-config($size) {
 $base-font-size: $size !global;              //base font
 $base-line-height: $size * 1.5 !global;      //line height
 $rhythm-unit: "rem" !global;                 //rem em px ...
 $rem-with-px-fallback: false !global;        //+/- px em
 $grid-background-baseline-color: lighten(#D72272, 30%) !global;
 .wrapper { padding: $base-line-height; }
}

@include rhytm-config(16px);
@include establish-baseline;              //Establishes a font baseline for the given font-size.
@media (min-width: 769px) {
 @include rhytm-config(22px);
 @include establish-baseline;
}

@include adjust-font-size-to(22px);       //fon size for current element
@include hyphenation;                     //text-align justify + '-'

@include hover-link;
@include link-colors(blue, seablue, red, green);