SCSS

The OrganiCSS SCSS package provides a collection of Sass (Syntactically Awesome Style Sheets) mixins to support writing progressively-enhanced logical CSS with. The mixins will generate logical CSS properties first, with fallbacks to catch when not supported.

:robot: Installation

To use OrganiCSS SCSS, first install the package into a SCSS project.

npm i @organicss/scss

yarn add @organicss/scss

:rocket: Getting Started

To use the different OrganiCSS SCSS mixins, first import them into an existing .scss file.

// Import all mixins at once
@import '/node_modules/@organicss/scss';

// Or import a specific mixin at a time.
@import '/node_modules/@organicss/scss/margin';

Using with CSS Custom Properties

@import '/node_modules/@organicss/scss/margin';

.container {
    @include margin($blockStart: var(--space-lg));
}

Using with SCSS Variables

@import '/node_modules/@organicss/scss/margin';

.container {
    $space: var(--space-large);
    @include margin($blockStart: $space);
}

:book: Documentation

Border

@import '/node_modules/@organicss/scss/border';

.container {
    @include border(...);
}

| Prop | Type | CSS Property (Fallback) | | ----------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------- | | $border | - | border | | $borderColor | - | border-color | | $borderStyle | See MDN Docs | border-style | | $borderWidth | - | border-width | | $block | - | border-block-start/end (border-top/bottom) | | $blockColor | - | border-block-start/end-color (border-top/bottom-color) | | $blockStyle | See MDN Docs | border-block-start/end-style (border-top/bottom-style) | | $blockWidth | - | border-block-start/end-width (border-top/bottom-width) | | $blockEnd | - | border-block-end (border-bottom) | | $blockEndColor | - | border-block-end-color (border-bottom-color) | | $blockEndStyle | See MDN Docs | border-block-end-style (border-bottom-style) | | $blockEndWidth | - | border-block-end-width (border-bottom-width) | | $blockStart | - | border-block-start (border-top) | | $blockStartColor | - | border-block-start-color (border-top-color) | | $blockStartStyle | See MDN Docs | border-block-start-style (border-top-style) | | $blockStartWidth | - | border-block-start-width (border-top-width) | | $inline | - | border-inline-start/end (border-left/right) | | $inlineColor | - | border-inline-start/end-color (border-left/right-color) | | $inlineStyle | See MDN Docs | border-inline-start/end-style (border-left/right-style) | | $inlineWidth | - | border-inline-start/end-width (border-left/right-width) | | $inlineEnd | - | border-inline-end (border-right) | | $inlineEndColor | - | border-inline-end-color (border-right-color) | | $inlineEndStyle | See MDN Docs | border-inline-end-style (border-right-style) | | $inlineEndWidth | - | border-inline-end-width (border-right-width) | | $inlineStart | - | border-inline-start (border-left) | | $inlineStartColor | - | border-inline-start-color (border-left-color) | | $inlineStartStyle | See MDN Docs | border-inline-start-style (border-left-style) | | $inlineStartWidth | - | border-inline-start-width (border-left-width) |

Border Radius

@import '/node_modules/@organicss/scss/borderRadius';

.container {
    @include border-radius(...);
}

| Prop | Type | CSS Property (Fallback) | | ------------ | ---- | ----------------------------------------------------- | | $bottomLeft | - | border-end-start-radius (border-bottom-left-radius) | | $bottomRight | - | border-end-end-radius (border-bottom-right-radius) | | $radius | - | border-radius | | $topLeft | - | border-start-start-radius (border-top-left-radius) | | $topRight | - | border-start-end-radius (border-top-right-radius) |

Layout

@import '/node_modules/@organicss/scss/layout';

.container {
    @include layout(...);
}

