blus

self-use useful stylus

• blus
  • about versions
  • useage
    • config
    • color-palette
    • spring in css
    • reset
  • other awesome stylus or css package

about versions

<breaking change>.<feats>.<improvements/perf>.<bugs fixed>

useage

config

with stylus loader

import Blus from 'blus'

{
  test: /(\.styl$|\.stylus$)/,
  use: [
    // ... other loaders
    {
      loader: 'stylus-loader',
      options: {
        sourceMap: true,
        use: [Blus()],
      },
    },
  ],
},

color-palette

in .styl files

$volcano-6 = #fa541c;

.bar
  color color-palette($volcano-6, 1)

color-palette($volcano-6, 1) will generate $volcano-1

what is color-palette?

spring in css

based on css-spring. support all options

WARING: 1. rgba is not allowed

keyframes = spring({ left: 0px, opacity: 0 }, { left: 250px, opacity: 1 }, { preset: 'wobbly', precision: 5 })

@keyframes wobbly
  for name, value in keyframes
    {name}
      {value}

.spring
  animation wobbly 1s linear infinite
  position relative
  width 100px
  height 100px
  background-color red

reset

detail

1. common-reset()
2. reset-box()

other awesome stylus or css package

• rupture - useful median query
• rucksack-css - a postcss plugin, not a stylus. but useful
• css.gg - pure css icons