Mixins

The postcssSugarPlugin gives you access to a tone of useful mixins that can help you stay more coherent and clean in your css files. Here's a list of available mixins:

Available Mixins

Here's all the available mixins that are built-in the @coffeekraken/s-postcss-sugar-plugin plugin.

Others mixins can be available when installing packages like:

• @coffeekraken/s-code-example-component: Expose the mixin @sugar.ui.codeExample.classes.
• @coffeekraken/s-color-picker-component: Expose the mixin @sugar.ui.colorPicker.classes.
• Etc...

See each components packages documentation for more info on "external" mixins.

• @sugar.align.abs(...);

• @sugar.autoload(...);

• @sugar.border.classes(...);

• @sugar.border.radius(...);

• @sugar.border.width(...);

• @sugar.cache(...);

• @sugar.(...);

• @sugar.clearfix.classes(...);

• @sugar.clearfix(...);

• @sugar.color.accent(...);

• @sugar.color.classes(...);

• @sugar.color(...);

• @sugar.color.complementary(...);

• @sugar.color.current(...);

• @sugar.color.docblocks(...);

• @sugar.color.remap(...);

• @sugar.components.classes(...);

• @sugar.container.classes(...);

• @sugar.container(...);

• @sugar.cursor.classes(...);

• @sugar.depth.classes(...);

• @sugar.depth(...);

• @sugar.direction.rtl(...);

• @sugar.disabled.classes(...);

• @sugar.disabled(...);

• @sugar.display.classes(...);

• @sugar.filter.noise(...);

• @sugar.fit.classes(...);

• @sugar.fit(...);

• @sugar.flex.classes(...);

• @sugar.float.classes(...);

• @sugar.font.classes(...);

• @sugar.font.faces(...);

• @sugar.font.family(...);

• @sugar.font.size(...);

• @sugar.format.classes(...);

• @sugar.format.text(...);

• @sugar.gap.classes(...);

• @sugar.gradient.classes(...);

• @sugar.gradient(...);

• @sugar.gradient.text(...);

• @sugar.grid.classes(...);

• @sugar.group.classes(...);

• @sugar.height.classes(...);

• @sugar.hide.classes(...);

• @sugar.highlightjs.theme(...);

• @sugar.icon.classes(...);

• @sugar.icon.fa(...);

• @sugar.icon.fa.brands(...);

• @sugar.icon.fa.solid(...);

• @sugar.icon.fs(...);

• @sugar.icon.sugar(...);

• @sugar.import(...);

• @sugar.init(...);

• @sugar.layout.classes(...);

• @sugar.layout(...);

• @sugar.link.classes(...);

• @sugar.link.stretch(...);

• @sugar.lnf.base(...);

• @sugar.lnf.selection(...);

• @sugar.lod.keep(...);

• @sugar.lod(...);

• @sugar.lod.log(...);

• @sugar.lod.only(...);

• @sugar.lod.prevent(...);

• @sugar.lod.when(...);

• @sugar.margin.classes(...);

• @sugar.media.classes(...);

• @sugar.media(...);

• @sugar.offsize.classes(...);

• @sugar.opacity.classes(...);

• @sugar.order.classes(...);

• @sugar.outline(...);

• @sugar.outline.outlineWhen(...);

• @sugar.outline.when(...);

• @sugar.overflow.classes(...);

• @sugar.padding.classes(...);

• @sugar.partial(...);

• @sugar.platform.classes(...);

• @sugar.platform(...);

• @sugar.pointer.classes(...);

• @sugar.position.classes(...);

• @sugar.ratio.classes(...);

• @sugar.ratio(...);

• @sugar.reset.destyle(...);

• @sugar.reset(...);

• @sugar.reset.sugar(...);

• @sugar.rhythm.vertical(...);

• @sugar.scale.classes(...);

• @sugar.scale.global(...);

• @sugar.scale(...);

• @sugar.scope.disable(...);

