Setting up a existing Project with Sass

From rbachwiki
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;
}

Back To Top- Home - Category