Translation of Scut to Stylus (https://davidtheclark.github.io/scut/)

scut.styl

/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
* v1.1.2
* Docs at http://davidtheclark.github.io/scut
*
* Translated for Stylus by armornick
*/

scut-clearfix() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

$scut-clearfix {
    scut-clearfix();
}

scut-list-unstyled(no-margin = true) {
    list-style-type: none;
    padding-left: 0;
    
    if no-margin {
        margin-top: 0;
        margin-bottom: 0;
    }
}

$scut-list-unstyled {
    scut-list-unstyled();
}

scut-list-floated(space = false, dir = left, no-margin = true) {
    scut-list-unstyled();
    scut-clearfix();

    & > li {
        float: dir;
    }
    
    if space {
        & > li + li {
            margin-{dir}: space;
        }
    }
}

$scut-list-floated {
    scut-list-floated();
}

scut-autoOrValue(val) {
    if val is 'a' or val is auto {
        auto
    } else {
        val
    }
}

scut-coords($coordinates) {
    top = $coordinates[0]
    right = $coordinates[1]
    bottom = $coordinates[2]
    left = $coordinates[3]

    if top is not n {
        top: scut-autoOrValue(top);
    }
    
    if right is not n {
        right: scut-autoOrValue(right);
    }
    
    if bottom is not n {
        bottom: scut-autoOrValue(bottom);
    }
    
    if left is not n {
        left: scut-autoOrValue(left);
    }
}

scut-strip-unit(num) {
    num / (num * 0 + 1)
}

scut-em-base ?= 16

scut-em(pixels, base = scut-em-base) {
    multiplier = unit(base) == 'em' ? 16 : 1
    divisor = scut-strip-unit(base) * multiplier
    
    em-vals = ()
    for val in pixels {
        val-in-ems = (scut-strip-unit(val) / divisor) * 1em
        push(em-vals, val-in-ems)
    }
    
    if length(em-vals) == 1 {
        em-vals[0]
    } else {
        em-vals
    }
}

scut-rem-base ?= 16

scut-rem(pixels) {
    
    rem-vals = ()
    for val in pixels {
        val-in-rems = (scut-strip-unit(val) / scut-rem-base) * 1rem
        push(rem-vals, val-in-rems)
    }
    
    if length(rem-vals) == 1 {
        rem-vals[0]
    } else {
        rem-vals
    }
}

scut-border($style, $sides = n y) {
  if length($sides) == 2 {
  
    if nth($sides, 1) != n {
      border-top: $style
      border-bottom: $style
    }
  
    if nth($sides, 2) != n {
      border-left: $style
      border-right: $style
    }
  } else if length($sides) == 4 {
      
    if nth($sides, 1) != n {
      border-top: $style
    }
    
    if nth($sides, 2) != n {
      border-right: $style
    }
    
    if nth($sides, 3) != n {
      border-bottom: $style
    }
    
    if nth($sides, 4) != n {
      border-left: $style
    }
    
  } else {
    error("Scut-border requires a $sides argument of 2 or 4 values.")
  }
}

scut-circle($size, $color = inherit) {
    border-radius: 50%
    display: inline-block
    
    if $color == inherit {
        // If user wants to inherit the color,
        // take advantage of the fact that border
        // color defaults to the text color of the element.
        border-width: ($size / 2)
        border-style: solid
        height: 0
        width: 0
    } else {
        // Otherwise, just use background-color.
        background-color: $color
        height: $size
        width: $size
    }
}

scut-reset-border-box() {
    // Make everything a border-box, because why not?
    html {
        -moz-box-sizing: border-box
        box-sizing: border-box
    }
    
    *, *:before, *:after {
        -moz-box-sizing: inherit
        box-sizing: inherit
    }
}

scut-reset-antialias() {
    // Antialias!
    body {
        -webkit-font-smoothing: antialiased
    }
    *, *:before, *:after {
        -webkit-font-smoothing: inherit
    }
}

scut-reset-semanticize() {
    // Make headers and <b> semantic, not presentational.
    h1, h2, h3, h4, h5, h6 {
        font-size: 1em
        font-weight: normal
        margin: 0
    }
    b {
        font-weight: normal
    }
}

scut-reset-pointer() {
    // Clickable form elements should have a pointer.
    label,
    select,
    option,
    button {
        cursor: pointer
    }
}

scut-reset-form() {
    fieldset {
        border: 0
        margin: 0
        padding: 0
    }
    textarea {
        resize: vertical
    }
}

scut-reset-button() {
    // Reset default button styles, which are never used.
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        background: transparent
        border: 0
        color: inherit
        font: inherit
        margin: 0
        padding: 0
        width: auto
        -webkit-appearance: none
        -webkit-font-smoothing: antialiased
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none
        user-select: none
        
        &::-moz-focus-inner {
            padding: 0
            border: 0
        }
    }
}

