26.07.2017

5 بهترین پیش پردازنده CSS در سال 2017 که گردش کار شما را سرعت می بخشد.

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

به عبارت دیگر، یک پیش پردازنده CSS افزودنی به CSS با ویژگی های جدید است: متغیرها، پسوندها، واردات و غیره.

در آن مقاله، من در مورد بهترین 5 پیش پردازنده CSS در سال 2017 صحبت خواهم کرد.

01. ساس

SASS محبوب ترین پیش پردازنده با جامعه بزرگ و عملکرد قدرتمند است. این فقط در ارتباط با روبی کار می کند و یادگیری آن بسیار آسان است. اکثر فریم ورک های فرانت اند مانند Bootstrap، Foundation و materialize با استفاده از SASS ساخته می شوند.

SASS دارای دو نحو است:

• .سسس
• scss

02. قلم

Stylus یکی دیگر از پیش پردازنده های عالی برای تولید پویا CSS است. اگر می خواهید پرانتزها، کاما و نیم ویرگول ها را حذف کنید، ممکن است برای شما مناسب باشد. بهترین انتخاب. Stylus روی Node.js اجرا می شود و نصب و استفاده از آن بسیار آسان است. دارای بسیاری از توابع سفارشی است، به عنوان مثال، saturation(). شما همچنین می توانید از تمام ویژگی های ارائه شده توسط سایر کامپایلرهای پیشرو استفاده کنید.

03. کمتر

Less که با نام Less.js یا Less CSS نیز شناخته می شود، یکی دیگر از پیش پردازنده های پیشرو CSS است. اگر به ویژگی‌های استاندارد مانند متغیرها، سبک‌های تودرتو و غیره نیاز دارید، این یک انتخاب عالی است. این کتابخانه جاوا اسکریپت در اصل به زبان روبی نوشته شده بود.

• همچنین بخوانید:

04.Stylecow

Stylecow یک پیش پردازنده نوشته شده در Node است که می تواند با استفاده از npm نصب شود. دارای یک API قدرتمند است که ایجاد پلاگین را آسان می کند.

05. CSS-Crush

یک پیش پردازنده ساخته شده در PHP که تبدیل خواهد شد گزینه عالیبرای برنامه نویسان PHP زیرا روی پلتفرم های زیادی کار می کند. CSS-Crush دارای تمام ویژگی های معمول پیش پردازنده (متغیرها، سبک های تو در تو و غیره) است.

نتیجه

اگر دنبالش هستید بهترین cssپیش پردازنده، سپس تنوع زیادی از گزینه های مختلف را در اینترنت پیدا خواهید کرد. به نظر من، بهترین گزینه هابرای مبتدیان، اینها SASS و Stylus هستند.

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

چگونه پیش پردازنده های CSS به وجود آمدند

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

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

در سال 1994، دانشمند نروژی Haakon Lie یک شیوه نامه طراحی کرد که می توان از آن برای طراحی استفاده کرد. ظاهرصفحات جدا از سند HTML این ایده توجه نمایندگان کنسرسیوم W3C را به خود جلب کرد که بلافاصله شروع به اصلاح آن کردند. چند سال بعد، اولین نسخه از مشخصات CSS منتشر شد. سپس به طور مداوم بهبود و اصلاح شد ... اما مفهوم همان باقی ماند: به هر سبک ویژگی های خاصی داده می شود.

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

و سپس دو هزارم رسید. توسعه دهندگان حرفه ای front-end به طور فزاینده ای شروع به درگیر شدن در نشانه گذاری کردند که برای آنها انعطاف پذیری و کار پویابا سبک ها CSS که در آن زمان وجود داشت به پشتیبانی از پیشوند و ردیابی برای ویژگی های جدید مرورگر نیاز داشت. سپس کارشناسان جاوا اسکریپت و روبی وارد کار شدند و پیش پردازنده هایی ایجاد کردند - افزونه هایی برای CSS که ویژگی های جدیدی را به آن اضافه می کنند.

