menu

ابزار های توسعه دهنده ی مدرن وب

Stylus و Nib

پنجشنبه 25 شهریور 1395

تا به اینجای کار، ما درباره ی دوتا از CSS PreProccessor ها (Sass و Less) صحبت کردیم. یکی دیگه از CSS PreProccessor هایی که میخوام توی این فصل، به عنوان آخرین PreProccessor این کتاب معرفی کنم، اسمش Stylus هست.

توی این فصل، شما دوباره متوجه تفاوت ها و شباهت های بین این پیش پردازنده با Sass و Less میشید.

برای شروع، ابتدا یه سری به سایت Stylus میزنیم

توی این سایت، توی صفحه ی اول یه خلاصه ای از کار با Stylus و این که Stylus چی هست به ما میده، که خوندن اون خالی از لطف نیست و توی منوی کناری هم میتونیم از داکیومنت Syntax های Stylus استفاده کنیم

ادامه ی فصل را، مثل Sass و Less میریم جلو

اول از همه، میریم سراغ نصب Stylus. برای این کار، از npm استفاده میکنم (دقیقا شبیه به Less و برخلاف Sass که از gem استفاده میکرد)

کد زیر را توی ترمینال (یا اکه ویندوز هستید توی Nodejs command Prompt) میزنم

npm install -g stylus

بعد از این که نصب تموم شد، مثل همیشه، برای چک کردن از نصب شدن Stylus میبینیم که ورژن Stylus ما چند هست

stylus --version

یکی از کارای باحالی که میشه با Stylus کرد، این هست که یه سری CSS Refrences ها را توی همون ترمینال با استفاده از Stylus ببینیم. برای این کار توی ترمینال اول کد زیر را میزنیم

stylus -i

و حالا میتونیم کد های CSS خودمون را بزنیم، و Stylus اون ها را پردازش میکنه و خروجیش را توی همون ترمینال به ما نشون میده

بریم سراغ کد زدن با استفاده از Stylus

برای این کار، من اول از همه یه پوشه میسازم به اسم Stylus که فایل هام را اونجا ذخیره کنم، و داخل اون پوشه یه فایل میسازم به اسم style.styl

پسوند styl مال stylus هست و بعدا، با کامپایل کردن اون ما خروجی css ازش میگیریم.

و در نهایت فایل style.styl را با ویرایشگر محبوبم sublime باز میکنم!

برای شروع کار، یه کد ساده ی css توی فایل stylus خودمون میزنم

p{
	color: red;
}

و الان موقع کامپایل کردن این فایل هست. برای کامپایل کردن این فایل کافیه کد زیر را توی ترمینال بزنیم

stylus style.styl

اگه توجه کرده باشید، برخلاف Sass و Less، توی Stylus نیاز نیست که فایل خروجی را تعیین کنیم و بگیم که محتوا را توی فلان فایل بریز. Stylus به طور پیشفرض، خروجیش را توی یه فایل css ذخیره میکنه

و خروجی ما الان یه فایل css هست به اسم style.css که محتواش اینه

p {
  color: #f00;
}

یه نکته ی کوچولو را هم اضافه کنم؛ اگه یادتون باشه، توی Sass ما یه آپشن داشتیم به اسم watch. کاری که میکرد این بود که با زدن این آپشن، دیگه نیازی نبود که ما هر دفعه فایل اصلیمون را کامپایل کنیم تا خروجی css بگیریم و به محض تغییر فایل اصلی، فایل css ما هم به روز رسانی میشد. توی Stylus هم چنین آپشنی هست.

stylus -w style.styl

و این آپشن ما را از این که هر دفعه فایلمون را کامپایل کنیم بی نیاز میکنه. پس بی دردسر میریم سراغ خود کدهای Stylus

یکی از قابلیت های Stylus این هست که برای کدهای CSS خودتون، نیازی نیست که از علامت های } و : و حتی ; استفاده کنید!

Stylus به طور خود کار میدونه که زدن tab یعنی که یه براکت باز کنه و خط بعدی یعنی که ; بزاره و ....

مثلا کد زیر توی stylus

p
	color red

خروجیش این شکلی میشه

p {
  color: #f00;
}

شاید این امکان به نظرتون خیلی ساده باشه، ولی واقعا کاربردی هست و شما را از زدن کد های اضافه خلاص میکنه (مخصوصا آدمای تنبلی مثل من! خود من همیشه از echo استفاده میکنم نه print و تنها دلیلم هم اینه که echo یه کاراکتر کمتر از print هست!)

الف) نظرگذاری (Comment)

اینجا هم دوباره همون قوانین Sass و Less حاکم هست. ما دو نوع کامنت داریم

نوع اول

// Type 1 Comment

و نوع دوم

/*Type 2 Comment */

