Como agregar Sussy a nuevo proyecto con compass
Agregar Susy a un proyecto nuevo utilizando Compass
- Compass - Compass is an open-source CSS Authoring Framework.
- Susy - A plugin for the Compass CSS framework that lets you create your own custom grid framework, minimizing overhead, while making it more understandable to use.
$ gem install susy
Una vez instalado Compass
- Instalar Susy
$ gem install susy - Crear carpeta del proyecto con compass y agregar Susy :
$ compass create --using susy <project name> - Una vez instalado Susy y creado el proyecto con Compass encontraras una carpeta llamada "sass" y dentro un archivo llamado "_grids.scss" con este codigo:
@import "susy";
$susy: (
columns: 12,
gutters: 1/4,
);
Aqui podras definir los parametros de Susy como columns, gutters, flow, etc.
Parámetros de Susy:
// Basic configuration
$susy: (
flow: ltr, // ltr (left to right) | rtl (right to left)
math: fluid, // fluid | static (requires column width)
output: float, // float | isolate
gutter-position: after, // before | after | split | inside | inside-static
container: auto, // length % | auto
container-position: center, // left | center | right | <lenght> [*2] (grid padding)
columns: 12, // number of columns
gutters: 1/8, // width of gutters
column-width: false, // false | value
global-box-sizing: content-box, // content-box | border-box
last-flow: to,
debug: (
image: hide,
color: rgba(#ff0000, .25),
output: background, // background | overlay
toggle: top right,
),
use-custom: (
background-image: true, // look for background-image mixin
background-options: false, // look for background-size mixin
box-sizing: true, // look for custom box sizing mixin
clearfix: false, // true = look for internal clearfix before using mixin
rem: true, // look for rem mixin
)
);- Documentación de Sass:
- Documentación de Compass:
- Cocumentación de Susy:
- Autor del snippet: Federico Clasing @FedeClasing
- Los snippets pertenecen a KamikazeLab