تا به حال مطمئن هستم که شما در مورد Sass و اینکه چگونه “شما واقعا باید شروع به استفاده از آن کنید!»

یادگیری یک ابزار جدید ممکن است بد باشد و یافتن زمان برای انجام آن تقریباً غیرممکن است، اما گاهی اوقات ابزاری پیش می‌آید که صنعت ما را تغییر می‌دهد و آنقدر خوب است که نمی‌توان آن را نادیده گرفت.

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

این ویژگی های اضافی نیز آنها را می سازد واقعا سرگرم کننده برای استفاده! اکنون ممکن است چیزی شبیه به این دیده باشید:

$i: 6;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i; }
 $i: $i - 2;
}

// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11 

و با خود فکر کرد: “چیه؟ متشکرم، اما من CSS معمولی خود را حفظ خواهم کرد.”

اعتراف می کنم، به نظر دلهره آور است و برخی افراد واقعاً دیوانه کننده هستند، چیزهای پیچیده با Sass، اما من اینجا هستم تا به شما بگویم که هر کسی می تواند از آن استفاده کند و دستاوردهایی که به دست می آورید روی روز اول از شما یک مؤمن ساس می سازد.

راه اندازی Sass برای یک پروژه کمی فراتر از محدوده این مقاله است، اما نصب آن نسبتا آسان است و وب سایت Sass دستورالعمل ها برای لینوکس، مک یا رایانه شخصی. نکته جالب این است که پس از نصب، می توانید هر فایل CSS را که دارید بردارید و نام آن را تغییر دهید .scss آن را به یک فایل Sass تبدیل کنید.

تمام CSS های فرمت شده به درستی Sass معتبر هستند!

این به این معنی است که می‌توانید از Sass استفاده کنید، در حالی که به نوشتن سبک‌های خود مانند همیشه ادامه می‌دهید، و به آرامی با افزایش سطح راحتی خود، ویژگی‌های بیشتری را اضافه می‌کنید. درست است مردم، فقط همان اول. همان اول، اما در اینجا پنج دستاورد عالی وجود دارد که اکنون در اختیار دارید:

1. متغیرها

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

Sass متغیرهایی را به عنوان راهی برای ذخیره اطلاعاتی که می خواهید در سرتاسر شیوه نامه خود مجدداً استفاده کنید، ارائه می دهد. اکنون می‌توانید آن مقدار رنگ یا پشته فونت طولانی را به‌عنوان چیزی که به خاطر سپردن آسان است ذخیره کنید. روش اعلان یک متغیر با علامت دلار است $ به دنبال نام. این نام می تواند هر چه شما می خواهید باشد. سپس یک دونقطه تایپ می کنید : به دنبال آن مقدار و یک نیم دونقطه ;:

$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;

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

.mySelector { font-family: $mainFont; color: $mainColor; }

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

2. @import

اکنون ممکن است با خود بگویید “CSS دارای @ استimportآنقدرها هم جالب نیست» و حق با شماست، اما نسخه‌های CSS و Sass به‌طور قابل توجهی متفاوت هستند. در CSS معمولی @import برگه های سبک دیگر را می کشد اما این کار را با درخواست HTTP دیگری انجام می دهد، چیزی که ما معمولاً می خواهیم از آن اجتناب کنیم. به همین دلیل ممکن است حتی از @ استفاده نکرده باشیدimport قبل از. ساس، روی از سوی دیگر، یک پیش پردازنده است (تاکید روی pre) که آن فایل را می کشد قبل از CSS را کامپایل می کند.

نتیجه یک CSS است page که توسط یک درخواست HTTP مدیریت می شود. این بدان معنی است که شما می توانید css خود را به قطعات کوچکتر و قابل نگهداری تر تقسیم کنید در حالی که هنوز فقط یک مورد را ارائه می کنید. page به مرورگر باید متن را اصلاح کرد روی دکمه؟ دیگر نیازی به جستجوی سبک‌های دکمه‌های مربوط به صفحه‌های سبک ساده نیست. فقط دکمه خود را تا حدی باز کنید و تغییرات را انجام دهید.

