Susy 2 教程 — 入门篇

栏目: CSS · 发布时间: 7年前

内容简介:Susy 2 教程 — 入门篇
Susy 2 教程 — 入门篇

关于Susy

Susy 是一款进行 栅格布局 的辅助工具,它让开发者摆脱了冗杂的数学计算,同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大:

Your markup, your design, your opinions, out math.

栅格布局

栅格设计的特点是重视比例、秩序、连续感和现代感。 以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡,以便让信息可以更快速、更便捷、更系统和更有效率的读取;另外最重要的一点是,负空间的规划(即:留白)也是栅格系统设计当中非常重要的部分。—— 维基百科

参考文献: http://sagashen.lofter.com/post/11545c_785887

安装与使用

Susy 是基于 Sass 开发的,严格上讲并不是一个框架,而是类库,起初,它的设计初衷是作为 Compass 平台的一部分。建议大家在 Compass 的环境下使用 Susy。

Susy 并非一定要基于 Compass,它还支持 Webpack,Gulp,Grunt等自动化 工具 编译,详细可以查看官网文档

#终端指令
gem install susy

#如果已有compass项目
compass install susy

#如果是新初始化compass项目
compass create --using susy 

  

默认你项目的 项目名/sass/ 文件夹下会生成一个 _grids.scss 文件

Susy 2 教程 — 入门篇
输入图片说明

打开 _grids.scss 文件,已经引入了 susy

// Requirements
// ============

@import "susy";

$susy: (
  columns: 12,
  gutters: 1/4,
);

小试牛刀

// sass
$susy: (
  container:960px,
  columns: 12,  // The number of columns in your grid
  gutters: 1/4, // The size of a gutter in relation to a single column
);

.container{
    @include container;
}

.sidebar{
    @include span(2);
}

.main{
    @include span(10)
}
// output
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.sidebar {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}

.main {
  width: 83.05085%;
  float: left;
  margin-right: 1.69492%;
}

专业词释义

isolate 布局

针对不同浏览器对小数点的四舍五入处理修正,如图:

Susy 2 教程 — 入门篇
输入图片说明

gutter , row , container

沟,行,全局

Susy 2 教程 — 入门篇
输入图片说明

设置篇

默认配置

$susy 是 Susy载入后自动读取的一个全局配置变量。

$susy: (
  // 从左至右
  flow: ltr,
  // 可选值: fluid | static , 网格的计算单位,fluid是百分号%,static是作用域的倍数em                    
  math: fluid,                       
  // 可选值: float | isolate, float是浮动形式,不解释,isolate是一种百分比溢出的修复.
  // 详细看http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
  output: float,
  // 可选值:before | after | split | inside | inside-static , 
  // before,after对应margin-right,margin-left,
  // split是padding-left&padding-right,
  // inside-static也是padding,但是单位是px,                    
  gutter-position: after,      
  // 可选值: <length> | auto , 总区域宽度,auto则以父元素的宽度为值     
  container: auto,                  
  // 可选值: left | center | right | <length> [*2],总区域的水平对齐方式
  container-position: center,        
  // 列数
  columns: 4,                        
  // 沟值
  gutters: .25,                        
  // 可选值:<length> | false/null ,设定每列宽度,这个比较鸡肋,绝大部分情况下不用设置,除非需求奇葩。
  column-width: false,                
  // 可选值:border-box | content-box
  global-box-sizing: content-box,    
  // 可选值:from | to ,建议不要改这个值,当你改成from的时候,last方法将不起作用
  last-flow: to,                    
  // debug,通过gradient制作的背景grid条,很棒的debug工具
  debug: (                            
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  // 自定义 mixins
  use-custom: (                     
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

Layout [function/mixin]

可以转换map配置,有 mixinfunction 两种用法:

function 用法

  • Format: layout($layout)
  • $layout: <layout>
// input
$map: layout(auto 12 .25 inside fluid isolate);

// 终端打印一下
@debug $map;

//output
$map: (
  container: auto,
  columns: 12,
  gutters: .25,
  gutter-position: inside,
  math: fluid,
  output: isolate,
);

mixin 用法

  • Format: layout($layout, $clean)
  • $layout: <layout>
  • $clean: <boolean>
@include layout(12 1/4);
// 默认情况下,这些新设置将添加到现有的全局设置中。使用$clean参数从头建立新的设置。

With-layout [mixin]

可以通过此mixin设置多个栅格系统,而互相之间不冲突。

  • Format: with-layout($layout, $clean) { @content }
  • $layout: <layout>
  • $clean: <boolean>
  • @content: Sass content block
@include with-layout(8 static) {
  // Temporary 8-column static grid...
}

// Global settings are restored...

Susy-Get [function]

获取配置参数

  • Format: susy-get($key, $layout)
  • $key: Setting name
  • $layout: <layout>
$large: layout(80em 24 1/4 inside);
$large-container: susy-get(container, $large);
// debug output : 80em

原创链接: https://github.com/Janking/Blog/issues/1


以上所述就是小编给大家介绍的《Susy 2 教程 — 入门篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5与CSS3基础教程(第8版)

HTML5与CSS3基础教程(第8版)

[美] Elizabeth Castro、[美] Bruce Hyslop / 望以文 / 人民邮电出版社 / 2014-5 / 69.00元

本书是风靡全球的HTML和CSS入门教程的最新版,至第6版累积销量已超过100万册,被翻译为十多种语言,长期雄踞亚马逊书店计算机图书排行榜榜首。 第8版秉承作者直观透彻、循序渐进、基础知识与案例实践紧密结合的讲授特色,采用独特的双栏图文并排方式,手把手指导读者从零开始轻松入门。相较第7版,全书2/3以上的内容进行了更新,全面反映了HTML5和CSS3的最新特色,细致阐述了响应式Web设计与移......一起来看看 《HTML5与CSS3基础教程(第8版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器