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/' ...
随机推荐
- CentOS 7.x安装配置
简述 VMware可以创建多个虚拟机,每个虚拟机上都可以安装各种类型的操作系统.安装方法也有很多种.下面,主要以ISO镜像安装为例,介绍CentOS 7.x的安装过程及相关的参数设置. 简述 创建虚拟 ...
- HTML第二部分 CSS样式表
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- SecureCRT中的ftp文件上传
原文地址:http://www.blogbus.com/jjuan-flake-logs/59745331.html SecureCRT与SshClient不同的就是,SecureCRT没有图形化的文 ...
- BZOJ2721 [Violet 5]樱花
先令n! = a: 1 / x + 1 / y = 1 / a => x = y * a / (y - a) 再令 k = y - a: 于是x = a + a ^ 2 / k => ...
- [转]C#中的Monitor类
object obj=new object(); Monitor在锁对象obj上会维持两个线程队列R和W以及一个引用T : (1) T是对当前获得了obj锁的线程的引用(设此线程为CurrThread ...
- linux 常用命令;
bc 计算器 :quit 退出 top 任务管理器 q退出 who 显示在线用户 whoami 当前操作用户 kill id 结束当前进程 ifconfig 显示当前网络状态 clear 清屏 vim ...
- event.srcElement在火狐(FireFox)下的兼容问题。搜索框获得焦点时默认文字变化
前言: 项目中用到了一个功能,搜索框里有默认的文字,当搜索框获得焦点时里面的默认文字消失,如果失去焦点时搜索框内容为空则让里面的内容回复默认!,. 实现: 很轻松的在网上找到了类似代码 $(" ...
- Scss sass
http://www.ruanyifeng.com/blog/2012/06/sass.htmlscss 声明:1,$blue : #1875e7;2,.class1 { border: 1px so ...
- HDU 5353
题目大意: 相邻的朋友可以给出自己手上最多一颗糖,n个朋友形成一个环,问给的方式能否最后使所有朋友都糖的数量相同 这里我用的是网络流来做的,这里n=100000,用sap的模板可以跑过 #includ ...
- 用K2 smartforms开发一个应用程序究竟比ASP.NET快多少?
这次试验的起因是一场内部辩论. “用K2 smartforms开发一个应用程序究竟比ASP.NET快多少?” 我们推测是快4倍. 但是经过测试发现,我们推测错了. 本文记录了试验的规划.过程以及令人惊 ...