جزئی چیست؟ درست همان چیزی که به نظر می رسند. آنها فایل‌های Sass جزئی هستند که حاوی قطعات کوچکی از CSS هستند که می‌توانید آن‌ها را در سایر فایل‌های Sass قرار دهید. آنها با استفاده از زیرخط پیشرو به دنبال یک نام نامگذاری می شوند. _myFile.scss. خط زیر به Sass اجازه می دهد که بداند فایل فقط یک فایل جزئی است و نباید در CSS کامپایل شود. به import این جزئی شما فقط باید @ را اضافه کنیدimport به فایل شما به این صورت:

@import 'partials/myPartial';

بنابراین من وارد می کنم _myPartial.scss که در پوشه ای به نام partials قرار دارد. لازم نیست زیرخط یا پسوند فایل را وارد کنید. Sass به اندازه کافی هوشمند است که بداند منظور شما کدام فایل است. استفاده از قطعات جزئی به ما امکان می دهد تا یک راه عالی برای مدولار کردن کدمان، قابل حمل تر و نگهداری آن را آسان تر کند.

3. توابع رنگ

Sass توابع را به حزب CSS می آورد. من می دانم که همه برنامه نویس نیستند و مفهوم یک تابع ممکن است کمی بیش از حد ذهن شما را به خود مشغول کند، اما نگران نباشید، بسیاری از آنها تعداد زیادی ویژگی مفید را اضافه می کنند در حالی که خیلی پیچیده نیستند. در مورد رنگ‌ها، چندین مورد مفید برای دستکاری آن‌ها وجود دارد، اما سه مورد به‌عنوان دستاوردهای عالی و آسان برای افرادی که تازه شروع به کار کرده‌اند برجسته می‌شوند. بیایید روش استفاده از آنها را بررسی کنیم.

//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)

نحو بسیار مستقیم است. در سه تابع بالا می بینید که برای هر کدام دو آرگومان داریم. اولین مورد رنگی است که می خواهیم دستکاری کنیم. این می تواند یک هگزادسیمال، RGB یا هر فرمت رنگی باشد که CSS مناسب است. حتی می تواند یک متغیر باشد. دوم مقداری است که می خواهیم آن رنگ را بر اساس آن تغییر دهیم. 10٪ تیره تر کنید، 5٪ روشن کنید، آلفا را روی 0.6 قرار دهید. نتیجه این تابع مقداری است که در CSS کامپایل شده تنظیم شده است. بنابراین در زیر شما عملکردهای ما را در حال کار می بینید

