Stylus Guide




Expressive,  dynamic,  robust  CSS

Syntax


  • Simple Selectors
  • Define and Operate Variables
  • Define Functions or Mixins
  • Write conditions and Iternations
  • Many built-in Functions

selectors

 body  font-size 16px  .header    height 40px    #nav      padding-bottom 10px

To yield:

body {
  font-size: 16px;
}
body .header {
  height: 40px;
}
body .header #nav {
  padding-bottom: 10px;
}

variables & operators

headHeight = 20%$headWidth = 1000pxbody  height 100% - headHeight  header    width $headWidth*1.08
To yield:
body {  height: 80%;}body header {
  width: 1080px;
}

Iterations & conditionals

vendors = webkit moz o ms official

border-radius()
  for vendor in vendors
    if vendor == official
      border-radius arguments
    else
      -{vendor}-border-radius arguments
#content
  border-radius (5px)

To yield:

#content {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

functions & Mixins

clearfix(el, other)
  {el}::after
    overflow hidden
    other(1px,solid,lighten(red, 60%))
border(args...)
  border-bottom args
clearfix('.content', border)
To yield:
.content::after {
  overflow: hidden;
  border-bottom: 1px solid #f99;
}

Built-in Function

red(#c00)// => 204light(#eee)// => truelightness(#e70)// => 46.66666666666%width = 960px 1080px 1280pxpush(width, 1440px, 1920px)
// width => 960px 1080px 1280px 1440px 1920px
unit(15%, 'px')
// => 15px
base-convert(1811208624,36)// => tychio

Support


  1. @import
  2. @media
  3. @font-face
  4. @keyframes
  5. @extend

Import

@import "reset.css"
simplify to:
@import "reset"
simplify to:
@import reset



stylus

By Zhengzheng ZHANG

Made with Slides.com

stylus

a simple stylus guide

  • 3,749

More from Zhengzheng ZHANG