scut-reset-paragraph() {
    // Some paragraph margins just get in the way.
    p:first-of-type {
        margin-top: 0
    }
    p:last-of-type {
        margin-bottom: 0
    }
}

scut-reset-media() {
    // You want these elements fluid, probably.
    img,
    video {
         max-width: 100%
        height: auto
    }
}

scut-reset-figure() {
    // Remove default margins.
    figure {
        margin: 0
    }
}

scut-reset() {
    scut-reset-border-box()
    scut-reset-antialias()
    scut-reset-semanticize()
    scut-reset-pointer()
    scut-reset-form()
    scut-reset-button()
    scut-reset-paragraph()
    scut-reset-media()
    scut-reset-figure()
}

scut-selected($active = false) {
    if $active {
        &:hover,
        &:focus,
        &:active {
            {block}
        }
    }
    else {
        &:hover,
        &:focus {
            {block}
        }
    }
}


scut-center-block($max-width = false) {
    margin-left: auto
    margin-right: auto
    
    if $max-width {
        max-width: $max-width
    }
}

$scut-center-block {
    scut-center-block()
}

scut-list-divided($divider = "|", $space = 0.5em, $dir = left, $height = false, $no-margin = true) {
    scut-list-floated()
    
    $pseudo = $dir == left ? "before" : "after"
    
    // If an explicit height is passed,
    // things are different: All <li>s
    // need the pseudo-element (to force height),
    // but the first's must be hidden.
    if $height {
        
        & > li {
            height: $height
        }
        
        & > li:{$pseudo} {
            height: $height
            content: $divider
            display: inline-block
            vertical-align: middle
            {block}
        }
        
        & > li:first-child:{$pseudo} {
            width: 0
            overflow: hidden
        }
    }
    
    & > li + li:{$pseudo} {

        if not $height {
            content: $divider
            display: inline-block
            {block}
        }
        
        margin-left: $space
        margin-right: $space
    }
}

$scut-list-bar {
    scut-list-divided()
}

$scut-list-breadcumb {
    scut-list-divided("/")
}

scut-list-inline($space = false, $no-margin = true) {
    scut-list-unstyled($no-margin)
    
    & > li {
        display: inline-block
    }
    
    if $space {
        & > li + li {
            margin-left: $space
        }
    }
}

$scut-list-inline {
    scut-list-inline()
}

scut-list-punctuated($divider = ", ", $display = inline, $no-margin = true) {
    scut-list-unstyled($no-margin)
    
    & > li {
        display: $display
        
        &:not(:last-child):after {
            content: $divider
        }
    }
}

$scut-list-comma{
  scut-list-punctuated()
}

scut-margin($margin) {
    
    if length($margin) == 1 and $margin != n {
        margin-top: $margin;
        margin-right: $margin;
        margin-bottom: $margin;
        margin-left: $margin;
    }
    
    if length($margin) == 2 {
        $margin-y = $margin[0]
        $margin-x = $margin[1]
        
        if $margin-y != n {
            margin-top: $margin-y
            margin-bottom: $margin-y
        }
        
        if $margin-x != n {
            margin-left: $margin-x
            margin-right: $margin-x
        }
    }
    
    if length($margin) == 3 {
        $margin-y-top = $margin[0]
        $margin-x = $margin[1]
        $margin-y-bottom = $margin[2]
        
        if $margin-y-top != n {
            margin-top: $margin-y-top
        }
        
        if $margin-x != n {
            margin-right: $margin-x
            margin-left: $margin-x
        }
        
        if $margin-y-bottom != n {
            margin-bottom: $margin-y-bottom
        }
    }
    
    if length($margin) == 4 {
        $margin-top = $margin[0]
        $margin-right = $margin[1]
        $margin-bottom = $margin[2]
        $margin-left = $margin[3]
        
        if $margin-top != n {
          margin-top: $margin-top
        }
        if $margin-right != n {
          margin-right: $margin-right
        }
        if $margin-bottom != n {
          margin-bottom: $margin-bottom
        }
        if $margin-left != n {
          margin-left: $margin-left
        }
    }
}