CSS برای مبتدیان: ویژگی های پیش پردازنده ها

آنها چندین عملکرد را انجام می دهند:

• یکپارچه سازی پیشوندها و هک های مرورگر؛

• ساده سازی نحو؛

• کار با انتخابگرهای تودرتو بدون خطا را ممکن می کند.

• بهبود منطق استایل

به طور خلاصه: پیش پردازنده منطق برنامه نویسی را به قابلیت های CSS اضافه می کند. در حال حاضر یک ظاهر طراحی شده نه با شمارش معمول سبک ها، بلکه با استفاده از چندین تکنیک و رویکرد ساده انجام می شود: متغیرها، توابع، ترکیب ها، حلقه ها، شرایط. علاوه بر این، استفاده از ریاضیات ممکن شد.

W3C با مشاهده محبوبیت چنین افزونه هایی، به تدریج شروع به افزودن ویژگی هایی از آنها به کد CSS کرد. به عنوان مثال، تابع calc() در مشخصات ظاهر شد که توسط بسیاری از مرورگرها پشتیبانی می شود. انتظار می رود به زودی امکان تنظیم متغیرها و ایجاد میکسین وجود داشته باشد. با این حال، این در آینده‌ای دور اتفاق می‌افتد و پیش‌پردازنده‌ها در حال حاضر اینجا هستند و در حال حاضر به خوبی کار می‌کنند.

پیش پردازنده های محبوب CSS ساس

در سال 2007 توسعه یافته است. در ابتدا یکی از اجزای Haml، یک موتور قالب HTML بود. گزینه های مدیریتی جدید عناصر CSSتوسعه دهندگان Ruby on Rails آن را پسندیدند و شروع به توزیع آن در همه جا کردند. Sass تعداد زیادی ویژگی را معرفی کرد که اکنون در هر پیش پردازنده گنجانده شده است: متغیرها، تودرتو انتخابگرها، میکسین ها (اما در آن زمان نمی توانستید آرگومان هایی به آنها اضافه کنید).

اعلان متغیرها در Sass

متغیرها با استفاده از علامت $ اعلام می شوند. می توانید ویژگی ها و مجموعه های آنها را در آنها ذخیره کنید، به عنوان مثال: "$borderSolid: 1px solid red;". در این مثال، متغیری به نام borderSolid را اعلام کردیم و مقدار 1px را به رنگ قرمز در آن ذخیره کردیم. حال اگر در CSS نیاز به ایجاد یک حاشیه قرمز با عرض 1 پیکسل داشته باشیم، به سادگی این متغیر را بعد از نام ویژگی مشخص می کنیم. پس از اعلام، متغیرها قابل تغییر نیستند. چندین عملکرد داخلی در دسترس هستند. به عنوان مثال، اجازه دهید یک متغیر $redColor با مقدار #FF5050 اعلام کنیم. اکنون در کد CSS، در ویژگی های یک عنصر، از آن برای تنظیم رنگ فونت استفاده می کنیم: p (color: $redColor; ). آیا می خواهید رنگ را آزمایش کنید؟ از عملکردهای تیره یا روشن استفاده کنید. این کار به این صورت انجام می شود: p (رنگ: تیره ($redColor، 20%)؛ ). در نتیجه، رنگ قرمز 20 درصد روشن تر می شود.

لانه سازی

قبلاً لازم بود از ساختارهای بلند و نامناسب برای نشان دادن تودرتو استفاده شود. بیایید تصور کنیم که یک div حاوی p داریم و آن نیز به نوبه خود حاوی یک span است. برای div باید رنگ فونت را قرمز، برای p - زرد، برای span - صورتی تنظیم کنیم. در CSS معمولی این کار به صورت زیر انجام می شود:

با کمک یک پیش پردازنده CSS، همه چیز ساده تر و فشرده تر می شود:

عناصر به معنای واقعی کلمه در یکدیگر "تودرتو" شده اند.

دستورالعمل های پیش پردازنده