//in parenthesis you can put any color value followed by the amount you want to modify it by.
//lighten(#000, 10%)
//darken(rgb(0,0,0), 25%)
//rgba(blue, 0.6)
//rgba($mainColor, 0.6)
//use case
$color: #333;//set color variable
.myButton {
 background-color: rgba($color, 0.8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
}
//this compiles to:
.myButton {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
}

امیدوارم قبلاً بتوانید ببینید که چگونه می تواند مفید باشد. ده‌ها راه برای استفاده از این سه عملکرد برای افزودن کنتراست رنگی بسیار سرد وجود دارد و می‌توان از آن‌ها در هر جایی که مقدار رنگ معمولی است استفاده کرد. این سه فقط نوک کوه یخ هستند. توابع رنگی بسیار بیشتری وجود دارد و راه های خلاقانه زیادی می توان از آنها استفاده کرد.

4. مخلوط

نوشتن برخی چیزها در CSS کمی خسته کننده است. Mixins گروه‌هایی از اعلان‌های CSS را می‌سازند که می‌توانیم در سرتاسر سایت خود دوباره از آنها استفاده کنیم. سبک‌های CSS3 که به پیشوندهای فروشنده نیاز دارند، نمونه‌ای عالی از زمان استفاده از میکسین هستند. به جای تایپ کردن یک ویژگی یکسان، یک بار یک mixin می نویسیم، سپس هر زمانی که بخواهیم از آن استفاده کنیم، آن mixin را فراخوانی می کنیم. برای اعلام یک mixin از @mixin کلمه کلیدی. سپس نامی به آن می‌دهیم و استایل‌های خود را در بین بریس‌های فرفری مانند زیر اعمال می‌کنیم:
@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
حتی می توان آرگومان ها را به میکسین منتقل کرد تا انعطاف پذیرتر شود. برای استفاده از میکسین ما فقط از آن استفاده می کنیم @include کلمه کلیدی.

//declare mixin(now being passed an argument)
@mixin box-sizing($boxSize) {
 -webkit-box-sizing: $boxSize; 
 -moz-box-sizing: $boxSize; 
 box-sizing: $boxSize;
}

//use mixin
.mySelector {
 @include box-sizing(border-box);
}


//compiled to:
.mySelector {
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
}

همانطور که در مثال بالا مشاهده می کنید، ما mixin خود را با the می نامیم @include به دنبال آن نام mixin و سپس هر آرگومان داخل پرانتز. به این فکر کنید که این کار چقدر در زمان شما صرفه جویی می کند. چرا همه از این استفاده نمی کنند؟

5. @extend

این ابزارها عالی بودند اما من بهترین ها را برای آخر ذخیره کرده ام. @extend یکی از مفیدترین ویژگی هایی است که به ما امکان می دهد مجموعه ای از ویژگی های CSS را از یک انتخابگر به انتخابگر دیگر به اشتراک بگذاریم. به یک جفت دکمه فکر کنید، مانند دکمه پذیرش و رد کردن روی یک پنجره مودال از آنجایی که هر دو دکمه هستند، احتمالاً اکثر استایل یکسانی را به اشتراک خواهند گذاشت، اما دکمه کاهش یک پس‌زمینه قرمز برای برجسته کردن آن خواهد داشت. با Sass ما سبک های پیش فرض را برای همه دکمه ها می نویسیم و سپس این استایل ها را به دکمه نزول “بسط” می دهیم که در آن پس زمینه قرمز را اضافه می کنیم.

.button {
 background: rgba($color, .8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 @extend .button;
 background: red;
}
//compiles to
.button, .button-decline {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 background: red;
}

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

هک، با تمام زمانی که صرفه‌جویی می‌کنیم، شاید بتوانیم جنبه‌های پیچیده‌تر Sass را یاد بگیریم.

جمع بندی و ادامه مطلب

امیدوارم من شما را متقاعد کرده باشم که به این ابزار شگفت انگیز نگاهی بیاندازید و برخی از ویژگی هایی را که می تواند بهره وری شما را فوراً بهبود بخشد، نشان داده باشم. حقیقت این است که می‌توانم فردا دوباره این مقاله را بنویسم و ​​پنج ویژگی واقعاً منظم دیگر برای به اشتراک گذاشتن داشته باشم. این فقط بسیار عالی است! Sass (و سایر پیش پردازشگرها) اینجا هستند تا بمانند، پس به خودتان لطف کنید و شروع به استفاده از آن کنید. برای کسانی که علاقه مند به کسب اطلاعات بیشتر هستند، این منابع را بررسی کنند روی توییتر و وب:

توئیت ها:

• https://twitter.com/SassCSS
• https://twitter.com/SassBites
• https://twitter.com/TheSassWay
• https://twitter.com/HugoGiraudel
• https://twitter.com/guilh
• https://twitter.com/sflsass

وب ها:

• http://sass-lang.com
• http://thesassway.com/

و اگر در منطقه سه کانتی فلوریدا جنوبی هستید، به ما بپیوندید ملاقات ساس فلوریدا جنوبی.