Setting up a existing Project with Sass

From rbachwiki
Revision as of 15:54, 24 August 2016 by Bacchas (talk | contribs)
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,
  	)
);