Setting up a existing Project with Sass
Jump to navigation
Jump to search
Install sass and compass if not installed
gem install sass gem install compass
Config Rb file
require 'susy' require 'breakpoint' require 'compass/import-once/activate' http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" output_style = :expanded relative_assets = true line_comments = true
Style.scss file
@import "compass"; @import "compass/reset"; @import "susy"; @import "breakpoint";
grid.scss file
$susy: ( flow: ltr, // ltr | rtl output: float, // float | isolate math: fluid, // fluid | static (requires column-width) column-width: false, // false | value container:auto, // length or % | auto container-position: center, // left | center | right | <length> [*2] (grid padding) last-flow: to, columns: 12, gutters: 1/4, gutter-position: after, // before | after | split | inside | inside-static (requires column-width) global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static) debug: ( image: show, color: rgba(#656, .25), output: background, toggle: top right, ), use-custom: ( background-image: true, background-options: false, box-sizing: true, clearfix: false, rem: true, ) ); // using different layouts $gallery_layout: layout(12 .125 fluid float after); $nav_layout: layout(12 0 fluid float inside); $golden_layout: layout(1 1.318 2.618) .0 fluid float outside);
This is good to have to have your images fit inside the container
img{ width:100%; height: auto }
Include this for the border box sizing
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }