@get-sinister/sass 0.7.1

@mixin image-wrapper()

Author:

  • Theodoros Kondakos

Parameters

$image-height: (number)

The height of the image WITHOUT UNITS

$image-width: (number)

The width of the image WITHOUT UNITS

$preload-background: (color | string)

Takes a css background property. Accepts colors and urls. [OPTIONAL]

Example

scss This will create a box element that will help browser know the size of the image, so it can render the DOM properly without CLS issues. 
.wrap-image{
  @include image-wrapper(300px, 400px, #010101);
}
css compiled 
.wrap-image {
  width: 100%;
  height: 0;
  padding-bottom: calc((300px / 400px) * 100%);
  position: relative;
  background: #010101;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.wrap-image img {
  width: 100%;
  height: auto;
  position: absolute;
}

@function box-shadow()

Get the box shadow from the $box-shadow-list in order to feed it into the mixin

Parameters & Return

$box-shadow-id: 5 (number)

The ID of the box shadow from the $box-shadow-list

@return (list)

Returns a list of box shadow css properties to the mixin.

Requires

@function getMap()

@function help()

$box-shadow-list

Used By

@mixin boxshadow()

@mixin boxshadow()

Get the box shadow from the $box-shadow-list in order to feed it into the function

Parameters

$box-shadow-id: (number)

The ID of the box shadow from the $box-shadow-list

Requires

@function box-shadow()

$box-shadow-list

Used By

@mixin box-shadow()

@mixin box-shadow()

The boxshadow() mixin to become obsolete. The new mixin is this.

Parameters

$box-shadow-id: (number)

The ID of the box shadow from the $box-shadow-list

Requires

@mixin boxshadow()

@function contrast()

Test if two colors have enough contrast for readability purposes.

Parameters & Return

$debug: (string)

Enable debugging information | Set $debug: true as a parameter

$foreground-color: (color)

The foreground color

$background-color: (color)

The background color

$threshold: 450 (number)

Set the threshold for the contrast. The higher the value, the more contrast is required in order for the function to return true

@return (bool)

Returns true if enough contrast is detected between the colors.

Example

scss will check if there is sufficient contrast, if yes, color will become white, otherwise will become random color from _sin.config.scss 
.sin{
    @if contrast(#fff, #faa){
       color: #fff;
    }@else{
       color: blue;
    }
 }
css compiled 
.sin {
  color: #fff;
}

@function help()

Parameters & Return

$config-sub-key: (string)

A key that you want it’s values returned

$config-map: (map)

An optional parameter to set a different map instead of configuration

$intro-msg: (string)

A string that will work as a title, or intro text for the help context

@return (string)

If $config-sub-key is null, then it will return the whole list of key value pairs, otherwise if a specific key is placed as input, it will return the list of key value pairs of this list only

@error

help() called, with an invalid arguement. $config-map must be a type of map and with length larger than 1, recieved: #{type-of($config-map)} and a length of #{length($config-map)}.

Example

sass See available colors 
.sin{
  @debug help(colors);
}

Requires

@function type() [private]

@function get() [private]

@function contains() [private]

@function getMap()

Used By

@function color()

@mixin flex()

@mixin spacing()

@function fs()

@function box-shadow()

@function prefix-url()

Parameters & Return

$image-url: (string)

The URL that prefixes an image while in development

@return (string)

Returns the full css property required to add a background image, with the prefix url prefixed. Might be useful in some projects.

Requires

@function get() [private]

$box-shadow-list

scss 
$box-shadow-list: (
  1: (
    none,
  ),
  2: (
    rgba(149, 157, 165, 0.2) 0px 8px 24px,
  ),
  3: (
    rgba(100, 100, 111, 0.2) 0px 7px 29px 0px,
  ),
  4: (
    rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px,
  ),
  5: (
    rgba(0, 0, 0, 0.35) 0px 5px 15px,
  ),
  6: (
    rgba(0, 0, 0, 0.16) 0px 1px 4px,
  ),
  7: (
    rgba(0, 0, 0, 0.24) 0px 3px 8px,
  ),
  8: (
    rgba(99, 99, 99, 0.2) 0px 2px 8px 0px,
  ),
  9: (
    rgba(0, 0, 0, 0.16) 0px 1px 4px,
    rgb(51, 51, 51) 0px 0px 0px 3px,
  ),
  10: (
    rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px,
  ),
  11: (
    rgba(0, 0, 0, 0.1) 0px 4px 12px,
  ),
  12: (
    rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
  ),
  13: (
    rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px,
  ),
  14: (
    rgba(17, 12, 46, 0.15) 0px 48px 100px 0px,
  ),
  15: (
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset,
  ),
  16: (
    rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  ),
  17: (
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  ),
  18: (
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  ),
  19: (
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
  ),
  20: (
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px,
  ),
  21: (
    rgb(38, 57, 77) 0px 20px 30px -10px,
  ),
  22: (
    rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
    rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset,
  ),
  23: (
    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px,
  ),
  24: (
    rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
  ),
  25: (
    rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px,
  ),
  26: (
    rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset,
  ),
  27: (
    rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
  ),
  28: (
    rgba(0, 0, 0, 0.12) 0px 1px 3px,
    rgba(0, 0, 0, 0.24) 0px 1px 2px,
  ),
  29: (
    rgba(0, 0, 0, 0.16) 0px 3px 6px,
    rgba(0, 0, 0, 0.23) 0px 3px 6px,
  ),
  30: (
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px,
  ),
  31: (
    rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px,
  ),
  32: (
    rgba(0, 0, 0, 0.3) 0px 19px 38px,
    rgba(0, 0, 0, 0.22) 0px 15px 12px,
  ),
  33: (
    rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px,
  ),
  34: (
    rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px,
  ),
  35: (
    rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
  ),
  36: (
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px,
  ),
  37: (
    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px,
  ),
  38: (
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px,
  ),
  39: (
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px,
  ),
  40: (
    rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px,
  ),
  41: (
    rgba(0, 0, 0, 0.25) 0px 25px 50px -12px,
  ),
  42: (
    rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset,
  ),
);

A list of premade box-shadow css properties. See the functions and mixin for more. Source and showcase in the link bellow.

Used By

@function box-shadow()

@mixin boxshadow()

@mixin ends()

With this mixin you can target any class that ends with the selected string.

Parameters

$ends: '' (string)

Select any $attribute that ends with that string

$attribute: 'class' (string)

Select the attribute style, like class, id etc.

Example

scss Any class that ends with the string test 
.sin{
  @include ends('test') {
    color: red;
  }
}
css compiled 
.sin [class$=test] {
  color: red;
}

@mixin has()

With this mixin you can target any class that contains the selected string.

Parameters

$has: '' (string)

Select any $attribute that contains that string

$attribute: 'class' (string)

Select the attribute style, like class, id etc.

Example

scss Any class that contains the string test 
.sin{
  @include has(test) {
    color: red;
  }
}
css compiled 
.sin [class*=test] {
  color: red;
}

@mixin overlay()

Sets a background overlay to an image.

Since 0.6.67-beta.2:

Parameters

$color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) (color)

Can be a color, or a gradient or even an image.

$width: 100% (number)

Background Width

$height: 100% (number)

Background height

Example

sass Simple Usecase 
.sin{
    @include overlay(rgba(black, .2));
}

@mixin starts()

With this mixin you can target any class that starts with the selected string.

Parameters

$starts: '' (string)

Select any $attribute that starts with that string

$attribute: 'class' (string)

Select the attribute style, like class, id etc.

Example

scss Any class that starts with the string test 
.sin{
  @include starts(test) {
    color: red;
  }
}
css compiled 
.sin [class^=test] {
  color: red;
}

@mixin iframe()

aliased as responsiveMap()

Makes an iframe like google maps, or youtube video responsive. Must be placed on the parent element of the iframe.

Parameters

$height: 55% (number)

Sets the height of the iframe. Should be%

Example

sass Youtube iframe or embed google maps. 
.sin{
 @include responsive-iframe(65%);
}

@mixin responsive-video() [deprecated]

Makes youtube video iframe responsive Requires a parent Element Place the mixin in the parent Element

DEPRECATED:

Since version 0.6.67-beta.2. Use iframe() mixin instead.

Parameters

$padding: 56.2% (number)

Set a percentage to achieve the desired padding