| Prop | Type | CSS Property (Fallback) | | ------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | $blockSize | - | block-size (height) | | $captionSide | See MDN Docs | caption-side | | $clear | See MDN Docs | clear | | $maxBlockSize | - | max-block-size (max-height) | | $minBlockSize | - | min-block-size (min-height) | | $inlineSize | - | inline-size (width) | | $maxInlineSize | - | max-inline-size (max-width) | | $minInlineSize | - | min-inline-size (min-width) | | $overflow | See MDN Docs | overflow | | $overflowBlock | See MDN Docs | overflow-block (overflow-x) | | $overflowInline | See MDN Docs | overflow-inline (overflow-y) | | $overscrollBehavior | See MDN Docs | overscroll-behavior | | $overscrollBehaviorBlock | See MDN Docs | overscroll-behavior-block (overscroll-behavior-x) | | $overscrollBehaviorInline | See MDN Docs | overscroll-behavior-inline (overscroll-behavior-y) | | $resize | See MDN Docs | resize | | $textAlign | See MDN Docs | text-align | | $textAlignLast | See MDN Docs | text-align-last |

Margin

@import '/node_modules/@organicss/scss/margin';

.container {
    @include margin(...);
}

| Prop | Type | CSS Property (Fallback) | | ------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | $block | - | margin-block-start/end (margin-bottom/top) | | $blockEnd | - | margin-block-end (margin-bottom) | | $blockStart | - | margin-block-start (margin-top) | | $inline | - | margin-inline-start/end (margin-left/right) | | $inlineEnd | - | margin-inline-end (margin-right) | | $inlineStart | - | margin-inline-start (margin-left) | | $margin | - | margin | | $scroll | See MDN Docs | scroll-margin | | $scrollBlock | See MDN Docs | scroll-margin-block-start/end (scroll-margin-top/bottom) | | $scrollBlockEnd | See MDN Docs | scroll-margin-block-end (scroll-margin-bottom) | | $scrollBlockStart | See MDN Docs | scroll-margin-block-start (scroll-margin-top) | | $scrollInline | See MDN Docs | scroll-margin-inline-start/end (scroll-margin-left/right) | | $scrollInlineEnd | See MDN Docs | scroll-margin-inline-end (scroll-margin-right) | | $scrollInlineStart | See MDN Docs | scroll-margin-inline-start (scroll-margin-left) |

Padding

@import '/node_modules/@organicss/scss/padding';

.container {
    @include padding(...);
}

| Prop | Type | CSS Property (Fallback) | | ------------------ | -------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | $block | - | padding-block-start/end (padding-top/bottom) | | $blockEnd | - | padding-block-end (padding-bottom) | | $blockStart | - | padding-block-start (padding-top) | | $inline | - | padding-inline-start/end (padding-left/right) | | $inlineEnd | - | padding-inline-end (padding-right) | | $inlineStart | - | padding-inline-start (padding-left) | | $padding | - | padding | | $scroll | See MDN Docs | scroll-padding | | $scrollBlock | See MDN Docs | scroll-padding-block-start/end (scroll-padding-top/bottom) | | $scrollBlockEnd | See MDN Docs | scroll-padding-block-end (scroll-padding-bottom) | | $scrollBlockStart | See MDN Docs | scroll-padding-block-start (scroll-padding-top) | | $scrollInline | See MDN Docs | scroll-padding-inline-start/end (scroll-padding-left/right) | | $scrollInlineEnd | See MDN Docs | scroll-padding-inline-end (scroll-padding-right) | | $scrollInlineStart | See MDN Docs | scroll-padding-inline-start (scroll-padding-left) |

Position

@import '/node_modules/@organicss/scss/position';

.container {
    @include position(...);
}

| Prop | Type | CSS Property (Fallback) | | ------------ | ------------------------------------------------------------------------------------ | ------------------------------- | | $block | See MDN Docs | inset-block (top/bottom) | | $blockEnd | - | inset-block-end (bottom) | | $blockStart | - | inset-block-start (top) | | $float | See MDN Docs | float | | $inline | See MDN Docs | inset-inline (left/right) | | $inlineEnd | - | inset-inline-end (right) | | $inlineStart | - | inset-inline-start (left) | | $inset | See MDN Docs | inset (top/right/bottom/left) |