Package Name:

scss-utilitys

Description:

Helper SCSS Utility Functions/mixins/utilities etc

Author

Srikar Phani Kumar Marti

Version

1.0.2

License

MIT

Repository

GitHub Repository

Installation

You can install the package using npm or yarn:

npm install scss-utilitys

or

yarn add scss-utilitys

Importing

@import '~scss-utilitys';

Files

@include mobile-only {
    background-color: red;
}

@include tablet-only {
    background-color: green;
}

@include desktop-only {
    background-color: blue;
}

@include large-desktop-only {
    background-color: yellow;
}

@include extra-large-desktop-only {
    background-color: purple;
}

@include mobile-up {
    font-size: 14px;
}

@include tablet-up {
    font-size: 16px;
}

@include desktop-up {
    font-size: 18px;
}

@include large-desktop-up {
    font-size: 20px;
}

@include extra-large-desktop-up {
    font-size: 22px;
}

@include mobile-down {
    padding: 10px;
}

@include tablet-down {
    padding: 20px;
}

@include desktop-down {
    padding: 30px;
}

@include large-desktop-down {
    padding: 40px;
}

@include extra-large-desktop-down {
    padding: 50px;
}

}

Animations (as simple classes)

<div class="animated bounce">Bouncing Text</div>
<div class="animated spin">Spinning Image</div>
<div class="animated fade-in">Fading Element</div>
<div class="animated pulse">Pulsing Element</div>
<div class="animated shake">Shaking Element</div>
<div class="animated slide-in">Sliding In Element</div>
<div class="animated zoom-in">Zooming In Element</div>