Tools

• These are just some utility (and fun) tools that you can use to make developing design systems a bit easier :>

Functions

px-to-rem()

px-to-rem({int} $px)

Convert px values to rem.

// Input
.my-selector {
    font-size: sentro.px-to-rem(14px);
}

// Output
.my-selector {
    font-size: 0.875rem;
}

rem-to-px()

rem-to-px({int} $rem)

Convert rem values to px.

// Input
.my-selector {
    font-size: sentro.rem-to-px(0.875rem);
}

// Output
.my-selector {
    font-size: 14px;
}

Mixins

prefix()

prefix({string} $property, {*} $value)

Adds prefixes to your properties.

Value prefixing coming soon ;)

// Input
.my-selector {
    @include sentro.prefix(transition, all 0.1s ease);
}

// Output
.my-selector {
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

elevation-apply()

elevation-apply({int} $z-level, {color} $color, {float} $opacity-boost)

Apply elevation to an element.

// Input
.my-selector {
    @include sentro.elevation-apply(2);
}
// Output
.my-selector {
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.275), 0px 2px 2px 0px rgba(0, 0, 0, 0.215), 0px 1px 5px 0px rgba(0, 0, 0, 0.195);
    -ms-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.275), 0px 2px 2px 0px rgba(0, 0, 0, 0.215), 0px 1px 5px 0px rgba(0, 0, 0, 0.195);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.275), 0px 2px 2px 0px rgba(0, 0, 0, 0.215), 0px 1px 5px 0px rgba(0, 0, 0, 0.195);
}

line-clamp()

line-clamp({int} $lines)

Apply line clamping to an element.

// Input
.my-selector {
    @include sentro.line-clamp(2);
}
// Output
.my-selector {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}