Skip to content

Instantly share code, notes, and snippets.

@teabyii teabyii/about-susy.md
Last active Oct 30, 2015

Embed
What would you like to do?
About Susy

关于 Susy

Susy 官方网站

开始使用

Susy 是一个用于创建自定义布局结构的 css 工具集合,它并不提供现成的 className 来给你使用,而是提供 sass 的 function/mixins 来帮助你创建页面的布局结构。

Susy 作为一个 sass 工具库,使用的时候 @import 进来便是,可以使用 npm/bower 来下载。

Susy 的配置

Susy 提供了多种方法来进行配置,可以使用 sass 的 map 结构,或者使用简单的缩写(类似函数传参)。

$susy: (
  column: 10,
  gutters: 1/5,
);

$shorthand: 10 1/5;

本身 Susy 是提供了默认的配置的,参考 Susy default settings

我们来看下每个配置项的作用:

  • flow [ rtl | ltr ]

    文档流的方向,最直接的影响便是 float: right | left。默认值是 left

  • math [ fluid | static ]

    使用百分比或者指定的长度单位。 fluid 的话,相对于容器的百分比,如果是 static 的话,会以 column-width 的设置来计算,假设 column-width 是 4em,那么便以 em 为长度单位。

  • output [ float | isolate ]

    这个基本都是 float 了,想要了解更多,请点击 sub-pixel rounding

  • container [ length | auto ]

    容器元素的最大宽度,auto 的话则使用 100%。

  • container-position [ left | center | right | length [*2] ]

    容器元素的位置,每一个的影响简单如下:

    margin-left: 0; margin-right: auto; // left
    margin-left: auto; margin-right: 0; // center
    margin-left: auto; margin-right: 0; // right
    margin-left: length; margin-right: length | length2
  • Columns [ number | list ]

    布局的行数,如果是一个数字,则均分,如果是一个列表,则除以总和后按照各自权重计算。

    // columns: (1 2 3 4)
    .box1 { @include span(1) } // width: 10%
    .box2 { @include span(3) } // width: 60%
  • gutters [ ratio ]

    单元格之间的间隔,相对于每一列的宽度(注意 width 的计算方式,随着 box-sizing 的值不一样输出也会不一样,切记是相对于内容宽度,而非是元素宽度)

    // columns: 10
    // gutters: 1/4
    // border-box
    .box { @include span(1) } // width: 10%; padding-left: 1%; padding-right: 1%;
  • column-width [ length | false | null ]

    列的宽度,当 math 为 fluid 时,这个值为单元格的最大宽度,当 math 为 static 时,这个值为单元格的宽度。fluid 布局时这个设置不一定需要。

  • gutter-position [ before | after | split | inside | inside-static ]

    设置间隔的位置。before / after / split 都是使用 margin,方向不同,split 是两边分别设置,而 inside 则是使用 padding,两边都设置,inside-static 的区别只是使用静态单位。 还有一点是,before / after 会清理 头 / 尾 的间隔,但是其他的并不会处理。

  • global-box-sizing [ border-box | content-box ]

    默认是 content-box,也就是浏览器的设置,susy 的宽度计算会使用 border-box 的模型,也就是默认的时候,会帮你给各个使用 mixins 的代码加上 box-sizing: border-box

    如果你设置为 border-box,susy 则认为你自己会在 css 中进行 box-sizing 的配置,全局应用 border-box。

  • last-flow [ from | to ]

    使用 float output 时,最后一个元素的 float 设置。

  • box-sizing [ border-box | content-box ]

    这个设置区别于 global-box-sizing 在于它是选择在应用 Susy 提供的 mixins 的元素使用哪个设置。

  • gutter-override [ no-gutters / no-gutter | length ]

    gutter 的自定义,可以设置 no-gutters 来移除 gutter 的输出,或者设置 gutters 的宽度。

还有一些 debug 配置项,这里就不多聊,详细可以参考 Susy 的 debug 配置

Susy 支持使用自定义的一些 Mixins,在 use-custom 中进行配置:

use-custom: (
  background-image: true,
  background-options: false,
  box-sizing: true,
  clearfix: false,
  rem: true,
)

通过这些配置可以让 Susy 查找是否有对应的 Mixins 可用,true 的话则是使用用户自己定义的 Mixins,这样可以更好和一些框架结合,例如 compass 等。详细参考 Susy 的 use-custom

Susy 提供了一些简单的方法来进行相关的配置,具体参见 Susy 的 Shorthand,这一部分更多是一个配置的辅助作用,不做详细阐述。

Susy 提供的工具集

上边那一堆配置有什么用,主要还是提现在工具集这里,利用 Susy 提供的工具集合,可以自由,简单得来写出自己的布局结构。

span

结合配置,可以提供单元格的布局样式,也可以传入特定的宽度,在行边缘的时候也可以控制间隔。

.box1 { @include span(1); } // float: left; width: 25%; ...
.box2 { @include span(20%); } // ... width: 20% ...
.box3 { @include span(last 3); } // float: right; width: 40%; margin-right: 0 ...

关于 span,有个 context 的概念,如上,则是相对于全局的 container 来说,但是:

.outer {
  @include span(5);
  .inner {
    @include span(2 of 5); // 40%
  }
}