scut-padding($padding) {
    
    if length($padding) == 1 and $padding != n {
        padding-top: $padding;
        padding-right: $padding;
        padding-bottom: $padding;
        padding-left: $padding;
    }
    
    if length($padding) == 2 {
        $padding-y = $padding[0]
        $padding-x = $padding[1]
        
        if $padding-y != n {
            padding-top: $padding-y
            padding-bottom: $padding-y
        }
        
        if $padding-x != n {
            padding-left: $padding-x
            padding-right: $padding-x
        }
    }
    
    if length($padding) == 3 {
        $padding-y-top = $padding[0]
        $padding-x = $padding[1]
        $padding-y-bottom = $padding[2]
        
        if $padding-y-top != n {
            padding-top: $padding-y-top
        }
        
        if $padding-x != n {
            padding-right: $padding-x
            padding-left: $padding-x
        }
        
        if $padding-y-bottom != n {
            padding-bottom: $padding-y-bottom
        }
    }
    
    if length($padding) == 4 {
        $padding-top = $padding[0]
        $padding-right = $padding[1]
        $padding-bottom = $padding[2]
        $padding-left = $padding[3]
        
        if $padding-top != n {
          padding-top: $padding-top
        }
        if $padding-right != n {
          padding-right: $padding-right
        }
        if $padding-bottom != n {
          padding-bottom: $padding-bottom
        }
        if $padding-left != n {
          padding-left: $padding-left
        }
    }
}

scut-absolute($coordinates = 0 n n 0) {
    position: absolute
    scut-coords($coordinates)
}

$scut-absolute {
    scut-absolute()
}

scut-fixed($coordinates = 0 n n 0) {
    position: fixed
    scut-coords($coordinates)
}

$scut-fixed {
    scut-fixed()
}

scut-relative($coordinates = n n n n) {
    position: relative
    scut-coords($coordinates)
}

scut-size($size) {
    if length($size) == 1 {
        width: $size
        height: $size
    }
    else if length($size) == 2 {
        width: $size[0]
        height: $size[1]
    }
}

scut-sticky-footer-fixed($height, $wrapper = ".wrapper", $footer = ".scut-sticky") {
    html, body {
        height: 100%
        margin: 0
        padding: 0
    }
    
    {$wrapper} {
        min-height: 100%
        margin-bottom: -1*$height
        
        &:after {
            content: ""
            display: block
        }
    }
    
    {$wrapper}:after, {$footer} {
        height: $height
    }
}


scut-sticky-footer-fluid($wrapper = ".wrapper", $footer = ".scut-sticky") {
    html, body {
        height: 100%
        margin: 0
        padding: 0
    }
    
    {$wrapper} {
        display: table
        height: 100%
        width: 100%
    }
    
    {$footer} {
        display: table-row
        height: 1px
    }
}


// space
$scut-space = "\0020"
// non-breaking space
$scut-nbsp = "\00a0"
// quotation mark
$scut-quot = "\0022"
// left single curly quote
$scut-lsquo = "\2018"
// right single curly quote
$scut-rsquo = "\2019"
// left double curly quote
$scut-ldquo = "\201C"
// right double curly quote
$scut-rdquo = "\201D"
// left single angle quote (guillemet)
$scut-lsaquo = "\2039"
// right single angle quote (guillemet)
$scut-rsaquo = "\203A"
// left double angle quote (guillemet)
$scut-laquo = "\00ab"
// right double angle quote (guillemet)
$scut-raquo = "\00bb"
// em dash (mutton)
$scut-mdash = "\2014"
// en dash (nut)
$scut-ndash = "\2013"
// hyphen
$scut-hyphen = "\2010"
// ampersand
$scut-amp = "\0026"
// greater than
$scut-gt = "\003e"
// less than
$scut-lt = "\003c"
// times
$scut-times = "\00D7"
// big times
$scut-bigtimes = "\2715"
// checkmark
$scut-checkmark = "\2713"
// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis)
$scut-sect = "\00a7"
// paragraph symbol (pilcrow)
$scut-para = "\00b6"
// middot (interpunct, interpoint)
$scut-middot = "\00b7"
// o-slash (slashed o)
$scut-oslash = "\00f8"
// bullet
$scut-bull = "\2022"
// white bullet
$scut-whibull = "\25E6"
// horizontal ellipsis
$scut-hellip = "\2026"
// vertical ellipsis
$scut-vellip = "\22EE"
// midline horizontal ellipsis
$scut-midhellip = "\22EF"
// up-pointing triangle
$scut-utri = "\25b2"
// down-pointing triangle
$scut-dtri = "\25bc"
// left-pointing triangle
$scut-ltri = "\25c0"
// right-pointing triangle
$scut-rtri = "\25b6"
// up-pointing small triangle
$scut-ustri = "\25b4"
// down-pointing small triangle
$scut-dstri = "\25be"
// left-pointing small triangle
$scut-lstri = "\25c2"
// right-pointing small triangle
$scut-rstri = "\25b8"
// diamond
$scut-diamond = "\25c6"
// fisheye
$scut-fisheye = "\25c9"
// bullseye
$scut-bullseye = "\25ce"
// circle
$scut-circle = "\25cf"
// white circle
$scut-whitecircle = "\25cb"
// square
$scut-square = "\25a0"
// white square
$scut-whitesquare = "\25a1"
// small square
$scut-ssquare = "\25aa"
// small white square
$scut-swhitesquare = "\25ab"


