由于现在对susy的教程有限,只有官网指南性质的文档,然后就是w3cplus对她的翻译,所以我从零安装susy并调试项目到与从github上克隆susy项目同时进行,主要是为了参考susy放在git上的书写方式以及demo。然后参考了http://susy.oddbird.net/,查看了一些官网推荐的用susy写的外文网站,这一举措在研究探索susy的过程中,给我点亮了一盏明灯,让我看到susy在布局方面简洁而有力的 布局能力,让我在知其难而知其优雅的同时能够奋力前行。

  好了,开始吧。

Susy 是一款优秀的辅助工具,可以让开发者更得心应手地实现各式栅格布局。

官方发布 Susy 2 已经有些时间了,如果你很喜欢 Susy 1,那么相信你也一定会爱上 Susy 2——新版本的配置和使用更加灵活而富有弹性。

为什么选择 Susy?

正如上文所述,Susy 是极佳的辅助工具,可以用来创建各种天马行空的布局设计,而又无需考虑其中的数学问题(译者注:流式布局的百分比计算需要大量的数学计算)。Susy 的魅力之处就在于,它所实现的 CSS 样式是与 HTML 文件完全分离的。

如果你之前使用过传统的栅格框架,比如说 Foundation 和 Bootstrap,那么你就应该了解,它们所创造的栅格都是既定的宽度值和断点。更进一步地说,如果你想要改变布局,那么必须添加相应的类名到 HTML 文件中。

Susy 将这些既定样式统统抛弃了,你可以在任何 CSS 类型上实现栅格布局。

快速入门

Sass 是 Susy 唯一需要依赖的环境,所以必须安装 Sass。
同时,Susy 的设计初衷是作为 Compass 平台的一部分,所以,建议使用 Compass。
此外,也建议配合使用 Breakpoint 和 VerticalRhythms 工具。

简单安装:

# 终端命令
compass create —using susy <project name>
或者,使用终端命令在相关项目中使用 Susy:
compass install susy
通过命令行安装的susy,她的安装目录同
我们也可以从git上克隆https://github.com/ericam/susy.git
Grunt配置
// Gruntfile.js
sass: {
dist: {
options: {
style: ‘expanded’,
require: ‘susy’
},
files: {
‘css/style.css’: ‘scss/style.scss’
}
}
}

快速上手

在scss中导入susy
通过终端命令初始化项目后的导入方式
通过git上克隆susy后的导入方式

Susy 最基础的布局

Susy 最基础的布局有两个简单的混合宏组成:
// 建立一个布局上下文
@include container;
// 为元素设置布局效果
@include span(<width>);
举例
body {
@include container(960px);
}
nav {
@include span(4 of 12);
}
n如果你想为栅格内嵌的元素设置布局效果,那么可以使用 span 混合宏计算列宽:
n nav { @include span(3 of 12); }

这么一条语句就实现了,神奇吧,完全不需要考虑背后的计算。Susy 会帮你做相关的数学计算,所以你可以天马行空地去布局。

遇到的坑:

   1,在修改$susy布局配置中的columns(原先为4改为5),compass编译出错,在恢复5至4的时候,有时也会编译出错,这个问题仍待解决。这个问题应该不是个问题,因为我重启电脑之后就没有再出现过。

susy 学习之进阶的更多相关文章

  1. Android学习笔记进阶之在图片上涂鸦(能清屏)

    Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...

  2. PHP学习笔记 - 进阶篇(11)

    PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...

  3. PHP学习笔记 - 进阶篇(10)

    PHP学习笔记 - 进阶篇(10) 异常处理 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...

  4. PHP学习笔记 - 进阶篇(9)

    PHP学习笔记 - 进阶篇(9) 图形图像操作 GD库简介 GD指的是Graphic Device,PHP的GD库是用来处理图形的扩展库,通过GD库提供的一系列API,可以对图像进行处理或者直接生成新 ...

  5. PHP学习笔记 - 进阶篇(8)

    PHP学习笔记 - 进阶篇(8) 日期与时间 取得当前的Unix时间戳 UNIX 时间戳(英文叫做:timestamp)是 PHP 中关于时间与日期的一个很重要的概念,它表示从 1970年1月1日 0 ...

  6. PHP学习笔记 - 进阶篇(7)

    PHP学习笔记 - 进阶篇(7) 文件操作 读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $conte ...

  7. PHP学习笔记 - 进阶篇(6)

    PHP学习笔记- 进阶篇(6) 会话控制(session与cookie) 当前的Cookie为: cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据. ...

  8. PHP学习笔记 - 进阶篇(4)

    PHP学习笔记 - 进阶篇(4) 字符串操作 字符串介绍 PHP开发中,我们遇到最多的可能就是字符串. 字符串变量用于包含字符串的值. 一个字符串 通过下面的3种方法来定义: 1.单引号 2.双引号 ...

  9. PHP学习笔记 - 进阶篇(5)

    PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...

随机推荐

  1. CentOS 7.x安装配置

    简述 VMware可以创建多个虚拟机,每个虚拟机上都可以安装各种类型的操作系统.安装方法也有很多种.下面,主要以ISO镜像安装为例,介绍CentOS 7.x的安装过程及相关的参数设置. 简述 创建虚拟 ...

  2. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  3. SecureCRT中的ftp文件上传

    原文地址:http://www.blogbus.com/jjuan-flake-logs/59745331.html SecureCRT与SshClient不同的就是,SecureCRT没有图形化的文 ...

  4. BZOJ2721 [Violet 5]樱花

    先令n! = a: 1 / x + 1 / y = 1 / a  =>  x = y * a / (y - a) 再令 k = y - a: 于是x = a + a ^ 2 / k  => ...

  5. [转]C#中的Monitor类

    object obj=new object(); Monitor在锁对象obj上会维持两个线程队列R和W以及一个引用T : (1) T是对当前获得了obj锁的线程的引用(设此线程为CurrThread ...

  6. linux 常用命令;

    bc 计算器 :quit 退出 top 任务管理器 q退出 who 显示在线用户 whoami 当前操作用户 kill id 结束当前进程 ifconfig 显示当前网络状态 clear 清屏 vim ...

  7. event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化

    前言: 项目中用到了一个功能,搜索框里有默认的文字,当搜索框获得焦点时里面的默认文字消失,如果失去焦点时搜索框内容为空则让里面的内容回复默认!,. 实现: 很轻松的在网上找到了类似代码 $(" ...

  8. Scss sass

    http://www.ruanyifeng.com/blog/2012/06/sass.htmlscss 声明:1,$blue : #1875e7;2,.class1 { border: 1px so ...

  9. HDU 5353

    题目大意: 相邻的朋友可以给出自己手上最多一颗糖,n个朋友形成一个环,问给的方式能否最后使所有朋友都糖的数量相同 这里我用的是网络流来做的,这里n=100000,用sap的模板可以跑过 #includ ...

  10. 用K2 smartforms开发一个应用程序究竟比ASP.NET快多少?

    这次试验的起因是一场内部辩论. “用K2 smartforms开发一个应用程序究竟比ASP.NET快多少?” 我们推测是快4倍. 但是经过测试发现,我们推测错了. 本文记录了试验的规划.过程以及令人惊 ...