Lego-scss NPM | npm.io

lego-scss

Building blocks for your scss code - Basic functions to increase reusability of code

Installation

Run npm install lego-scss
Include in your main scss file by @import "lego-scss";

Usage

- Common functions

font-face: Initialize font-family, font-size, font-weight, font-style and color

@include font-face(font-size, color, font-weight, font-style, font-family)

All params are optional. If null is sent for any variable, it will fall back to "inherit"

positioning - Align left, right, top, bottom or center

@include positioning(left/right/center, top/center/bottom)

center-block - Align a block element at the center

@include center-block

Allow centering of a block element

background-gradient - Apply a background gradient by specifying the start color, end color and orientation

@include background-gradient(start-color, end-color, horizontal/vertical)

ellipsis - Truncate a text and show ellipsis

@include ellipsis(max-width)

- Responsiveness

for-phone-only: < 600px
for-tablet-portrait-up: >=600px
for-tablet-landscape-down: <=767px
for-tablet-landscape-up: >=767px
for-desktop-down: <=991px
for-desktop-up: >=992px
for-big-desktop-down: <=1199px
for-big-desktop-up: >=1200px
width-less-than($size): <=$size
width-more-than($size): >=$size
width-in-between($minSize, $maxSize): <=$minSize and >=$maxSize

- Common Shapes

Square

@include scss-square(size, color)

Cirlces

@include scss-circle(size, color)

Triangles

@include scss-triangle(size1, size2, direction, color)

The direction which the triangle is pointing can be - up/bottom/left/right/top-left/top-right/bottom-left/bottom-right

Examples

.foo {
  font-size: 2rem;
  @include for-tablet-landscape-down {
    font-size: 1.2rem;
  }
  @include for-mobile-only {
    font-size: 1rem
  }
}
.foo1 {
  @include width-more-than(1200px) {
    width: 80%;
  }
  @include width-in-between(601px, 1199px) {
    width: 90%;
  }
  @include width-less-than(600px) {
    width: 100%;
  }
}

will transform to

.foo {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .foo {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 600px) {
  .foo {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  .foo1 {
    width: 80%;
  }
}
@media screen and (min-width: 601px) and (max-width: 1199px) {
  .foo1 {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  .foo1 {
    width: 100%;
  }
}