危险
重点 请花10分记下这些配置,键是要配置的项目,值是可以设的值
$susy-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,
box-sizing: border-box content-box,
span: full,
edge: first alpha last omega full,
spread: narrow wide wider,
gutter-override: no-gutters no-gutter,
role: nest,
clear: break nobreak,
debug image: show hide show-columns show-baseline,
debug output: background overlay,
);
Susy新的语法中,这个配置可以使用Sass Map来定义 也可以使用 速记语法. 这两种设置的方法是可以交替使用的:
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: inside,
);
$shorthand: 12 1/4 fluid float inside;
Either format can be passed as a single argument to the functions and mixins that make up the Susy language. Maps can even be used as part of the shorthand:
$susy: (
columns: 12,
gutters: .25,
math: fluid,
);
@include layout($susy float inside);
Unless otherwise noted, most settings can be controlled both globally (by setting the site-wide default) or locally (passed to individual functions and mixins).
下面是所有Susy的全局设置项及其默认值:
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 4,
gutters: .25,
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,
)
);
你可以定义自己的全局默认配置, or create individual layout maps to access as needed.
想全局设置,只需定义一个变量 $susy ,格式如下
$susy: (
columns: 12,
gutters: .25,
gutter-position: inside,
)
A “layout” in Susy is made up of any combination of settings. Layouts are stored as maps, but can also be written as shorthand.
Convert shorthand into a map of settings.
Format: | layout($layout) |
---|---|
$layout: | <layout> |
// function input
$map: layout(auto 12 .25 inside fluid isolate);
//output
$map: (
container: auto,
columns: 12,
gutters: .25,
gutter-position: inside,
math: fluid,
output: isolate,
);
This is useful any time you need to combine settings stored in different variables. It’s not possible to combine two shorthand variables:
// THIS WON'T WORK
$short: 12 .25 inside;
@include layout($short fluid no-gutters);
but it is possible to add a map into the shorthand:
// THIS WILL WORK
$map: layout(12 .25 inside);
@include layout($map fluid no-gutters);
or combine two maps:
$map1: 13 static;
$map2: (6em 1em) inside;
@include layout($map1 $map2);
Set a new layout as the global default.
Format: | layout($layout, $clean) |
---|---|
$layout: | <layout> |
$clean: | <boolean> |
// mixin: set a global layout
@include layout(12 1/4 inside-static);
By default, these new settings are added to your existing global settings. Use the $clean argument to establish new settings from scratch.
Temporarily set defaults for a section of your code.
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...
By default, these new settings are added to your existing global settings. Use the $clean argument to establish new settings from scratch.
Format: | susy-get($key, $layout) |
---|---|
$key: | Setting name |
$layout: | <layout> |
You can access your layout settings at any time, using the susy-get function.
$large: layout(80em 24 1/4 inside);
$large-container: susy-get(container, $large);
To access a nested setting like debug/image, send the full path as a list for the $key argument.
$debug-image: susy-get(debug image);
If no setting is available (or no $layout is provided) susy-get falls back to the global user settings, and finally to the Susy default settings.
The reading direction of your document. Layout elements will stack out in the direction of flow, unless otherwise directed.
Key: | flow |
---|---|
Scope: | global, local |
Options: | rtl | ltr |
Default: | ltr |
Susy can produce either relative widths (fluid percentages) or static widths (using given units).
Key: | math |
---|---|
Scope: | global, local |
Options: | fluid | static |
Default: | fluid |
Susy can generate output using different layout techniques. Currently we have a float module, with an extension to handle isolation as well. In the future there could be flexbox, grid, and other output styles.
Key: | output |
---|---|
Scope: | global, local |
Options: | float | isolate |
Default: | float |
Set the max-width of the containing element.
Key: | container |
---|---|
Scope: | global, local [container only] |
Options: | <length> | auto |
Default: | auto |
警告
For static layouts, leave container: auto and set the column-width instead. Susy will calculate the outer container width for you. Dividing columns out of a set container width would leave you open to sub-pixel errors, and no one likes sub-pixel errors.
Align the container relative to it’s parent element (often the viewport).
Key: | container-position |
---|---|
Scope: | global, local [container only] |
Options: | left | center | right | <length> [*2] |
Default: | center |
Establish the column-count and arrangement for a grid.
Key: | columns |
---|---|
Scope: | global, local |
Options: | <number> | <list> |
Default: | 4 |
Set the width of a gutter relative to columns on your grid.
Key: | gutters |
---|---|
Scope: | global, local |
Options: | <ratio> |
Default: | 1/4 |
Gutters are established as a ratio to the size of a column. The default 1/4 setting will create gutters one quarter the size of a column. In asymmetrical grids, this is 1/4 the size of a single column-unit.
If you want to set explicit column and gutter widths, write your gutters setting as <gutter-width>/<column-width>. You can even leave the units attached.
// 70px columns, 20px gutters
$susy: (
gutters: 20px/70px,
);
Optionaly set the explicit width of a column.
Key: | column-width |
---|---|
Scope: | global, local |
Options: | <length> | false/null |
Default: | false |
Set how and where gutters are added to the layout, either as padding or margins on layout elements.
Key: | gutter-position |
---|---|
Scope: | global, local |
Options: | before | after | split | inside | inside-static |
Default: | after |
Tell Susy what box model is being applied globally.
Key: | global-box-sizing |
---|---|
Scope: | global |
Options: | border-box | content-box |
Default: | content-box |
For more, see the MDN box-sizing documentation.
The float-direction for the last element in a row when using the float output.
Key: | last-flow |
---|---|
Scope: | global |
Options: | from | to |
Default: | to |
Susy has a few tools to help in debugging your layout as you work. These settings help you control the debugging environment.
Key: | debug |
---|---|
Scope: | global, local [container only] |
Options: | <map of sub-settings> |
$susy: (
debug: (
image: show,
color: blue,
output: overlay,
toggle: top right,
),
);
警告
Grid images are not exact. Browsers have extra trouble with sub-pixel rounding on background images. These are meant for rough debugging, not for pixel-perfect measurements. Expect the to side of your grid image (right if your flow is ltr) to be off by several pixels.
Toggle the available grid images on and off.
Key: | debug image |
---|---|
Scope: | global, local [container only] |
Options: | show | hide | show-columns | show-baseline |
Default: | hide |
The debug image can be output either as a background on the container, or as a generated overlay.
Key: | debug output |
---|---|
Scope: | global, local [container only] |
Options: | background | overlay |
Default: | background |
If you are using the grid overlay option, Susy will generate a toggle to show/hide the overlay. Hovering over the toggle will show the overlay. You can place the toggle in any corner of the viewport using a combination of top, right, bottom, and left.
Key: | debug toggle |
---|---|
Scope: | global |
Options: | right | left and top | bottom |
Default: | top right |
Change the color of columns in the generated grid image.
Key: | debug color |
---|---|
Scope: | global |
Options: | <color> |
Default: | rgba(#66f, .25) |
There are several common helpers that you can tell Susy to use, if you provide them yourself or through a third-party library like Compass or Bourbon.
Tell Susy to use a global clearfix mixin.
Key: | use-custom clearfix |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | false |
Tell Susy to use a global background-image mixin. This is only used for debugging.
Key: | use-custom background-image |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | true |
Tell Susy to use global background-size, -origin, and -clip mixins. This is only used for debugging.
Key: | use-custom background-options |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | false |
Tell Susy to use a custom breakpoint mixin, like the one provided by the Breakpoint plugin.
Key: | use-custom breakpoint |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | true |
Tell Susy to use a global box-sizing mixin.
Key: | use-custom box-sizing |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | true |
Tell Susy to use the Compass rem support module.
Key: | use-custom rem |
---|---|
Scope: | global |
Options: | <boolean> |
Default: | true |
Reference a specific column on the grid for row edges, isolation, or asymmetrical layouts. Locations keywords don’t require the at flag.
Key: | location |
---|---|
Scope: | local |
Options: | first/alpha | last/omega | <number> |
Default: | null |
Set a new box model on any given element.
Key: | box-sizing |
---|---|
Scope: | local |
Options: | border-box | content-box |
Default: | null |
Adjust how many gutters are included in a column span.
Key: | spread |
---|---|
Scope: | local |
Options: | narrow | wide | wider |
Default: | various... |
Set an explicit one-off gutter-width on an element, or remove its gutters entirely.
Key: | gutter-override |
---|---|
Scope: | local |
Options: | no-gutters/no-gutter | <length> |
Default: | null |
Mark a grid element as a nesting context for child elements.
Key: | role |
---|---|
Scope: | local |
Options: | nest |
Default: | null |
注解
This can be used with any grid type, but it is required for nesting with split, inside, or inside-static gutters.