@organicss/scss

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.

🤖 Installation

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

npm i @organicss/scss

yarn add @organicss/scss

🚀 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);
}

📖 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)