برگزیده های پرشین تولز

معرفی و مقایسه LESS , SASS , STYLUS

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
پیش پردازنده (preprocessor) های CSS محبوب – Sass، Less و Stylus
با توجه به توضیحات این مقاله در یافتیم که پیش پردازنده (preprocessor) های CSS، زبان های بسط یافته ای هستند که توسعه دهندگان برای کامپایل کردن به CSS از ان ها استفاده می کنند. هدف اصلی، تسریع توسعه برنامه می باشد. پیش پردازنده (preprocessor) های زیادی وجود دارند که توسعه دهندگان با توجه به نیازشان از آن ها استفاده می کنند.

توسعه دهندگان می توانند برای پیمایش کدهای خود و تبدیل ان ها به stylesheet هایی منظم، از میان این پیش پردازنده (preprocessor) ها انتخاب کنند. این پیش پردازنده (preprocessor) ها عبارتند از: Sass، Less، Stylus، SwitchCSS، Turbine، CSS-Crush، Compass و ... .

سه تا از محبوب ترین پیش پردازنده (preprocessor) های CSS عبارتند از Sass، Less و Stylus. بیایید با به بررسی جزئیات هر یک از این سه پیش پردازنده (preprocessor) مورد بپردازیم :

1.Syntactically Awesome StyleSheets) Sass)

Sass، یک پیش پردازنده (preprocessor) با ویژگی های بسیار غنی و سازگار با CSS بوده که به زبان Ruby کدنویسی شده، چند بستری بوده و با قابلیت های بیشتری نسبت به هر زبان بسط یافته CSS دیگری ادغام شده است. تعدادی از فریمورک ها با Sass ساخته شده اند که از آن جمله می توان Compass، Bourbon و Susy را نام برد.

بخش جالب این است که Sass شبیه به CSS است، اما براکت و سمی کالن ندارد. Sass همچنین ویژگی های فوق العاده ای مانند متغیرها، mixins، import های inline، ارث بری سلکتور و غیره را نیز دارد. همچنین ویژگی های پیشرفته دیگری مانند دستورالعمل های کنترلی برای کتابخانه ها (control directives for libraries) نیز وجود دارند.

Sass از یک مجمع بسیار قوی و فعال بهره می برد که متشکل از توسعه دهندگان شرکت های IT معروف بوده و دارای یک تیم Core کارآزموده است.

ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
Sass از دو آپشن سینتکس تبعیت می کند - SCSS و SASS.

سینتکس SASS، نسخه قدیمی تر بوده و همچنین به عنوان "سینتکس تورفته" شناخته شده است. این نامگذاری بدان دلیل است که از تورفتگی هایی برای جدا کردن وقفه ها در کد و کاراکترهای خط جدید (کاراکترهایی برای رفتن به خط بعدی) برای جدا کردن قوانین استفاده می کند. این سینتکس برای یک تیم از توسعه دهندگان Ruby/Python در مقایسه با یک تیم از PHP/Java، مناسب تر است.

SCSS مشابه با سینتکس CSS است. این سینتکس از یک اصل فرمت بلاک (block formatting) تبعیت می کند که در آن، پرانتزها برای نشان دادن بلوک های کد استفاده می شوند، در حالی که خط های درون یک بلوک خاص با استفاده از سمی کالن جدا شده اند. جالب توجه است که این سینتکس در حال حاضر به طور پیش فرض استفاده می شود. احتمالا این بدان دلیل است که توسعه دهندگان اکنون از سینتکس SCSS برای توسعه ابزارهای موجود، دمو و پلاگین های Sass استفاده می کنند.

sass.jpg

بیایید این کد را با هم تست کنیم :

sass1.jpg


اکنون با هم میبینیم که این کد چگونه در Sass نوشته شده است :

sass2.jpg


قبل از این که شروع به استفاده از Sass کنید، مطمئن شوید که Ruby را برروی سیستم خود نصب کرده اید. در سیستم عامل Linux، Ruby می تواند با کمک یک نرم افزار مناسب برای مدیریت پکیج (rbenv یا rvm) نصب شود.

