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

From rbachwiki
Jump to navigation Jump to search
(Created page with "== Install sass and compass if not installed == gem install sass gem install compass == Config Rb file == <pre> require 'susy' require 'compass/import-once/activate' http_...")
 
 
(6 intermediate revisions by the same user not shown)
Line 6: Line 6:
<pre>
<pre>
require 'susy'
require 'susy'
require 'breakpoint'
require 'compass/import-once/activate'
require 'compass/import-once/activate'


Line 17: Line 18:
line_comments = true
line_comments = true
</pre>
</pre>
== Style.scss file ==
<pre>
@import "compass";
@import "compass/reset";
@import "susy";
@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,
  )
);
// 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);
</pre>
===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===
<pre>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</pre>
----
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Latest revision as of 16:37, 2 October 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,
  	)
);

// 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