آموزش استایلوس

• از آنجا که استایلوس اساس NodeJS است دیگر نیازی به اضافه کردن تکنولوژی دیگری نیست (Sass مستلزم روبی است)
• استایلوس یک Api از نوع جاوااسکریپت ایجاد میکند که میتواند عمل پردازش را بصورت سفارشی انجام دهد.
• استایلوس به براکت ، دونقطه و سمیکالن نیاز ندارد.در واقع نحوه کار آن مبتنی بر فاصله است.با این حال اگر شما هر یک از این علائم را استفاده کنید باز هم استایلوس بدرستی و بدون هیچ خطایی کار میکند.
• یک جز اضافی و کتابخانه Mixin وجود دارد که Nib نامیده میشود.

نصب استایلوس و پردازش CSS

$ npm install stylus

$ stylus stylus/main.styl --out /css --compress

$ stylus --watch stylus/main.styl

اصول پایه ای استایلوس

/* Set a basic variable */
base-font-size = 12px
 
/* Set a variable based on result of mixin call */
body-background = invert(#ccc)
 
/* Set some basic rules */
body
    color #333
    background #fff
 
/* Nest rules */
nav
    margin 10px
 
    ul
        list-style-type none
 
        > li
            display inline-block
 
            &.current
                background-color lightblue
 
/* Use calculated values */
div.column
    margin-right (grid-spacing / 2)
    margin-top (grid-spacing * 2)
 
/* Use an already-set value for this element */
div.center-column
    width 200px
    margin-left -(@width / 2)
 
/* Get styles for this element from the result of a mixin */
.promo
    apply-promo-styles()
    apply-width-center(400px)
 
/* Iterate over a loop! */
table
    for row in 1 2 3 4 5
        tr:nth-child({row})
            height: 10px * row
 
    /* or.... */
    for row in (1..5)
        tr:nth-child({row})
            height: 10px * row
 
 
/* Import another Stylus stylesheet */
@import 'links.styl'
 
/* Extend an existing class */
.warning
    @extend .noticeBlock
 

/*
    Basic mixin which vendorizes a propery.  Usage:
 
    vendorize(box-sizing, border-box)
*/
vendorize(property, value)
    -webkit-{property} value
    -moz-{property} value
    -ms-{property} value
    {property} value
 

/* Generates a CSS triangle */
generate-arrow(arrow-width = 10px)
    &:before, &:after
        content ' '
        height: 0
        position absolute
        width: 0
        border arrow-width solid transparent
 

/* Adds styles for the current and child elements */
special-homepage-styles(background = '#ccc')
    background-color background
 
    a
        color lightblue
 
        &:visited
            color navy
 

/* Generates a grid based on min/max and increment */
generate-grid(increment, start, end, return-dimension=false)
    total = start
    for n, x in 0..((end - start) / increment)
        if return-dimension
            if x+1 is return-dimension
                return total
        else
            .column-{x+1}
                width total
        total = total + increment