Difference between revisions of "Setting up a existing Project with Sass"

From rbachwiki
Jump to navigation Jump to search
Line 25: Line 25:
@import "breakpoint";
@import "breakpoint";


</pre>
== _grid.scss file ==
<pre>
$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,
  )
);
</pre>
</pre>

Revision as of 15:54, 24 August 2016

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,
  	)
);