SCSS.Mixin.Modifiers

Package for integrating SCSS.Mixins.Modifiers in a web environment.

Installation

This package can be deployed automatically using NPM:

npm i @bu0nq/scss.mixin.modifiers

Usage

@use "@bu0nq/scss.mixin.modifiers/modifiers";

or

@use "@bu0nq/scss.mixin.modifiers/variables" with (
  $is-modifier: true,
  $is-class-modifier: true,
  $is-class-modifier-rounded: true,
  $is-class-modifier-size: true,
  $is-data-modifier: true,
  $is-data-modifier-rounded: true,
  $is-data-modifier-size: true
);

@use "@bu0nq/scss.mixin.modifiers/modifiers";

Examples

.example {
    @include modifiers.rounded-base {
        border-radius: 12px;
    }
}

.example_rounded-base {
    border-radius: 12px;
}

.example {
    @include modifiers.rounded-base(true) {
        border-radius: 12px;
    }
}

.example_rounded-base {
    border-radius: 12px;
}

.example[data-modifier-rounded="base"] {
    border-radius: 12px;
}

Rounded

Modifiers for changing the rounding of a block or element.

| Mixin Name | Additional mixins | Class Modifier | Data Modifier (Optional) | |--------------|------------------------------------------|----------------|-------------------------------| | rounded-auto | class-rounded-autodata-rounded-auto | _rounded-auto | data-modifier-rounded="auto" | | rounded-none | class-rounded-nonedata-rounded-none | _rounded-none | data-modifier-rounded="none" | | rounded-xs | class-rounded-xsdata-rounded-xs | _rounded-xs | data-modifier-rounded="xs" | | rounded-sm | class-rounded-smdata-rounded-sm | _rounded-sm | data-modifier-rounded="sm" | | rounded-md | class-rounded-mddata-rounded-md | _rounded-md | data-modifier-rounded="md" | | rounded-base | class-rounded-basedata-rounded-base | _rounded-base | data-modifier-rounded="base" | | rounded-lg | class-rounded-lgdata-rounded-lg | _rounded-lg | data-modifier-rounded="lg" | | rounded-xl | class-rounded-xldata-rounded-xl | _rounded-xl | data-modifier-rounded="xl" | | rounded-xxl | class-rounded-xxldata-rounded-xxl | _rounded-xxl | data-modifier-rounded="xxl" |

Size

Modifiers for changing the size of a block or element.

| Mixin Name | Additional mixins | Class Modifier | Data Modifier (Optional) | |------------|------------------------------------|----------------|---------------------------| | size-xs | class-size-xsdata-size-xs | _size-xs | data-modifier-size="xs" | | size-sm | class-size-smdata-size-sm | _size-sm | data-modifier-size="sm" | | size-md | class-size-mddata-size-md | _size-md | data-modifier-size="md" | | size-base | class-size-basedata-size-base | _size-base | data-modifier-size="base" | | size-lg | class-size-lgdata-size-lg | _size-lg | data-modifier-size="lg" | | size-xl | class-size-xldata-size-xl | _size-xl | data-modifier-size="xl" | | size-xxl | class-size-xxldata-size-xxl | _size-xxl | data-modifier-size="xxl" |

Type

Modifiers for changing the type of block or element.

| Mixin Name | Additional mixins | Class Modifier | Data Modifier (Optional) | |---------------|-------------------------------------------|----------------|-------------------------------| | type-default | class-type-defaultdata-type-default | _type-default | data-modifier-type="default" | | type-fill | class-type-filldata-type-fill | _type-fill | data-modifier-type="fill" | | type-outline | class-type-outlinedata-type-outline | _type-outline | data-modifier-type="outline" | | type-text | class-type-textdata-type-text | _type-text | data-modifier-type="text" |

State

Modifiers for changing the state of a block or element.

| Mixin Name | Class Modifier | |-------------|----------------| | is-active | _is-active | | is-current | _is-current | | is-disabled | _is-disabled | | is-hidden | _is-hidden | | is-hide | _is-hide | | is-invalid | _is-invalid | | is-open | _is-open |