• @sugar.scope.no(...);

• @sugar.scope.prevent(...);

• @sugar.scrollbar.classes(...);

• @sugar.scrollbar.hide(...);

• @sugar.scrollbar(...);

• @sugar.shadow.gradient(...);

• @sugar.shape.classes(...);

• @sugar.shape(...);

• @sugar.spacing.classes(...);

• @sugar.state.active(...);

• @sugar.state.disabled(...);

• @sugar.state.focus(...);

• @sugar.state.hover(...);

• @sugar.text.classes(...);

• @sugar.theme(...);

• @sugar.theme.when(...);

• @sugar.transition.classes(...);

• @sugar.transition(...);

• @sugar.truncate.classes(...);

• @sugar.truncate(...);

• @sugar.typo.classes(...);

• [@sugar.ui.avatar copy.avatar(...);](/api/@coffeekraken.s-postcss-sugar-plugin.node.mixin.ui.avatar copy.avatar)

• [@sugar.ui.avatar copy.classes(...);](/api/@coffeekraken.s-postcss-sugar-plugin.node.mixin.ui.avatar copy.classes)

• @sugar.ui.avatar(...);

• @sugar.ui.avatar.classes(...);

• @sugar.ui.backdrop(...);

• @sugar.ui.backdrop.classes(...);

• @sugar.ui.badge(...);

• @sugar.ui.badge.classes(...);

• @sugar.ui.base(...);

• @sugar.ui.blockquote(...);

• @sugar.ui.blockquote.classes(...);

• @sugar.ui.button(...);

• @sugar.ui.button.classes(...);

• @sugar.ui.checkbox(...);

• @sugar.ui.checkbox.classes(...);

• @sugar.ui.classes(...);

• @sugar.ui.dropdown.classes(...);

• @sugar.ui.dropdown(...);

• @sugar.ui.fsTree.classes(...);

• @sugar.ui.fsTree(...);

• @sugar.ui.input.classes(...);

• @sugar.ui.input(...);

• @sugar.ui.inputContainer.classes(...);

• @sugar.ui.inputContainer(...);

• @sugar.ui.label.classes(...);

• @sugar.ui.label(...);

• @sugar.ui.list.classes(...);

• @sugar.ui.list(...);

• @sugar.ui.loader.classes(...);

• @sugar.ui.loader.drop(...);

• @sugar.ui.loader.round(...);

• @sugar.ui.loader.spinner(...);

• @sugar.ui.loader.squareDots(...);

• @sugar.ui.media.classes(...);

• @sugar.ui.media(...);

• @sugar.ui.radio.classes(...);

• @sugar.ui.radio(...);

• @sugar.ui.range.classes(...);

• @sugar.ui.range(...);

• @sugar.ui.select.classes(...);

• @sugar.ui.select(...);

• @sugar.ui.switch.classes(...);

• @sugar.ui.switch(...);

• @sugar.ui.table.classes(...);

• @sugar.ui.table(...);

• @sugar.ui.tabs.classes(...);

• @sugar.ui.tabs(...);

• @sugar.ui.toggle.classes(...);

• @sugar.ui.toggle(...);

• @sugar.ui.tooltip.classes(...);

• @sugar.ui.tooltip(...);

• @sugar.until.classes(...);

• @sugar.until.mounted(...);

• @sugar.userSelect.classes(...);

• @sugar.utils.configToCss(...);

• @sugar.visibility.classes(...);

• @sugar.visibility.hidden(...);

• @sugar.visually.classes(...);

• @sugar.visually.hidden(...);

• @sugar.when.classes(...);

• @sugar.when(...);

• @sugar.whiteSpace.classes(...);

• @sugar.width.classes(...);

• @sugar.wireframe.background(...);

• @sugar.wireframe.border(...);

• @sugar.wireframe.image(...);

• @sugar.wireframe.surface(...);

• @sugar.wireframe(...);