Ruby در ویندوز می تواند با کمک Ruby Installer نصب شده و در Mac هم بصورت پیش فرض نصب شده است.

ادامه دارد ...

منبع : appzweb.ir

 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
2. Less
بسیاری از سازندگان سایت (توسعه دهندگان) که با CSS کار می کنند، دوست ندارند از CSS به همان شکلی که هست استفاده کنند. اما زمانی که CSS با فریمورک هایی مانند LESS ترکیب می شود، کار تحمیل شده به توسعه دهندگان کاهش می یابد. بنابراین، Less، ابرمجموعه ای از CSS ها همراه با قابلیت اجرا برروی client-side (سمت کلاینت) و server-side (سمت سرور) بوده و همراه با Node.js (پلت فرم runtime جاوااسکریپت که ارجحیت بیشتری برای توسعه دهندگان دارد) برای ایجاد اپلیکیشن های تحت شبکه ارائه می شود.

این زبان قابل برنامه نویسی منبع باز (open source) به توسعه دهندگان کمک می کند تا از مقادیر درون متغیرها استفاده کنند. این زبان همچنین به آن ها کمک می کند تا متغیرها را نیز تعریف کنند. Less در برنامه نویسی و داشتن منطق قوی به شما کمک می کند. به همین منظور، Less از مکانیزم های زیر تبعیت می کند :

  • تو در تویی (nesting)
  • Mixins
  • عملگرها
  • توابع
  • و البته متغیرها...
less.jpg

یادگیری Less، زمانبر بوده و به همین دلیل می توانید از CSS موجود که قبل از کد LESS هم معتبر بود، استفاده کنید.

تفاوت عمده ای بین Less و کامپایلرهای دیگر CSS وجود دارد. تفاوت در این است که Less اجازه کامپایل آنی (real time) با کمک less.js را از طریق مرورگر در مقایسه با دیگر کامپایلرها می دهد.

Less باعث می شود که CSS، قابل مدیریت و نگهداری (maintainable) و قابل بسط باشد. Less در Node توسط مرورگر و Rhino اجرا می شود. Less با ابزار شخص ثالث (Third Party) ادغام شده است که به شما اجازه می دهد فایل های خودتان را کامپایل کنید.

در اینجا مثالی از نحوه کار Less میبینیم :

less1.jpg

این کد به شکل زیر کامپایل می شود :

less2.jpg

ادامه دارد ...

منبع : appzweb.ir

 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5

3. Stylus

Stylus چهارمین سینتکس رایج پیش پردازنده (preprocessor) CSS ، نزدیکترین سینتکسی است که می توانید با کمک آن، یک زبان برنامه نویسی کامل در سمت جاوااسکریپت داشته باشید. Stylus، یک سینتکس چندسکویی (cross-platform) سطح بالا بوده و می تواند هم با کمک Jade و هم Node.js نوشته شود.

جدا از همه ویژگی های متداول پیش پردازنده (preprocessor)، شما می توانید با کمک Stylus، مجموعه ویژگی های خودتان را برای مدیریت پارامترهای CSS تعریف کرده و آن ها را بسط دهید. مزیت عمده دیگر Stylus استفاده از mixins شفاف (transparent mixins) می باشد. این مزیت به شما کمک می کند تا توابع را بدون نیاز به مشخص کردن لیستی از پارامترها تعریف کنید. این کار به شما این امکان را می دهد تا هر پارامتری را در CSS کپی کنید.

stylus.jpg

ویژگی یکتای دیگر Stylus، ویژگی interpolation آن است که توانایی استفاده از خطوط معدودی کد را برای تهیه لیست از پیش تعریف شده ای از استرینگ های مقادیر به شما می دهد. این قابلیت برای ایجاد کدهای سنگین ، فوق العاده است .

توابع Stylus امکان دسترسی به متغیرها را در حوزه (scope) تعریف شده خودشان به شما می دهد. Stylus همچنین به شما این اجازه را می دهد که کاراکترها را نادیده گرفته، آن ها را به داخل شناساگرها (identifiers) منتقل کرده و به عنوان literal ها رندر کنید.

