Minimal Stylus setup

README.md

Einfalt Stylus setup

Þú þarft að vera búinn að installa nodejs. (Yfirleitt öruggast að velja nýjustu LTS útgáfuna, því allra, allra nýjasta nýjasta útgáfa er stundum pínu experimental og bögguð.)

Búa til nýtt verkefni.

cd myprojectfolder
npm init

npm init spyr þig nokkurra spurninga, en þú getur bara ýtt á enter þar til það er búið.

Þá verður til package.json skrá í verkefnamöppunni sem heldur utan um verkefnið og hvaða hjálpartól (t.d. Stylus) þú ert að nota.

Installa Stylus

npm install --save-dev stylus

Búið.

Keyra Stylus og fylgjast með skrám

Opnaðu package.json og bættu eftirfarandi línu inn í "scripts" blokkina:

  "css": "node_modules/.bin/stylus src/styles.styl -o dist/styles.css -w",

(Þú þarft að breyta slóðunum á .styl og .css skránum í eitthvað sem hentar þér og passa að viðkomandi möppur séu til, etc. etc.)

Svo ræsir þú Stylus með því að keyra eftirfarandi skipun

npm run css

Þá les Stylus .styl skrána sem þú tilgreindir, renderar út CSS og -w parturinn segir Stylus að keyra áfram og fylgjast með breytingum og stylus skránum sem þú ert að nota og re-rendera CSSið í hvert skipti sem einhver þeirra breytist.

Þetta er voða frumstætt og einfalt (fylgist ekki sjálfkrafa með breytingum á nýjum Stylus skrám sem bætast við eftir að þú ræsir scriptuna) en virkar heilt yfir mjög vel.

utils.styl

// Gagnleg Stylus föll/mixin


// ===============================================================================
// Percentage helper

// Converts a fraction to a percentage. Defaults to `%` but can also do `vw`/`vh`
//
// Usage:
//     width: pct(720/1440);      // width: 50%;
//     width: pct(720/1440, vw);  // width: 50vw;
//
pct($fraction, $pct='%') {
    return unit(100*$fraction, $pct);
}


// ===============================================================================
// CSS `calc()` helper

// ...because Stylus makes it difficult to use `calc()`
//
// Usage: 
//     width: csscalc(50%, 50px);        // width: calc(50% + 50px);
//     width: csscalc(50%, -50px);       // width: calc(50% - 50px);
//     width: csscalc(30%, 20px, -1em);  // width: calc(30% + 20px - 1em);
//
csscalc($first, $rest...) {
    $values = $first;
    for $arg in $rest {
        $values = $values + ($arg<0 ? ' - ' : ' + ') + abs($arg);
    }
    return s('calc('+ $values +')');
}




// ===============================================================================
//  Variable Percentage values

// Returns margin/padding/font-size/etc. value calc() function that delivers
// approximately:
//   * $min pixels when the element's container is $minWidth pixels wide
//   * $max pixels when the element's container is $maxWidth pixels wide.
//
// Defaults to `%` values, but can be instructed to use `vw` or `vh` instead.
//
// Usage:
// 
//     html {
//         font-size: 15px;
//         @media screen and (min-width: 480px) {
//             font-size: between( 15,480, 20,1440, vw );
//         }
//     }
//     body {
//         padding-left: between(20,320, 200,1440 )
//         padding-right: @padding-left;
//     }
//
between( $min, $minWidth, $max, $maxWidth, $pct='%') {
  $slope = ($max - $min) / ($maxWidth - $minWidth);
  $intercept = $max - ($slope * $maxWidth);
  if ( $intercept == 0 ) {
      return unit($slope*100, $pct);
  }
  else {
      return csscalc( unit($slope*100, $pct), ($intercept)px );
  }
}



// ===============================================================================
// Triangles mixin

// CSS triangles for tooltip pins, etc.
//
// Usage:
//
//     .box::after {
//         _triangle(
//               $dir,       // <-- top, bottom, left, right.
//               $color,     // arrow color
//               $h,         // the "Length" of the arrow.
//               $w,         // total width of the arrow. (Defaults to twice the @height)
//               $pos,       // sideways placement along the edge of the container. (Defaults to 50%.)
//               $posFrom,   // edge from which the side-offset is calculated. (Defaults to left or top respectively.)
//               $shift      // shift along the "height" axis, away or towards the container. (Defaults to 0)
//             );
//     }
//
_triangle($dir=top, $color=#fff, $h=10px, $w=(2*$h), $pos=50%, $posFrom=null, $shift=0) {
    _triangleBasic();
    _triangleShape($dir, $color, $h, $w, $pos, $posFrom, $shift);
}
_triangleBasic() {
    content: '';
    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;
    position: absolute;
    border: 0 solid transparent;
}
_triangleShape($dir=top, $color=#fff, $h=10px, $w=(2*$h), $pos=50%, $posFrom=null, $shift=0) {
    isVertical($dir) { return $dir==top or $dir==bottom; }
    $posFrom = $posFrom || ( isVertical($dir) ? left : top );

    {$dir}: - $h;
    {$posFrom}: $pos;
    margin: (- $w/2);
    margin-{$dir}: - $shift;
    border-width: isVertical($dir) ? $h ($w/2) : ($w/2) $h;
    border-{opposite-position($dir)}-color: $color;
    border-{$dir}-width: 0;
}



// ===============================================================================
// Relative color fader

// Example:
//    $fadedBlue = rgba(#00f, .6); 
//    color: $fadedBlue;            // color: rgba(0,0,255, .6);
//    color: rgba($fadedBlue, .5);  // color: rgba(0,0,255, .5);
//    color: fade($fadedBlue, .5);  // color: rgba(0,0,255, .3);
//
fade($color, $opacity) {
    return rgba( $color, alpha($color)*$opacity );
}