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

آموزش استایلوس
امروزه در جوامع توسعه وب دو پیش پردازنده CSS محبوبیت بسیاری را در بین کاربران و طراحان سایت کسب کرده اند همانطور که با نام آنها آشنا هستید این دو پیش پردازنده Sass و Less هستند.همچنین پیش پردازنده سوم دیگری پا به عرصه نهاده که نسبت به دو پیش پردازنده دیگر محبوبیت بیشتری دارد که استایلوس نام دارد. با مجیدآنلاین همراه باشید تا در مورد این پیش پردازنده بیشتر صحبت کنیم.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

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

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

استایلوس یک پروژه اوپن سورس است که روی گیت هاب قرار گرفته در نتیجه شما میتوانید آن را با استفاده از این منبع و یا با استفاده از NPM به راحتی نصب کنید:
$ npm install stylus

 فایلهای CSS استایلوس با پسوند styl. ذخیره میشوند و میتوانند در هر نقطه از پروژه قرار بگیرند. این فایلها هیچ پیکربندی خاصی نیاز ندارند. کدهای این فایلها به آسانی اجرا میشوند و در نهایت کد CSS بعنوان خروجی تولید میکنند:
$ stylus stylus/main.styl --out /css --compress

 همانطور که شما در بالا متوجه شدید فرمان کامپایل فایل استایلوس (main.styl) به فایل CSS یک فایل با همین نام با پسوند CSS. را در خروجی تولید میکند. در صورتی که شما ترجیح دهید فایل خود را بصورت غیردستی پردازش کنید میتوانید از گزینه watch-- استفاده کنید:
$ stylus --watch stylus/main.styl

 همچنین گزینه های دیگری در استایلوس وجود دارد که از آن جمله میتوان به تبدیل فایل استایلوس به CSS ، مقایسه ورودی و خروجی و... اشاره نمود.


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

اصول استایلوس خیلی خیلی شبیه به دیگر پیش پردازنده های CSS است.اما در اینجا بعضی از آیتم های آن را با هم بررسی و مرور خواهیم کرد:
/* 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
 
کد بالا تمامی قابلیتهای استایلوس رو یکجا نشان میدهد و شما تنها با خواندن کامنتهای هر قسمت متوجه چگونگی عملکرد آن قسمت میشوید.برای مثال در آخرین بخش extend@ تمامی ویژگیهای کلاس .noticeblock را به کلاس .warning اختصاص میدهد و یا همانطور که میدانید ویژگی import@ کلیه استایلهای موجود در فایل link.styl را درون فایل استایل اصلی پیاده میکند.
ویژگیهایی از قبیل عدم براکت ، سیمیکالن و دونقطه که در دیگر پیش پردازنده های CSS سازگار هستند در استایلوس نیز سازگار هستند در نتیجه اگر شما این ساختار را میپسندید به شما توصیه میکنیم استایلوس را جایگزین کنید و از آن استفاده کنید.

ایجاد Mixin و استفاده از آن

Mixinها بنا به دلایل بسیاری در پیش پردازنده های CSS فوق العاده مفید هستند.در واقع با استفاده از آنها میتوان بصورت کاملا منطقی کدهای CSS را تولید و سازماندهی کرد. در استایلوس استفاده از Mixin ها بسیار آسان است و نحوه استفاده از آنها همانگونه است که در دو پیش پردازنده دیگر بوده است. در واقع روند کار آنها بدین گونه است که باعث سهولت در استفاده از کدهایی میشود که نیاز به پیشوند مرورگرها دارند و این امکان را به شما میدهد که بتوانید مجموعه ای از دستورات CSS را که قرار است در جاهای زیادی استفاده شوند را از قبل آماده کنید و در جای دیگر آنها را با یک خط کد بوسیله include@ پیاده سازی کنید.
/*
    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
 

همانطور که در بالا میبینید نحوه استفاده از Mixin ها به شما نشان داده شده است. همچنین در زیر به شما نشان خواهیم داد که مقادیر پیش فرض هم میتوان به هر یک از ویژگیها اختصاص داد:
/* Generates a CSS triangle */
generate-arrow(arrow-width = 10px)
    &:before, &:after
        content ' '
        height: 0
        position absolute
        width: 0
        border arrow-width solid transparent
 

همچنین در زیر خواهید دید که Mixinها میتوانند بوسیله کلمه کلیدی return یک مقدار را برگردانند یا استایلهای تعریف شده بین Mixinها به سادگی بر روی المان ها اعمال میشوند.
/* Adds styles for the current and child elements */
special-homepage-styles(background = '#ccc')
    background-color background
 
    a
        color lightblue
 
        &:visited
            color navy
 

و البته در Mixin ها میتوانید از شرطها و حلقه ها نیز استفاده کنید:
/* 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
 

مثال بالا یک مثال انعطاف پذیر از Mixin است که نحوه استفاده از شرطها ، حلقه ها و return را به شما نشان میدهد.
اگر با دو پیش پردازنده CSS کمی آشنایی داشته باشید مطالب بالا را به آسانی درک خواهید کرد چرا که تفاوت چندانی بین این سه پیش پردازنده وجود ندارد.در واقع هدف از استفاده هر یک از اینها خلاصه کردن استایلها و کاهش پیچیدگی آنهاست.

شیدا استوار، کارشناس رشته فن آوری اطلاعات بیش از 3 سال است که در حوزه طراحی و توسعه وب فعالیت دارم. علاقه شدید در زمینه برنامه نویسی موجب گردید از همان ابتدا به صورت شخصی اقدام به مطالعه و تحقیق در زمینه زبان های برنامه نویسی مختلف نموده و اکنون با تمرکز بر طراحی و توسعه وب فعالیتم را به صورت حرفه ای تر ادامه می دهم

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.