响应式布局susy框架之入门学习篇

学习响应式网站设计已经持续了一段时间，对sass，less，compass，grunt等等有了整体上的了解认识，但是由于产品的不可预知性，以及前端要求使用sass语言而且不适用bootstrap，所以很多现有的响应式框架如Bootstrap,Golden Grid system,less Framework 4 ,Skelton等都无法使用，选来选去决定使用susy框架，susy使用sass书写，同时，Susy 的设计初衷是作为 Compass 平台的一部分，所以，使用 Compass。

 susy的官方简介是这么描述susy的：“Your markup, your design, your opinions, out math.”因为她的设计初衷是一款进行栅格布局的辅助工具，这就决定了她不是一个css框架，很多css组件，js组件她都没有。

form元素在网站中的地位是非常重要的，<input>,<button>,<textarea>,<select>以及<label>,<a>等元素在网页中随处可见。这些样式中的复用性非常高，一个sass buttons组件非常不错叫做： Sassy Buttons，网址http://jaredhardy.com/sassy-buttons/使用她可以快速构建出适合可用又漂亮的buttons组件，bootstrap中的表单样式的多样化，合理的html及css dom安排同样有我们学习的地方。

http://bourbon.io/ Bourbon在这个领域做的也不错，标记一下。

两篇susy入门的文章1：http://www.w3cplus.com/preprocessor/susy-docs.html

　　　　　　　　　2：http://www.w3cplus.com/preprocessor/susy2-tutorial.html

susy官网： http://susy.oddbird.net/

Responsive设计和CSS3 Media Queries的结合： http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries

一篇响应式网站设计建议：http://www.qianduan.net/responsive-web-design/

 

一篇介绍use-css3-media-queries的文章：http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

w3c 中media-queries的文章： http://www.w3.org/TR/css3-mediaqueries/#media0

CSS Media Queries & Using Available Space：https://css-tricks.com/css-media-queries/ 　　

30+ CSS Grid System：http://www.w3cplus.com/source/30-css-grid-system.html　　　　　　　

遇到的问题：从网上down下来的susy，通过compass watch来观察实时编译 当其中有文件更改时，输出文件无法输出

解决方案：可能是因为在git上面的susy包文件集成了大量的mixin，所以再compass watch的时候特别慢 当然也可能不是这个原因，解决的办法是如果需要从.scss文件转成.css文件　执行此语句 compass compile 路径/文件名.scss。　　

自定义的susy项目没有无法编译的情况：compass create —using susy <project name> 使用compass 和susy创建一个项目

在项目中导入@import "normalize";@import "compass";@import "susy";

// Configuring Susy Defaults
// global settings
// 12-column grid

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column- false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

 根据config.rb中的配置使用compass watch 实时监测生成css文件。