هست. تفاوت های اونها (مثل Sass و Less) این هست که کامنت نوع اول، بعد از کامپایل خروجیش توی CSS نمایش داده نمیشه و فقط توی فایل Stylus باقی میمونه و کامنت نوع دوم، توی خروجی CSS ما هم نمایش داده میشه

اما توی Stylus، یه نوع کامنت دیگه هم داریم!

قبل از اون، این را هم اضافه کنم. شما توی Stylus، میتونید بگید که بعد از کامپایل، خروجی شما به صورت minified باشه.

برای این کار، کافیه توی ترمینال کد زیر را بزنید

stylus -c style.styl

و آپشن c باعث میشه که ما clean css داشته باشیم. دقیقا مثل پلاگین clean-css توی Less و یا آپشن compressed توی Sass

فرض کنید ما کد زیر را توی فایل stylus.styl داشته باشیم

p{
	color: red;
}
/*Comment type 2*/

اگه ما این فایل را به طور clean css کامپایل کنیم، خروجیش توی فایل style.css به شکل زیر در میاد

p{color:#f00}

اگه دقت کرده باشید، میبینید که توی حالت clean css، نه تنها فایل فشرده شده، بلکه حتی کامنت از نوع دوم هم نمایش داده نمیشه

پس اگه بخواهیم یه کامنت حتما توی فایل css ما باشه چیکار کنیم؟

اینجا stylus برای ما یه کامنت از نوع سوم هم داره!

کافیه کد زیر را بزنیم

/*!Comment Type 3*/

و میبینید که این کامنت حتی توی فایل clean css شده ی ما هم نمایش داده میشه!

ب) متغیر ها (Variables)

یکی از قسمت هایی که توی همه ی CSS PreProccessor ها هست، استفاده از متغیر هاست

فرض کنید ما کد CSS زیر را داشته باشیم

h1{
	color: red;
}
h2{
	color: red;
}
h3{
	color: red;
}

این اصلا بهینه نیست که ما هر دفعه میخواهیم رنگ h1 تا h3 ها را تعیین کنیم، بیایم یه خط کد CSS بنویسیم و مشکل هم اونجایی آغاز میشه، که مثلا توی کد بالا، بخواهیم red را به blue تغییر بدیم. توی یه فایلی که صدها خط کد توش هست، تغییرات اینجوری میتونه دردسر باشه. راه حل استفاده از متغیر هاست. مثلا برای کد بالا میتونیم توی Stylus از متغیر ها به شکل زیر استفاده کنیم

//Variables
h-color = blue;
h1
	color h-color

h2
	color h-color

h3
	color h-color

و بعد از پردازش، کد CSS ما به شکل زیر خواهد بود

h1 {
  color: #00f;
}
h2 {
  color: #00f;
}
h3 {
  color: #00f;
}

اگه توجه کرده باشید، برخلاف Less که از @ و Sass که از $ برای تعریف متغیر ها استفاده میکرد، توی Stylus هیچ علامتی نیست؛ و برخلاف اونها که از : استفاده میکردند، Stylus از = استفاده میکنه

البته یه نوع دیگه از Syntax هم برای متغیر ها داریم

$h-color2 = green
h4
	color $h-color2

و خروجیش میشه

h4 {
  color: #008000;
}

پ) توابع

اینجا هم دقیقا توابع یا mixin ها را داریم

فرض کنید کد زیر را توی CSS داشته باشیم

.box{
	border-radius: 10px;
}

همونطور که میدونید، ما باید یه سری prefix مثل moz و webkit به این Selector خودمون بدیم. اگه واقعا بخواهیم با هر کد CSS3 این کار را بکنیم، کار خیلی وقت گیری میشه. ما میتونیم یه تابع بنویسیم که خیلی راحت برای ما prefix ها را بزاره

//Functions
vendor(property, arguments)
	-webkit-{property} arguments
	-moz-{property} arguments
	{property} arguments
	
border-radius()
	vendor('border-radius', arguments)
box-shadow()
	vendor('box-shadow', arguments)
.box
	border-radius 10px
.main
	box-shadow 0 0 0 red

کاری که من کردم این هست که اول از همه یه تابع به اسم Vendor نوشتم، که دو تا آرگومان داره. آرگومان اول اون اسم اون خصیصه هست که میخواهیم استفاده کنیم ازش (مثلا box-shadow یا border-radius) و آرگومان دوم هم بقیه ی آرگومان هایی هست که کاربر وارد میکنه (مثلا 10px یا red یا هرچیز دیگه ای که تهش وارد کنه همه یه جا به عنوان بقیه ی آرگومان ها در نظر گرفته میشند)

داخل تابع vendor هم میاد و prefix های moz و webkit را اضافه میکنه به اون آرگومانی که کاربر وارد کرده، و در نهایت مقادیری که کاربر وارد کرده را همه را باهم یه جا میزاره ته اون خصیصه

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

