@stylize/sass-shape

sass-shape

Collection of Sass mixins for creating various shapes

Table of Contents

• Circle
• Ellipse
• Square
• Rectangle
• Triangle

Install

npm install @stylize/sass-shape --save-dev

Other packages

Name	Description	Package
@stylize/sass-func	Func's for general usage
@stylize/sass-mixin	Mixins for general usage

Usage

Mixins can be imported directly from the package or namespace.

@use '~@stylize/sass-shape' as *

Shapes use sass-mixin, so complex size, width and height args can be used.

Circle

Mixin defines the circle with size and color.

@include circle($size: null, $color: null)

Examples

// Radius 50%.
@include circle
// Radius 50%, [eq] width × height.
@include circle(20px)
// Radius 50%, [min] width × height.
@include circle(min 20px)
// Radius 50%, [max] width × height, color.
@include circle(max 20px, #fff)
// Radius 50%, [min] width × height, color.
@include circle($size: min 20px, $color: #fff)
// Radius 50%, [eq, min] width × height, color.
@include circle([auto, min 20px], #fff)
// Radius 50%, [eq, min, max] width × height, color.
@include circle([40px, min 20px, max 50px], #fff)
// Radius 50%, [eq, min, max] width × height, gradient color.
@include circle([40px, min 20px, max 50px], linear-gradient(#fff, #000))

Ellipse

Mixin defines the ellipse with width, height and color.

@include ellipse($width: null, $height: null, $color: null)

Examples

// Radius 50%.
@include ellipse
// Radius 50%, [eq] width.
@include ellipse(20px)
// Radius 50%, [min] width.
@include ellipse(min 20px)
// Radius 50%, [max] width.
@include ellipse($width: max 20px)
// Radius 50%, [min] width, [max] height, color.
@include ellipse(min 10px, max 20px, #fff)
// Radius 50%, [eq, min] width, [max] height, color.
@include ellipse([auto, min 20px], max 20px, #fff)
// Radius 50%, [eq, min] width, [eq, max] height, color.
@include ellipse([40px, min 20px], [20px, max 10px], #fff)
// Radius 50%, [eq, min] width, [eq, max] height, gradient color.
@include ellipse([40px, min 20px], [20px, max 10px], linear-gradient(#fff, #000))

Square

Mixin defines the square with size, radius and color.

@include square($size: null, $radius: null, $color: null)

Examples

// [eq] width × height.
@include square(20px)
// [min] width × height, radius.
@include square(min 20px, 5px)
// [max] width × height, radius, color.
@include square(max 20px, 5px, #fff)
// [min] width × height, radius, color.
@include square($size: min 20px, $radius: 4px, $color: #fff)
// [eq, min] width × height, radius, color.
@include square([auto, min 20px], 5px, #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, color.
@include square([40px, min 20px, max 50px], 5px 4px, #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, color.
@include square([40px, min 20px, max 50px], [5px, 4px], #fff)
// [eq, min, max] width × height, [top-left, bottom-right] radius, gradient color.
@include square([40px, min 20px, max 50px], [5px, 4px], linear-gradient(#fff, #000))

Rectangle

Mixin defines the rectangle with width, height, radius and color.

@include rectangle($width: null, $height: null, $radius: null, $color: null)

Examples

// [min] width.
@include rectangle(min 20px)
// [eq] width, [max] height.
@include rectangle(10px, max 20px)
// [min] width, [eq] height, radius.
@include rectangle(min 10px, 20px, 4px)
// [max] width, [max] height, radius, color.
@include rectangle(max 10px, max 20px, 4px, #fff)
// [eq, min] width, [max] height, radius, color.
@include rectangle([auto, min 20px], max 20px, 4px, #fff)
// [eq] width, [eq] height, [top-left, bottom-right] radius, color.
@include rectangle($width: 10px, $height: 20px, $radius: 4px 3px, $color: #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, color.
@include rectangle([40px, min 20px], [20px, min 10px], 4px 3px, #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, color.
@include rectangle([40px, min 20px], [20px, min 10px], [4px, 3px], #fff)
// [eq, min] width, [eq, min] height, [top-left, bottom-right] radius, gradient color.
@include rectangle([40px, min 20px], [20px, min 10px], [4px, 3px], linear-gradient(#fff, #000))

Triangle

Mixin defines the triangle with direction, color, width and height.

@include triangle($direction, $color, $width, $height: null)

Examples

// ↑ Triangle in top direction.
@include triangle(top #fff 5px)
// ↖ Triangle in top-left direction.
@include triangle(top-left, #fff, 5px, 10px)