Skip to content

Latest commit

 

History

History
436 lines (288 loc) · 9.9 KB

document.md

File metadata and controls

436 lines (288 loc) · 9.9 KB
Raw

@function tint

Slightly lighten a color by mixing with white

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$color Color color to tint -
$percentage Number percentage of $color -

Returns

Color

Examples

tint(#f00, 10)
// #ff1a1a

@function shade

Slightly darken a color by mixing with black

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$color Color color to shade -
$percentage Number percentage of $color -

Returns

Color

Examples

shade(#f00, 10)
// #e60000

@function stripUnit

Remove units from a given value

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$num Number numbers containing units -

Returns

Number

Examples

stripUnit(16px)
// 16

Dependents

  • @function convertRem Convert a given value in rem
  • @function convertRem Convert a given value in rem

@function convertRem

Convert a given value in rem

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$value Number value to convert -
$base-value Number the value that is the basis for the conversion -

Returns

Number

Throws

  • not defined $base-value

Examples

convertRem(32px, 16px)
// 2

Dependencies

Dependents

  • @function getFontSize get font size from sizes of divided evenly between the minimum and maximum values

@function getFontSize

get font size from sizes of divided evenly between the minimum and maximum values

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$step Number divided step -

Returns

Number

Throws

  • can not found $font-size-largest
  • can not found $font-size-smallest
  • can not found $font-size-step-count

Examples

getFontSize(2)
// get the second smallest font size

Dependencies

@function toRGB

get rgb(r, g, b) format from Hex color

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$color Color Hex color -

Returns

Color

Examples

toRGB(#fff);
// 255,255,255

Dependents

  • @mixin defineColorVar generate css variable for color in two ways that are hex code and r, g, b

@function encodeColor

url encode

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$color Color the color in name, hex or rgb format -

Returns

String

Examples

encodeColor(#f00)
// "%23FF0000"

@mixin respond-to

generate media query for responsive

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$breakpoint String breakpoint name -

Examples

@include respond-to(tablet) { ... }
// @media(min-width: 768px) { ... }

@mixin font-face

generate at-rule for font-face

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$name String font's name to be used for font-family -
$path String path to font files based on a web root -
$filename String name of file without extension -
$weight Number font-weight -
$style String font-style -
$exts List space-delimited list of font file extensions -
$range List, Null range of unicode -

Examples

@include font-face(
  "Noto Serif",
  "/fonts/noto/",
  "noto-serif-kr-400",
  400,
  normal,
  woff woff2,
  null
);
// font-family: "Noto Serif";
// src: url("/fonts/noto/noto-serif-kr-400.woff") format("woff"),url("/fonts/noto/noto-serif-kr-400.woff2") format("woff2");
// font-weight: 400;
// font-style: normal;

@mixin colorScheme

generate prefers-color-scheme media query and block for [data-scheme="{scheme}"] selector

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$scheme String color scheme to apply the style to -

Examples

@include colorScheme(dark) { ... }
// selector[data-scheme=dark] { ... }
// @media(prefers-color-scheme: dark) { ... }

@mixin keyframes

generate @keyframes rules

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$name String the name of keyframe -

Examples

@include keyframes(bounce) { ... }
// @keyframes bounce { ... }

@mixin animation

generate properties for animation

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$options Map - -
$options.name String the name of animation -
$options.duration Number the length of time that an animation should take to complete one cycle 0
$options.func String how an animation progresses through the duration of each cycle ease-in-out
$options.delay Number the amount of time to wait from applying the animation to an element before beginning to perform the animation 0
$options.iteration Number the number of times an animation sequence should be played before stopping 1
$options.direction String whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. normal
$options.fill String how a CSS animation applies styles to its target before and after its execution none
$options.state String whether an animation is running or paused running

Examples

@include animation((name: bounce, duration: 1s));
// animation-name: bounce;
// animation-duration: 1s;
// animation-timing-function: ease-in-out;
// animation-delay: 0s;
// animation-iteration-count: 1;
// animation-direction: normal;
// animation-fill-mode: none;
// animation-play-state: running;

@mixin sr-only

visually hidden for screen reader

  • Group: General
  • Access: public

Examples

@include sr-only;

@mixin lineEllipsis

generate ellipsis by lines

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$line-to-show Number the number of lines -

Examples

@include lineEllipsis(1);
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;

@include lineEllipsis(3);
// overflow: hidden;
// text-overflow: ellipsis;
// display: block;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 3;

@mixin defineColorVar

generate css variable for color in two ways that are hex code and r, g, b

  • Group: General
  • Access: public

Parameters

Name Type Description Default
$colorMap Map map containing variable's name & color value -

Examples

@include defineColorVar((--background-color: $color-neutral-05));
// --background-color: #f2f2f2;
// --background-color-rgb: 242,242,242;

Dependencies