The light Sass library for managing your sizes and dimensions across breakpoints.
@Articles:
How to style modern applications in a simple way?
Installation
npm i sscss
Create your own _core.scss file with imports:
@import 'your-own-variables-and-settings';
@import '~sscss/sscss';
The file should be imported in all components where you will use Sass inheritances (@extend).
Settings
In the settings, you can use your own breakpoints in the px unit.
The interpolation key (boolean) in the map is optional and allows overwriting your global settings.
Example of breakpoints:
$mobile: 320px;
$tablet: 768px;
$desktop: 1024px;
Example of required settings:
$sscss-font-size: (
'small': ($mobile: 12px, $tablet: 14px, $desktop: 16px, 'interpolation': true),
'medium': ($mobile: 14px, $tablet: 18px),
'big': ($mobile: 24px),
);
$sscss-dimension: (
'small': ($mobile: 4px, $tablet: 8px, $desktop: 16px, 'interpolation': true),
'medium': ($mobile: 8px, $desktop: 32px),
'big': ($mobile: 16px, $tablet: 32px, 'interpolation': false),
);
In the app you can use:
- the
@extendapproach allows you avoid styles generated outside your components. - the
.classapproach allows you to generate small global utility classes. - the linear interpolation or standard breakpoint behaviors.
Example of optional global settings:
$sscss-font-interpolation: false;
$sscss-font-as-class: false;
$sscss-dimension-interpolation: false;
$sscss-dimension-as-class: false;
| Variable | Description | Default |
|---|---|---|
$sscss-font-interpolation |
Settings for linear interpolation. | false |
$sscss-font-as-class |
Settings for .class or @extend approach. |
false |
$sscss-dimension-interpolation |
Settings for linear interpolation. | false |
$sscss-dimension-as-class |
Settings for .class or @extend approach. |
false |
Usage
Fonts
Name is generated based on a $sscss-font-size variable.
| Extensions | Class |
|---|---|
@extend %u-font-size--{name} |
.u-font-size--{name} |
Paddings
Name is generated based on a $sscss-dimension variable.
| Extension | Class | Description |
|---|---|---|
@extend %u-padding--{name} |
.u-padding--{name} |
Padding top, right, bottom, left |
@extend %u-padding--top-{name} |
.u-padding--top-{name} |
Padding top |
@extend %u-padding--right-{name} |
.u-padding--right-{name} |
Padding right |
@extend %u-padding--bottom-{name} |
.u-padding--bottom-{name} |
Padding bottom |
@extend %u-padding--left-{name} |
.u-padding--left-{name} |
Padding left |
@extend %u-padding--v-{name} |
.u-padding--v-{name} |
Padding top, bottom (vertical) |
@extend %u-padding--h-{name} |
.u-padding--h-{name} |
Padding right, left (horizontal) |
Margins
Name is generated based on a $sscss-dimension variable.
| Extension | Class | Description |
|---|---|---|
@extend %u-margin--{name} |
.u-margin--{name} |
Margin top, right, bottom, left |
@extend %u-margin--top-{name} |
.u-margin--top-{name} |
Margin top |
@extend %u-margin--right-{name} |
.u-margin--right-{name} |
Margin right |
@extend %u-margin--bottom-{name} |
.u-margin--bottom-{name} |
Margin bottom |
@extend %u-margin--left-{name} |
.u-margin--left-{name} |
Margin left |
@extend %u-margin--v-{name} |
.u-margin--v-{name} |
Margin top, bottom (vertical) |
@extend %u-margin--h-{name} |
.u-margin--h-{name} |
Margin right, left (horizontal) |
@extend %u--margin--{name} |
.u--margin--{name} |
Negative value of margin top, right, bottom, left |
@extend %u--margin--top-{name} |
.u--margin--top-{name} |
Negative value of margin top |
@extend %u--margin--right-{name} |
.u--margin--right-{name} |
Negative value of margin right |
@extend %u--margin--bottom-{name} |
.u--margin--bottom-{name} |
Negative value of margin bottom |
@extend %u--margin--left-{name} |
.u--margin--left-{name} |
Negative value of margin left |
@extend %u--margin--v-{name} |
.u--margin--v-{name} |
Negative value of margin top, bottom (vertical) |
@extend %u--margin--h-{name} |
.u--margin--h-{name} |
Negative value of margin right, left (horizontal) |
Positions
Name is generated based on a $sscss-dimension variable.
| Extension | Class | Description |
|---|---|---|
@extend %u-position--{name} |
.u-position--{name} |
Position top, right, bottom, left |
@extend %u-position--top-{name} |
.u-position--top-{name} |
Position top |
@extend %u-position--right-{name} |
.u-position--right-{name} |
Position right |
@extend %u-position--bottom-{name} |
.u-position--bottom-{name} |
Position bottom |
@extend %u-position--left-{name} |
.u-position--left-{name} |
Position left |
@extend %u-position--v-{name} |
.u-position--v-{name} |
Position top, bottom (vertical) |
@extend %u-position--h-{name} |
.u-position--h-{name} |
Position right, left (horizontal) |
@extend %u--position--{name} |
.u--position--{name} |
Negative value of position top, right, bottom, left |
@extend %u--position--top-{name} |
.u--position--top-{name} |
Negative value of position top |
@extend %u--position--right-{name} |
.u--position--right-{name} |
Negative value of position right |
@extend %u--position--bottom-{name} |
.u--position--bottom-{name} |
Negative value of position bottom |
@extend %u--position--left-{name} |
.u--position--left-{name} |
Negative value of position left |
@extend %u--position--v-{name} |
.u--position--v-{name} |
Negative value of position top, bottom (vertical) |
@extend %u--position--h-{name} |
.u--position--h-{name} |
Negative value of position right, left (horizontal) |
Author
|
Sebastian Musiaล |