scut-hanging-indent($indent = 1em) {
    // padding-left creates the indent,
    // while text-indent pulls the first line
    // back to the edge.
    padding-left: $indent
    text-indent: -1*$indent
}

$scut-hanging-indent {
    scut-hanging-indent()
}


scut-key-val($divider = ":", $pad = 0.25em, $indent = 1em, $spacing = 0, $pad-left = 0){
  & > dt {
      clear: both
      float: left
      
      &:after {
          content: $divider
          margin-right: $pad

          if $pad-left != 0 {
            margin-left: $pad-left
          }
      }
  }
  
  & > dd {
      margin-left: $indent
      
      if $spacing != 0 {
        margin-bottom: $spacing
      }
  }
}

$scut-key-val {
  scut-key-val()
}

scut-link-bb($color = inherit, $style = solid, $width = 1px) {
  text-decoration: none
  border-bottom-width: $width
  border-bottom-style: $style
  
  if $color != inherit {
    border-bottom-color: $color
  }
}

$scut-link-bb {
  scut-link-bb()
}

scut-side-lined($height = 1px, $space = 0.5em, $color = inherit, $style = solid, $v-adjust = false, $double = false) {
    display: block
    overflow: hidden
    text-align: center
    
    &:before, &:after {
        content: ""
        display: inline-block
        vertical-align: middle
        position: relative
        width: 50%
        border-top-style: $style
        border-top-width: $height
        
        if $color != inherit {
            border-top-color: $color
        }
        
        if $v-adjust != false {
            bottom: $v-adjust
        }
        
        if $double != false {
            height: $double
            border-bottom-style: $style
            border-bottom-width: $height
            
            if $color != inherit {
                border-bottom-color: $color
            }
        }
    }
    
    &:before {
        right: $space
        margin-left: -50%
    }
    
    &:after {
        left: $space
        margin-right: -50%
    }
}

$scut-side-lined {
    scut-side-lined()
}

scut-truncate() {
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

$scut-truncate {
    scut-truncate()
}

test.styl

@require "scut"

$eg-light = white

// reset page styles
scut-reset-border-box();

// inline list for nav and custom class
.inline-list {
  scut-list-inline(1em);
}

.eg-margin-1 {
	scut-margin(1em n);
}
.eg-margin-2 {
	scut-margin(0.5em 3em);
}
.eg-margin-3 {
	scut-margin(3em 1em n);
}

.eg-absolute-2 {
  scut-absolute(n 0.5em 1em n);
}

scut-sticky-footer-fixed(4em);

.eg-key-val-1
  scut-key-val()
  // or @extend %scut-key-val;

.eg-key-val-2
  scut-key-val("\2014", 0.5em, 8em, 1em, 0.5em)
  & > dt
    font-weight: bold
    
.eg-side-lined-1
  scut-side-lined()
  // or @extend %scut-side-lined;
.eg-side-lined-2
  font-size: 2em
  scut-side-lined(0.3em, 1em, $eg-light)
  

.eg-selected-1
  +scut-selected()
  	background-color: $eg-light;
  
.eg-selected-2
  +scut-selected(true)
  	background-color: $eg-light;