.outer {
  @include span(5) {
    .inner {
      @include span(2); // 40%
    }
  }
}

如果放在 span mixin 的 block 中,则会以外层宽度为 context 来处理,不再是全局的。

span 第二个参数可以传入 nest,来说明里边会嵌套使用 span,来消除外层的 gutter。

span 除了作为 mixin 来 output 元素的布局 css 外,还可以作为 function 来获取布局的宽度。如:

.item { width: span(2); }

span 还有其他参数,更多的内容还是参考:Susy 的 span 使用

gutters/gutter

gutters 作为 mixin 使用,可以单纯获取当前配置的 gutter css 代码。

作为 function 使用,即可获取 gutter 的宽度,和 span() 类似。

通常为了保持多个元素的间隔相同,但是又不需要使用 span 时,便可以使用 gutters。

container

布局的容器,通常在外层的元素使用,生成容器需要的代码,如:

.wrap {
  @include container();
}

container 也可以作为 function 来使用,获取容器的宽度。

nested

span 的时候提到 context 的概念,可以使用 of 来弥补,但是如果是多个元素的话,一个个写 of 也是麻烦,所以有了 nested。

@include nested(8) {
  .span { @include span(3); }
  .box { @include span(2); }
  ...
}

当 nested 作为 function 使用时,可以用于返回一个 context。

global-box-sizing

很简单地,就是设置 box-sizing,大部分情况可以和 span 结合使用即可:@include span(25em border-box);

Rows & Edges

Susy 提供了一系列处理行和边缘的单元格的工具。

  • break

    我们需要创建新的一行时,需要清理掉浮动,可以使用 break。如:.new-line { @include break; }

  • first

    用于标识当前元素为行的第一个,会输出对应的 gutter 设置,只有当 gutter-position 为 before 的时候才会生效。

  • last

    和上边类似,只不过是改成了最后一个而已

  • full

    一个缩写,等同于 span(full),元素充满整行。

Margins & Paddings

用于设置单元格相关的 Margin 和 Padding。

Margins

  • pre

    在元素前添加 margin,如:.box { @include pre(2 of 7); }

  • post

    在元素后添加 margin,类似 pre,.box { @include post(2 of 7); }

  • pull

    在元素前添加负的 margin:.box { @include pull(2 of 7); }

  • squish

    同时使用 pre 和 post 的简写:

    .box { @include squish(2 of 10); } // 不同的话可以这样:@include squish(2, 3);
    // =>
    .box {
      @include pre(2 of 10);
      @include post(2 pf 10);
    }

Paddings

这一部分的和 margin 的很像,只是少了一个负的添加。

  • prefix

    在元素前添加 padding,.box { @include prefix(2 of 7); }

  • suffix

    在元素后添加 padding,.box { @include suffix(2 of 7); }

  • pad

    同时在元素前后添加 padding 的简写: .box { @include pad(2, 3); }

注意,margins 和 padding 这些 mixins 使用时的前后都是相对于 flow 方向而言的。

bleed

添加相同值的负 margin 和 padding 来让整个元素的 border 和 background 挤出容器外部,而不影响内容。如:

.example1 { @include bleed(1em); }

// =>

.example1 {
  margin: -1em;
  padding: 1em;
}

// 传入多个参数控制不同的方向

.example2 { @include bleed(1em 2 20px 5%); }

bleed-x 和 bleed-y 只是方便控制水平和垂直方向的别名。

Media Query

Susy 提供了一些工具来帮助处理媒体查询。

  • susy-breakpoint

    设置一个断点来调整整个布局的设置,在 mixin 的 block 中添加相关的代码。block 中的代码会放在特定的媒体查询中,如:

    @include susy-breakpoint(30em, 8) {
      .example { @include span(2); }
    }
  • susy-media

    提供了一个简单的 mixin 来处理媒体查询的相关条件。详细参考代码:

    // min
    // ---
    @include susy-media(30em) { /*...*/ }
    
    @media (min-width: 30em) { /*...*/ }  
    
    // min/max pair
    // ------------
    @include susy-media(30em 60em) { /*...*/ }  
    
    @media (min-width: 30em) and (max-width: 60em) { /*...*/ }  
    
    // property/value pair
    // -------------------
    @include susy-media(min-height 30em) { /*...*/ }  
    
    @media (min-height: 30em) { /*...*/ }
    
    // map
    // ---
    @include susy-media((
      min-height: 30em,
      orientation: landscape,
    )) { /*...*/ }  
    
    @media (min-height: 30em) and (orientation: landscape) { /*...*/ }

    个人建议使用上述最后一种,看起来清晰明确。

个人想法

当你页面的布局格式相对比较复杂,同时可能需要进行响应式的设计时,Susy 不失为一个好选择。

和其他响应式不同,Susy 有超强的自由性,可以很好地针对自身的业务去进行设计和开发。使用方便的同时,在布局方面,代码整体有一个统一的风格,维护上也会舒服很多。

结合 Susy,可以进一步定制符合自身业务的很多 mixin 来进一步提升开发的效率。

当然,布局和结构比较简单的页面便不建议使用了,开发者能够更好把握自己的样式代码,并且省去学习成本。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.