By zhpooer

更新日期:

文章目录
  1. 1. Layout
  2. 2. keyword
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

@import "susy";

body { @include container(80em); }
nav { @include span(25%); }

body {
  @include container;
  @include show-grid(overlay);
}

nav { @include span(3 of 12); }

main {
  float: left;
  width: span(4);
  margin-left: span(2) + gutter();
  margin-right: gutter();
}

nav { @include span(3 of 12); }

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

These two definitions are interchangeable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
);

$shorthand: 12 1/4 fluid float inside;


// 12-column grid
$grid: 12;

// 12-column grid with 1/3 gutter ratio
$grid: 12 1/3;

// 12-column grid with 60px columns and 10px gutters
$grid: 12 (60px 10px);

// asymmetrical grid with .25 gutter ratio
$grid: (1 2 3 2 1) .25;

// globle sets
$susy: (
  flow: ltr,   // rtl | ltr The reading direction of your document. 
  math: fluid,  // static | fluid
                // Susy can produce either relative widths (fluid percentages) or static widths (using given units)
  output: float, 
  gutter-position: after,
  container: auto,  // <length> | auto
  container-position: center,  // left | center | right | <length> [*2]
  columns: 4,     // <number> | <list>
  gutters: .25,   // 70px/10px
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

Layout

A “layout” in Susy is made up of any combination of settings. Layouts are stored as maps, but can also be written as shorthand.

1
2
3
4
5
6
7
8
9
10
11
12

// mixin: set a global layout
@include layout(12 1/4 inside-static);

$map1: 13 static;
$map2: (6em 1em) inside;
@include layout($map1 $map2);

@include with-layout(8 static) {
  // Temporary 8-column static grid...
}

// Global settings are restored...

keyword

The global keywords can be used anywhere, and apply to global default settings. The local keywords are specific to each individual use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$global-keywords: (
  container            : auto,
  math                 : static fluid,
  output               : isolate float,
  container-position   : left center right,
  flow                 : ltr rtl,
  gutter-position      : before after split inside inside-static,
  debug: (
    image              : show hide show-columns show-baseline,
    output             : background overlay,
  ),
);

$local-keywords: (
  box-sizing           : border-box content-box,
  edge                 : first alpha last omega,
  spread               : narrow wide wider,
  gutter-override      : no-gutters no-gutter,
  clear                : break nobreak,
  role                 : nest,
);

// grid: (columns: 4, gutters: 1/4, column-width: 4em);
// keywords: (math: fluid, gutter-position: inside-static, flow: rtl);
$small: 4 (4em 1em) fluid inside-static rtl;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

// span: 3;
// location: 4;
// layout: (columns: 12, gutters: .25, math: fluid)
$span: 3 at 4 of 12 .25 fluid;

// Only $span is required in most cases
$span: 30%;


// arbitrary width
.item { @include span(25%); }

// float output (without gutters)
.item {
  float: left;
  width: 25%;
}


// grid span
.item { @include span(3); }

// output (7-column grid with 1/2 gutters after)
.item {
  float: left;
  width: 40%;
  margin-right: 5%;
}


// grid span
@include span(last 3);

// output (same 7-column grid)
.item {
  float: right;
  width: 40%;
  margin-right: 0;
}

// 10-column grid
.outer {
  @include span(5);
  .inner { @include span(2 of 5); }
}


// Grids with inside, inside-static, or split gutters don’t need to worry about the edge cases, but they do have to worry about nesting.
// If an element will have grid-aligned children, you should mark it as a nest:
.outer {
  @include span(5 nest);
  .inner { @include span(2 of 5); }
}


// grid span
.narrow { @include span(2); }
.wide { @include span(2 wide); }
.wider { @include span(2 wider); }

// width output (7 columns, .25 gutters)
// (each column is 10%, and each gutter adds 2.5%)
.narrow { width: 22.5%; }
.wide { width: 25%; }
.wider { width: 27.5%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

body {
  @include container(12 center static);
}

// inside gutters
.item { @include gutters(3em inside); }

// gutters after, in an explicit (10 1/3) layout context
.item { @include gutters(10 1/3 after); }

// default context
margin-left: gutter();

// nested in a 10-column context
margin-left: gutter(10);

.item {
  width: span(2);
  margin-left: span(3 wide);
  margin-right: span(1) + 25%;
}


// the flexible version:
@include global-box-sizing(border-box);

// the shortcut:
@include border-box-sizing;

.first { @include first; }
.last { @include full; }


//  depending on the flow direction.
.example1 { @include pre(25%); }
.example2 { @include push(2 of 7); }

.example1 { @include post(25%); }
.example2 { @include post(2 of 7); }

.example1 { @include pull(25%); }
.example2 { @include pull(2 of 7); }

// equal pre and post
.example1 { @include squish(25%); }

// distinct pre and post
.example2 { @include squish(1, 3); }

.example1 { @include prefix(25%); }
.example2 { @include prefix(2 of 7); }

.example1 { @include suffix(25%); }
.example2 { @include suffix(2 of 7); }

// equal pre and post
.example1 { @include pad(25%); }

// distinct pre and post
.example2 { @include pad(1, 3); }

// input
// Apply negative margins and equal positive padding, so that element
// borders and backgrounds “bleed” outside of their containers, without the content be affected.
.example1 { @include bleed(1em); }
.example2 { @include bleed(1em 2 20px 5% of 8 .25); }

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

.example2 {
  margin-top: -1em;
  padding-top: 1em;
  margin-right: -22.5%;
  padding-right: 22.5%;
  margin-bottom: -20px;
  padding-bottom: 20px;
  margin-left: -5%;
  padding-left: 5%;
  }

// input
.example { @include bleed-x(1em 2em); }

// output
.example {
  margin-left: -1em;
  padding-left: 1em;
  margin-right: -2em;
  padding-right: 2em;
}


// input
.mixin { @include isolate(25%); }

// output
.mixin {
  float: left;
  margin-left: 25%;
  margin-right: -100%;
}


// each img will span 3 of 12 columns,
// with 4 images in each row:
.gallery img {
  @include gallery(3 of 12);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

@include susy-breakpoint(30em, 8) {
  // nested code uses an 8-column grid,
  // starting at a 30em min-width breakpoint...
  .example { @include span(3); }
}


// 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-media: (
  min: 20em,
  max: 80em 60em,
  string: 'screen and (orientation: landscape)',
  pair: min-height 40em,
  map: (
    media: screen,
    max-width: 30em
  ),
);

@include susy-media(min);
文章目录
  1. 1. Layout
  2. 2. keyword