بیایید مثال زیر را با هم بررسی کنیم :

stylus1.jpg

فرمان های (command) بالا به شکل زیر کامپایل می شوند :

stylus2.jpg

نسخه دارای تورفتگی (indented version) از سورس Stylus همراه با سینتکس CSS به گونه ای مانند شکل زیر دیده می شود:

stylus3.jpg


ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
ویژگی های اصلی Sass، Less و Stylus – یک مقایسه

همانطور که قبلا هم گفته شد، هدف اصلی از بکارگیری پیش پردازنده های preprocessors) CSS) این است که در زمان صرفه جویی کنیم بنابراین، توسعه دهنده (سازنده سایت) نیازی به سر و کله زدن با مشکلات کدها را ندارد. بیایید برای درک بهتر پیش پردازنده های (preprocessor CSS)، به شکلی عمیق تر به بررسی سه فریمورک اصلی پیش پردازنده (preprocessor CSS) بپردازیم.

SASS

Sass با Ruby نوشته شده و قابلیت های CSS را در ویژگی هایی نظیر تودرتویی، متغیرها، mixins و توابع افزایش می دهد. شما می توانید از Sass به همراه Compass (فریمورکی که به شما اجازه می دهد توابع و افزونه های ایجاد شده برروی Sass را داشته باشید) استفاده نمائید. این کار به شما کمک می کند کدهایی تمیز داشته، مستندات تصویری را دینامیک کرده و خروجی هایی فوق العاده برای ویژگی های CSS3 تولید نمائید.

LESS

Less با جاوااسکریپت نوشته شده؛ و اولین نسخه آن نیز با Ruby بود. Less در واقع توانایی بسط CSS از طریق mixins، عملگرها، متغیرها و توابع را داراست. سینتکس Less تقریبا وابسته به CSS بوده و داکیومنت آن هم با زبانی ساده آماده شده است.

به دلیل این که Less دارای ویژگی های دینامیک است، فریمورک هایی مانند بوت استرپ 3 هم از Less استفاده می کنند. یکی از ویژگی های جالب Less این است که هم در Node، هم در مرورگر و هم در Rhino اجرا می شود. Less برای کامپایل فایل ها با ابزار شاخص ثالث (3rd party tools) تطبیق داده شده است.

سینتکس Less در مقایسه با دیگر پیش پردازنده ها (preprocessor)، میزان CSS محض بیشتری دارد و کلاس هایی که به عنوان mixins توسط توسعه دهندگان استفاده می شوند، با کمک Less، مجددا قابل استفاده هستند.

STYLUS
Stylus نیز با جاوااسکریپت نوشته شده و مجهز به ویژگی هایی از Less و Sass بطور همزمان است. همچنین یک کتابخانه گسترده مشابه با Compass نیز در Stylus وجود دارد. این کتابخانه به نام Nib بوده و CSS3 mixins را به شکل cross-bowser (کدهایی که در تمام مرورگرها به یک شکل مشابه اجرا می شوند) ارائه می دهد. سینتکس Stylus، بسیار کم حجم و انعطاف پذیر بوده و نیاز به سمی کالن، براکت و پرانتز را برطرف می کند.

اگرچه ویژگی های Less، Sass و Stylus مشترک است اما تغییرات اندکی در نحوه کاربرد آن ها وجود دارد. این مقایسه، جنبه های یکتای هر یک از این فریمورک ها را مورد بحث قرار می دهد.

ادامه دارد ...

منبع : appzweb.ir



 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
1. متغیرها
متغیرها، ویژگی های اصلی CSS هستند. برای مثال در Sass، متغیرها با علامت $ شروع می شود در حالی که در Less از علامت @ استفاده شده و در Stylus نیز اصلا پیشوندی وجود ندارد. توسعه دهندگان در Sass و Less از سمی کالن برای تخصیص یک مقدار استفاده می کنند اما در Stylus، علامت تخصیص مقدار، "مساوی" (=) است. هم برای Sass و هم برای Less، یک عبارت با سمی کالن بسته می شود که همین اتفاق در CSS هم رخ می دهد.