داخل تابع border-radius هم اومدم تابع vendor را فراخونی کردم و مقدار اولین آرگومان اون را که همون اسم خصیصه هست، border-radius دادم تا برای من prefix های moz و webkit را به این خصیصه اضافه کنه

و در نهایت توی Selector خودم که box هست، اون تابع border-radius را فراخوندم (دقیقا همین روش را برای box-shadow هم انجام دادم)

و خروجی CSS من این شکلی میشه

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.main {
  -webkit-box-shadow: 0 0 0 #f00;
  -moz-box-shadow: 0 0 0 #f00;
  box-shadow: 0 0 0 #f00;
}

بیاید یه تابع دیگه هم بسازیم برای transition، اما کمی متفاوت

فرض کنید ما CSS زیر را داشته باشیم

.box-2{
	transition: width 2s linear 1s;
	-webkit-transition: width 2s linear 1s;
}

میخواهیم با استفاده از Stylus و توابع، کاری کنیم که راحت تر بشه کد بالا را تولید کرد

کافیه بزنیم

transition(arguments...)
	transition arguments
	-webkit-transition arguments
.box-2
	transition width 2s linear 1s

و خروجی CSS اون میشه

.box-2 {
  transition: width 2s linear 1s;
  -webkit-transition: width 2s linear 1s;
}

نکته ی قابل توجه توی کد بالا، وجود سه تا نقطه بعد از arguments هست. این سه تا نقطه به ما میگه که ما تنها یه ورودی نداریم و ممکنه که چند تا آرگومان داشته باشیم، و همه ی اون آرگومان ها جمعا میاد میشه آرگومان اول ما

این سه تا نقطه ی ساده، میتونه توی نوشتن توابع به ما خیلی کمک کنه!

تا به اینجای کار، کار ما با Stylus تموم شد و به همین چند قسمت کوتاه بسنده میکنم. مطمئنا این تمام امکانات و مزیت های Stylus نیست و به شما توصیه میکنم حتما سری به سایت Stylus بزنید و به داکیومنت های اون نگاهی بندازید

در ادامه، من میخوام یه ابزار دیگه ی مرتبط به Stylus را هم معرفی کنم

اسم این ابزار، Nib هست. Nib یک کتابخونه برای کد های CSS3 هست که بر اساس Stylus نوشته شده. خیلی خیلی شبیه به Compass برای Sass. این کتابخونه کدهای زیادی برای CSS3 توی Stylus در اختیار شما میزاره

بیاید یه نگاه کوتاهی هم به Nib داشته باشیم. برای شروع اون را هم از طریق npm نصب میکنیم

npm install -g nib

بعد از این که نصب شد، میتونیم توی فایل Stylus خودمون از nib استفاده کنیم. 

برای این کار، توی فایل style.styl کد زیر را میزنیم

@import 'nib'

و کدمون را کامپایل میکنیم. ولی دست نگه دارید! برای کامپایل، باید بگیم که ما میخواهیم از nib استفاده کنیم. برای این کار، کد ترمینال خودمون را اینجوری میزنیم

stylus -w -u nib style.styl

ظاهرا اتفاق خاصی نیفتاده، ولی ما الان میتونیم از امکانات css3 مربوط به nib استفاده کنیم. مثلا بیاید یه background gradient بسازیم. توی فایل styl خودمون میزنیم

body
	background linear-gradient(top, white, black)

و خروجی CSS اون میشه

body {
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
}

و البته این هم معرفی کوتاهی از nib. امیدوارم بقیه ی کارآیی های nib را هم خودتون مرور کنید و ازش توی پروژه هاتون استفاده کنید. (اینجا هم همون قوانین 5:1 هست! 1 ساعت اینجا بخون، 5 ساعت خودت دنبالش بگرد و یاد بگیر!)

تا به اینجای کار، ما درباره ی پیش پردازنده های معروف و مهم CSS صحبت کردیم. از Sass صحبت کردیم و یه سری هم به Compass زدیم. درباره ی Less حرف زدیم و با Stylus و Nib کار کردیم. این که شما کدومش را انتخاب میکنید، به خودتون بستگی داره، اما بهتون پیشنهاد میکنم که این دو مقاله را هم یه نگاهی بهش بندازید

این یه نظر سنجی، درباره ی این سه تا پیش پردازنده هست. همونطور که خود من دوست دارم، بقیه هم Less را بیشتر پسندیده اند!

و این مقاله هم میتونه مفید واقع بشه. یه نقل قول هم میکنم از Chris Coyier توی همین مقاله: کدهاتون را توی PreProccessor تون جوری بنویسید، که وقتی ازش خروجی CSS میگیرید، CSS هاتون همونجوری باشه که بدون استفاده از PreProccessor ها مینوشتیدشون. (Write your sass/less so that the output is exactly how you would have written your CSS without it.)

این فصل هم به پایان رسید. در فصل های بعدی، سری هم به PreProccessor های HTML و JS میزنیم