susy 学习之进阶
由于现在对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 类型上实现栅格布局。
快速入门
简单安装:
// Gruntfile.js
sass: {
dist: {
options: {
style: ‘expanded’,
require: ‘susy’
},
files: {
‘css/style.css’: ‘scss/style.scss’
}
}
}
快速上手


Susy 最基础的布局
// 建立一个布局上下文
@include container;
// 为元素设置布局效果
@include span(<width>);
body {
@include container(960px);
}
nav {
@include span(4 of 12);
}
n nav { @include span(3 of 12); }
这么一条语句就实现了,神奇吧,完全不需要考虑背后的计算。Susy 会帮你做相关的数学计算,所以你可以天马行空地去布局。
遇到的坑:
1,在修改$susy布局配置中的columns(原先为4改为5),compass编译出错,在恢复5至4的时候,有时也会编译出错,这个问题仍待解决。这个问题应该不是个问题,因为我重启电脑之后就没有再出现过。
susy 学习之进阶的更多相关文章
- Android学习笔记进阶之在图片上涂鸦(能清屏)
Android学习笔记进阶之在图片上涂鸦(能清屏) 2013-11-19 10:52 117人阅读 评论(0) 收藏 举报 HandWritingActivity.java package xiaos ...
- PHP学习笔记 - 进阶篇(11)
PHP学习笔记 - 进阶篇(11) 数据库操作 PHP支持哪些数据库 PHP通过安装相应的扩展来实现数据库操作,现代应用程序的设计离不开数据库的应用,当前主流的数据库有MsSQL,MySQL,Syba ...
- PHP学习笔记 - 进阶篇(10)
PHP学习笔记 - 进阶篇(10) 异常处理 抛出一个异常 从PHP5开始,PHP支持异常处理,异常处理是面向对象一个重要特性,PHP代码中的异常通过throw抛出,异常抛出之后,后面的代码将不会再被 ...
- PHP学习笔记 - 进阶篇(9)
PHP学习笔记 - 进阶篇(9) 图形图像操作 GD库简介 GD指的是Graphic Device,PHP的GD库是用来处理图形的扩展库,通过GD库提供的一系列API,可以对图像进行处理或者直接生成新 ...
- PHP学习笔记 - 进阶篇(8)
PHP学习笔记 - 进阶篇(8) 日期与时间 取得当前的Unix时间戳 UNIX 时间戳(英文叫做:timestamp)是 PHP 中关于时间与日期的一个很重要的概念,它表示从 1970年1月1日 0 ...
- PHP学习笔记 - 进阶篇(7)
PHP学习笔记 - 进阶篇(7) 文件操作 读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $conte ...
- PHP学习笔记 - 进阶篇(6)
PHP学习笔记- 进阶篇(6) 会话控制(session与cookie) 当前的Cookie为: cookie简介 Cookie是存储在客户端浏览器中的数据,我们通过Cookie来跟踪与存储用户数据. ...
- PHP学习笔记 - 进阶篇(4)
PHP学习笔记 - 进阶篇(4) 字符串操作 字符串介绍 PHP开发中,我们遇到最多的可能就是字符串. 字符串变量用于包含字符串的值. 一个字符串 通过下面的3种方法来定义: 1.单引号 2.双引号 ...
- PHP学习笔记 - 进阶篇(5)
PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...
随机推荐
- sqlserver 导出数据库表结构和数据生成脚本
- 使用Eclipse构建Maven的SpringMVC项目
一.直接建立Maven项目方法1.建立Maven项目 接下来使用Eclipse的maven构建一个web项目,以构建SpringMVC项目为例: 1.1 选择建立Maven Project 选择Fil ...
- Java:多线程,使用同步锁(Lock)时利用Condition类实现线程间通信
如果程序不使用synchronized关键字来保证同步,而是直接使用Lock对象来保证同步,则系统中不存在隐式的同步监视器,也就不能用wait().notify().notifyAll()方法进行线程 ...
- java--常用类summary(三)
/* 1:正则表达式(理解) (1)就是符合一定规则的字符串 (2)常见规则 A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') \r 回车 ...
- Java 8的五大开发技巧
转载:http://geek.csdn.net/news/detail/94219 在Java 9发布之前,我们来分享一些Java 8开发技巧,本文翻译自JetBrains高级开发主管Trisha G ...
- noip知识点总结之--线性筛法及其拓展
一.线性筛法 众所周知...线性筛就是在O(n)的时间里找出所有素数的方法 code: void get_prime(int N){ int i, j, k; memset(Flag, ); ; i ...
- PHP+mysql常用类库
<?php /** * @title: Ekcms mysql类库 * @version: 1.0 * @author: perry <perry@1kyou.com> * @pub ...
- 编写自己的Windows Live Writer插件
起因 自从小猪使用Windows Live Writer(wlw)来写博客之后就很少打开网站的后台编辑器了,这真是个写博客的好东西啊,但是任何东西都是不完美的.索契冬奥会开幕式都会把五环弄成四环呢!对 ...
- 【vmware vcp 5.1】安装及配置及笔记散记
ESXi的几个命令技巧: ------------------------------------------------- alt-f1: 进入console alt-f2: 返回DCUI alt- ...
- 如何禁止在DBGRID末位自动添加一行记录
http://www.tc5u.com/cpp/xg-1730729.htm 用DBGridEh吧,只要设置属性alopAppendEh为false即可 最简单将DBGrid的option属性中goE ...