هر توسعه دهنده، یک رنگ پایه را تعریف کرده و به جای نوشتن مقادیر hex یا نامگذاری رنگ در پراپرتی ها از این رنگ در همه بخش های فایل CSS استفاده می کند.

متغیرهای SASS
sassvar.jpg

متغیرهای LESS
lessvar.jpg

متغیرهای STYLUS
stylusvar.jpg

CSS کامپایل شده
cssvar.jpg


ادامه دارد ...

منبع : appzweb.ir

 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
2. Mixins

Mixins اجازه استفاده مجدد از پراپرتی ها را در سراسر stylesheet می دهد. بنابراین، توسعه دهندگان نیازی به تغییر مداوم stylesheet ندارند. در مقابل، آن ها می توانند تغییراتی در mixin ایجاد کنند.

Mixin ها ابزاری بسیار قوی هستند که در زمان و انرژی توسعه دهندگان صرفه جویی می کنند. Sass به نمادهای اضافی برای mixins نیاز دارد در حالی که Stylus، نمادهایی کاملا شسته و رفته دارد.

Mixin های SASS
sassmixin.jpg

Mixin های LESS
lessmixin.jpg

Mixin های STYLUS
stylusmixin.jpg

CSS کامپایل شده
cssmixin.jpg


ادامه دارد ...

منبع : appzweb.ir



 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5

3. تودرتویی (Nesting)

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

با ویژگی تودرتویی، این مشکل حل می شود زیرا تودرتویی، سلسله مراتبی بصری را در HTML ایجاد کرده و از این رو، خوانایی را افزایش می دهد.

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

تودرتویی SASS
sassnesting.jpg

تودرتویی LESS
lessnesting.jpg

تودرتویی STYLUS
stylusnesting.jpg

CSS کامپایل شده
cssnesting.jpg


ادامه دارد ...

منبع : appzweb.ir


 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5

4. Extend ها

Extend ها به شما کمک می کنند تا به جای کپی کردن تعاریف ژنریک، آن ها را با سلکتورها به اشتراک بگذارید. اگر از Less استفاده می کنید، می توانید هم تنها یک instance اصلی را انتخاب کنید و هم هر instance از سلکتورهای بسط یافته را از طریق افزودن همه attribute ها به متد extend بکار بگیرید.

Extend ها در Sass به شکل متفاوتی هستند. این ویژگی در Sass، همه instance های مربوط به سلکتورهای بسط یافته ای را توسعه می دهد که شامل سلکتورهای فرزند و پراپرتی های ارث برده از آن هستند.

Extend ها در SASS
sassextend.jpg

Extend ها در LESS
lessextend.jpg

Extend ها در Stylus
stylusextend.jpg

CSS کامپایل شده
cssextend.jpg


ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
5. import ها

SASS، LESS و Stylys به شما کمک می کنند تا کدتان را برای نگهداری و مدیریت (maintainability) و کنترل بهتر به بخش های کوچک و قابل مدیریت تفکیک نمائید. شما می توانید تکه کدهای مشابه را در پوشه های مشابه دسته بندی کرده و سپس همه آن ها را در CSS اصلی import کنید.

import ها در SASS
sassimport.jpg

import ها در LESS
lessimport.jpg

import ها در Stylus
stylusextend.jpg


ادامه دارد ...

منبع : appzweb.ir
 

hooman_the1

Registered User
تاریخ عضویت
18 آگوست 2012
نوشته‌ها
103
لایک‌ها
5
6. عملیات رنگ (Color Operations)

Stylus، Less و Sass دارای توابع رنگی هستند که به توسعه دهندگان اجازه می دهند به راحتی با آن ها کار کنند. شما می توانید رنگ ها را ترکیب کرده، این ترکیب را روشن تر کنید، آن را محو نموده و میزان اشباع (saturation) آن را تغییر دهید.

عملیات رنگ در SASS

sasscolor.jpg


عملیات رنگ در LESS


lesscolor.jpg


عملیات رنگ در Stylus

styluscolor.jpg


ادامه دارد ...

منبع : appzweb.ir
 
بالا