با استفاده از دستور @import می توانید فایل ها را وارد کنید. به عنوان مثال، ما یک فایل fonts.sass داریم که استایل ها را برای فونت ها اعلام می کند. ما آن را در فایل style.sass اصلی قرار می دهیم: @import ‘fonts’. آماده! به جای یکی فایل بزرگبا استایل‌های مختلفی داریم که می‌توان از آنها برای دسترسی سریع و آسان به ویژگی‌های مورد نیاز استفاده کرد.

هاگ ماهی

یکی از جالب ترین ایده ها. تنظیم مجموعه کاملی از ویژگی ها در یک خط را ممکن می کند. آنها به شرح زیر کار می کنند:

@mixin largeFont (

font-family: 'Times' رومن جدید’;

اندازه فونت: 64px;

ارتفاع خط: 80 پیکسل؛

فونت-وزن: پررنگ;

برای اعمال یک mixin به یک عنصر در صفحه، از دستور include@ استفاده کنید. به عنوان مثال، می خواهیم آن را در هدر h1 اعمال کنیم. نتیجه ساختار زیر است: h1 (@include: largeFont؛ )

تمام ویژگی های mixin به عنصر h1 اختصاص داده می شود.

پیش پردازنده کمتر

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

متغیرها با استفاده از نماد @ اعلام می شوند. به عنوان مثال: @fontSize: 14px;. Nesting بر اساس اصول مشابه در Sass کار می کند. ترکیب‌ها به شرح زیر اعلام می‌شوند: .largeFont() (فونت-خانواده: "Times New Roman"؛ اندازه قلم: 64 پیکسل؛ ارتفاع خط: 80 پیکسل؛ وزن فونت: پررنگ؛ ). برای اتصال، نیازی به استفاده از دستورالعمل های پیش پردازنده نیست - فقط یک mixin تازه ایجاد شده را به ویژگی های عنصر انتخاب شده اضافه کنید. به عنوان مثال: h1 (.largeFont;).

قلم

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

متغیرها را می توان به دو صورت - صریح یا ضمنی - اعلام کرد. به عنوان مثال: font = 'Times New Roman'; - این یک گزینه ضمنی است. اما $font = "Times New Roman" صریح است. مخلوط ها به طور ضمنی اعلام و گنجانده شده اند. نحو عبارت است از: redColor() رنگ قرمز. اکنون می توانیم آن را به عنصر اضافه کنیم، به عنوان مثال: h1 redColor();.

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

کدام پیش پردازنده را باید انتخاب کنید؟

واقعا... مهم نیست. همه گزینه ها تقریباً قابلیت های یکسانی را ارائه می دهند، فقط نحو برای هر کدام متفاوت است. توصیه می کنیم موارد زیر را انجام دهید:

• اگر یک برنامه نویس هستید و می خواهید با استایل ها به عنوان کد کار کنید، از Sass استفاده کنید.
• اگر طراح صفحه‌آرایی هستید و می‌خواهید با سبک‌ها مانند چیدمان معمولی کار کنید، به Less توجه کنید.
• اگر مینیمالیسم را دوست دارید، از قلم استفاده کنید.

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

آیا هیچ سوالی دارید؟

اجرای طرح‌بندی طراح بدون استفاده از HTML و CSS غیرممکن است. اگر یک زبان نشانه گذاری به ما اجازه دهد که الگوی عناصر لازم را ترسیم کنیم، CSS این الگو را به نوع مناسبهمانطور که در منبع آمده است. به نظر می رسد که با کمک CSS خالص می توانید صفحه را همانطور که مشتری می خواهد بسازید.

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

پیش پردازنده CSS چیست؟

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

• قلم

همه پیش پردازنده های فوق عملکرد تقریباً یکسانی دارند، فقط تفاوت های جزئی در نحو وجود دارد. حال، بیایید به سؤالی که قبلاً مطرح شد برگردیم: پیش پردازنده‌ها چه مزایایی به ما می‌دهند تا کد ما را راحت‌تر و قابل نگهداری‌تر کنند؟ این اول از همه لانه سازی است. این ویژگی به ما این امکان را می دهد که عناصر را ساختار دهیم، به راحتی والد یک عنصر را پیدا کنیم، شبه کلاس ها و شبه عناصر را به سرعت بنویسیم و حتی از BEM استفاده کنیم! به عنوان مثال:
.مسیر
رنگ: #fff
&__عنوان
بالشتک: 10 پیکسل
&:shover، &:focus
رنگ آبی

به این قطعه کد نوشته شده در Sass نگاهی بیندازید. این همه به CSS زیر ترجمه می شود:

آهنگ (رنگ: #FFF؛)
.track__title ( padding: 10px;)
.track__title:sover, .track-title:focus (رنگ: آبی)

لاکونیک، راحت، قابل درک، ساختار از والدین به فرزند عالی است، اینطور نیست؟ مزیت دوم و نه کمتر مهم، متغیرها هستند. اصل عملکرد آنها بسیار ساده است: نام متغیر با نماد $ و سپس خود نام شروع می شود. ما مقدار را از طریق یک دونقطه می نویسیم - این می تواند یک رنگ به هر شکل مناسب، مقادیر تورفتگی، عرض، اندازه فونت و غیره باشد. در نتیجه چیزی شبیه به این بدست خواهیم آورد:

$btn-color: آبی;
$font-main-size: 16px;

و نحوه استفاده به صورت زیر خواهد بود:

مسدود کردن (
font-size: $font-main-size;
}

فقط تصور کنید چقدر راحت است. اگر نیاز به تغییر رنگ دکمه ها در سراسر سایت دارید، فقط باید این کار را در یک مکان انجام دهید! خب بریم جلو. سومین و بزرگترین چیزی که پیش پردازنده های CSS می توانند به ما ارائه دهند، استفاده از میکسین ها است. در درک معمول ما، میکسین ها توابعی هستند که می توانند چندین بار بدون تکرار قسمت های یکسان کد استفاده شوند (یکی از اصول برنامه نویسی را به خاطر بسپارید - DRY - خودتان را تکرار نکنید). صادقانه بگویم، من اغلب از میکسین استفاده نمی کنم، ظاهراً چنین نیاز فوری وجود نداشت، اما هنوز چند نمونه را نشان می دهم. یکی از توابعی که من بیشتر استفاده می کنم به شرح زیر است:

@function em($pixels، $context: $browser-context) (
@if (بدون واحد ($pixels)) (
$pixels: $pixels * 1px;
}
@if (unitless ($context)) (
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}

و کاربرد آن به شرح زیر است:

بدن (
اندازه فونت: em(14px);
}

بله، همانطور که متوجه شدید، این فقط یک تبدیل اندازه فونت از PX به Em است (زنده باد روزهایی که برای چنین چیزهای کوچکی از خدمات ویژه استفاده می کردید یا خودتان آنها را روی ماشین حساب محاسبه می کردید). مثال زیر نیز در زمان بسیار صرفه جویی می کند:

@mixin input-placeholder (
&.placeholder (@content;)
&:-moz-placeholder (@content;)
&::-moz-placeholder (@content;)
&:-ms-input-placeholder (@content;)
&::-webkit-input-placeholder (@content;)
}

موارد استفاده آن:

ورودی، ناحیه متنی (
@include input-placeholder (
رنگ: خاکستری $;
}
}

مثال‌های بسیار بیشتری می‌توان ارائه کرد، با این حال، برای درک چگونگی استفاده از میکس‌ها ارزش دارد ابزار مفید. شاید یک دلیل دیگر وجود داشته باشد که شما را عاشق پیش پردازنده های CSS کند و نام آن ماژولار بودن است. سال 2018 است و ماژولار بودن در همه جا وجود دارد - از موتورهای قالب HTML گرفته تا فریمورک های مختلف CSS و سازندگان پروژه.