@get-sinister/sass 0.7.1

@mixin bgOverlay() [deprecated]

DEPRECATED:

Since v0.6.67-beta.2 . Use @include overlay() instead. Sets a background overlay to an image.

Parameters

$bgUrl: null (string)

URL of an image that will be placed as background

$linearGradiances: rgba(0,0,0,0), rgba(0,0,0,0) (string)

CSS properties for the linear gradiance

@mixin paralax()

Used with background css property

Creates stacked cards on scroll.

Parameters

$numberOfItems: 3 (number)

How many cards there are

$startingHeight: 60px (number)

Height from the top

$responsiveStackedContent: true (bool)

Is the stacked content responsive?

$responsiveMargin: 80vh (number)

Margin if $responsiveStackedContent is enabled

$responsiveMargin: 570px (number)

A single breakpoint for when $responsiveStackedContent is enabled

To-do List

  • Needs more testing and documentation

@mixin flex()

Use flex in one line! With this mixin, you can achieve most flex functionality just in one line. Each set of rules sits within a sass list. Each list can take a breakpoint, and abreviations of flex properties. Each list, should be 1 breakpoint.

Each `list` contains:


  • A breakpoint from sin.config. This is optional. If there is no breakpoint, the rules will be applied to all screen sizes
  • Abreviations of flex properties. To see a list of supported properties, call the mixin without passing parameters.
    All parent properties are supported.
  • Gap uses spacing mixin to calculatee the values, so use the same syntax. The difference though is that this times it only takes two parameters, since spacing property is always gap.
  • For child elements flex-basis, flex, and align-self properties are supported.
    • flex-basis: is an scss list containing one element, for example (45%)
    • flex: takes 3 properties, flex-grow, flex-shring and flex-basis
    • align-self: takes abreviations of align-self property.
  • debug: pass ‘debug’ as a parameter to a list to see a debug log about the current list of properties.
  • auto-gap: with Sinister, you can automatically negate gap values from flex and flex-basis properties for the x axis, so gap becomes even easier to use. Note that only gap that is nested in the current list can be calculated for now. Use with caution though, because there might be some side effects.
  • !i: pass ‘!i’ string as a parameter to add important to every parameter of the current list. Note that you must add the single quotes in the parameter, otherwise it will not work.

Parameters

$args...: (arglist)

An arglist of lists.

Example

scss Examples 
.sin{
  @include flex(
    (fd-cl, ai-c, '!i'), // Flex direction column, align items center, and every css property will become !important
    (xs, fd-r, w-w, jc-c), // From breakpoint xs flex direction row, wrap: wrap, justify content center.
    (md, (g,1,.5)), // From breakpoint md, gap general direction (all directions), distance 1 from `_sin.config.scss`, with 0.5 scale
    (lg, (1 0 auto)), // From breakpoint lg, flex-basis for all first level child elements, flex grow 1, flex shring 0, flex auto
    (xl, fd-r, w-w, jc-c, ai-fs, ac-c, (x,2), (1 1 43%)), // From breakpoint xl, gap on x axis only (left, right) distance 2 from `_sin.config.scss`, and lastly flex-basis property.
    (debug, (g, 1, 1.2), (0 0 43%),  auto-gap) // Debug will print a log, will add gap in all directions, distance 1, scale 1.2, flex-grow 1, flex shrink 0, flex-basis 43, and has auto gap, which will be translated to `flex: 0 0 calc(43% - 1.8rem)`
  );
  }
css compiled 
.sin {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  display: flex;
  gap: 1.8rem;
}
@media (min-width: 576px) {
  .sin {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .sin {
    display: flex;
    gap: 0.75rem;
  }
}
@media (min-width: 1460px) {
  .sin {
    display: flex;
  }
  .sin > * {
    flex: 1 0 auto;
  }
}
@media (min-width: 1920px) {
  .sin {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    column-gap: 2rem;
  }
  .sin > * {
    flex: 1 1 43%;
  }
}
.sin > * {
  flex: 0 0 calc(43% - 1.8rem);
}

Requires

@mixin flex-properties() [private]

@function type() [private]

@function contains() [private]

@function get() [private]

@function getMap()

@function help()

@mixin spacing()

The spacing mixin allows you to add consistent spacing using values form _sin.config or the default-configuration. It accepts an arglist of lists. Each list can contain one of the following.

At this stage, there is no error handling, so be aware of that.

  • {string} $debug - If the first arg of an arguement list is ‘debug’ then a debug log will be printed for the specific arguement list. If its the first arguement of spacing mixin, then it will print debug log of all lists
  • {string} $breakpoint - A breakpoint from breakpoints in Sinister configuration.
  • {string} $property - The first letter of a spacing property, m for margin, p for padding, g for gap.
  • {string} $direction - The first letter of a spacing property direction. For margin and padding, t for top, r for right, b for bottom, l for left. Gap property has only generic, column and gap, so if any of t,b is selected row-gap will be applied and similar for column-gap.
  • {string} $value - A spacing value from spacing in Sinister configuration
  • {number} $scale - A number that will be multiplied with the spacing value selected. Tuning this is not suggested. Default value is 1.
  • {string} $important - If !i is present, the style will get !important
  • {string} $debug - You can enable debug by adding a debug string in the arguements

Examples

scss See available properties and values 
.sin{
  @debug spacing();
}
scss Common use case 
.sin{
 @include spacing(
  (m, g, 1), // Margin, general (all directions), distance 1 (from sinister configuration)
  (xs, m, g, 2), // From breakpoint xs from sinister configuration, direction general, distance 2
  (md, p, y, 2, 1.4), // From breakpoint md, padding, y axis, distance 2, and scale 1.4
  (lg, m, x, auto), // From breakpoint lg, x axis, margin auto
  (xl, m, t, 2, '!i') // From breakpoint xl, direction top, distance 2, !important is true, scale is default
 );
}
css compiled 
.sin {
  margin-top: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}
@media (min-width: 576px) {
  .sin {
    margin-top: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }
}
@media (min-width: 1200px) {
  .sin {
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
}
@media (min-width: 1460px) {
  .sin {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1920px) {
  .sin {
    margin-top: 2rem !important;
  }
}
scss Common use case 
.sin{
 @include spacing(
    debug, // Will print debug log for both list items
    (m, g, 1),
    (xs, m, g, 2),
  );
}
css compiled 
.sin {
  margin-top: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
}
@media (min-width: 576px) {
  .sin {
    margin-top: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }
}
scss Common use case 
.sin{
 @include spacing(
  (debug, m, g, 1),  // Will print debug log for this item
  (xs, m, g, 2rem), // From xs breakpoint, margin general 2rem
  (g, t, 2) // property gap, direction is top, but gap works on x and y axis so in that case top is translated to top and bottom, or y axis
 );
}
css compiled 
.sin {
  margin-top: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  row-gap: 2rem;
}
@media (min-width: 576px) {
  .sin {
    margin-top: 2rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }
}

Requires

@function type() [private]

@function contains() [private]

@function get() [private]

@function getMap()

@function help()

Used By

@mixin flex-properties() [private]