@organicss/scss v1.2.0

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(...);
}

Border Radius

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

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

Layout

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

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

Margin

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

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

Padding

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

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

Position

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

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