Difference between revisions of "Setting up a existing Project with Sass"
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, ) );