SASS و LESS چیست؟

LESS یکی از فریم‎ ورک‎ های CSS است که از قوانین CSS استفاده می‎کند؛ LESS توسط روش ‎هایی مانند متغیرها، حسابگرها، mixinها و توابع، قابلیت‎ های CSS را توسعه داده و آن را پویا ساخته است. به گونه ای که می‎ توان کدهای لِس را در یک فایل CSS نوشت. کامپایلر اصلی LESS با استفاده از جاوا اسکریپت نوشته شده است و کد های نگارش یافته را به فرمت استاندارد CSS تبدیل می‎کند. نگارش استایل ‎ها با دید ماژولار از قابلیت ‎های این فریم‎ ورک است. Less خاصیت‎ های پویایی را به CSS اضافه کرده است. به کمک امکانات متعدد آن می ‎توان از زبان CSS به عنوان یک زبان برنامه ‎نویسی استفاده نمود. استفاده مجدد از مقادیر با استفاده از متغیرها، استفاده مجدد از بلاک‌ها با استفاده از mixins ، استایل‌های مختصرتر با قوانین تو در تو ، انجام محاسبات با استفاده از توابع و عملگرها از جمله کارهایی است که می‌توان با این فریم ورک انجام داد

less-website

LESS توسط روش‌ هایی مانند متغیرها، حسابگرها، mixin ها و توابع، قابلیت‌ های CSS را توسعه داده و آنرا پویا ساخته است. LESS در هر دو محیط سمت کاربر (مرورگرهای وب مانند گوگل کروم، فایرفاکس، سافاری) و سمت سرور توسط Node.js و Rhino قابل اجرا و بهره گیری می‌ باشد. این فریم ورک، تنها یک افزونه برای CSS نیست بلکه یک ابزار برای CSS با سینتکس آن است که در ابتدایی ترین حالت می تواند به عنوان یک شیوه‌نامۀ سادۀ CSS استفاده گردد.

چرا LESS؟

نگارش کد های CSS مشابه زبان ‎های برنامه ‎نویسی چون PHP
بهبود نگارش CSS و استفاده بهینه از از CSS٣
قابلیت پیاده ‎سازی در دو سمت سرور و کاربر
تعریف متغیر ها همانند PHP و استفاده از آنها در سایر قسمت ‎ها
اجرای آسان عملیات بر روی متغیر ‎ها
افزایش سرعت کد‎نویسی به کمک mixin
خوانایی و پیمایش بهتر دستورات تو در تو

الحاق متن در هنگام ساختن فریم ‎ورک‎ ها

SASSچیست؟

SASS مخفف Syntactically Awesome Style Sheets می باشد و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید. SASS اساسا یک روش توسعه یافته از کدنویسی در CSS همراه با سینتکس به حساب می آید.

تعدادی از تصورات غلط از SASS برای افرادی که اصلا از آن استفاده نکرده اند وجود دارد. یکی از آن تصورات غلط این است که آیا SASS جایگزین CSS می باشد؟ در پاسخ به این سوال باید گفت خیر ، جواب منفی می باشد ، SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود.
تبدیل SASS به CSS :
برداشت اشتباهی که خیلی از افراد از SASS دارند این است که پس از اتمام کار می بایست فایل ها (SASS،SCSS) مستقیما بر روی سرور قرار گیرند تا مرورگر آن ها را بخواند.
متاسفانه این برداشت غلط می باشد و شما بعد از اتمام کار می بایست برای خوانده شدن توسط مرورگرها آن فایل ها را به CSS تبدیل کنید. به این صورت که شما باید به روش لوکال کد نویسی خود را انجام دهید و بعد از کامپایل آن خروجی CSS را بر روی سرور قرار دهید.
برای کامپایل یا تبدیل SASS به CSS می توانید با استفاده از Ruby و نصب SASS روی آن و یا نرم افزارهایی همچون Prepros این کار را به صورت لحظه به لحظه و یا به یکباره انجام داد.
چرا باید از SASS استفاده کرد؟
اگر شما با برنامه نویسان کامپیوتری در مورد کدنویسی front-end صحبت کرده اید آن ها به شما گفته اند که HTML و CSS زبان احمقانه ایست چون کدهای آن از پیش از تعریف شده است و بارها و بارها تکرار می شود ، حقیقت این است که آن ها در این مورد نصف شما حق دارند.
زبان های برنامه نویسی همچون C++ دارای یک مفهوم رایج به نام DRY یا ( Don’t Repeat Yourself ) مواجه هستند و نمی توانند همچون طراحان front-end کدهای زیادی را کپی کنند. آن ها با مفاهیم ساختی همچون تعریف توابع و … رو به رو هستند.
اما این دلیل نمی شود که شما در برابر دوستان برنامه نویس خود سرخورده شوید اینجا است که SASS به کار می آید.
شما می توانید با استفاده از سینتکس ها و نوشتن توابع سرعت و قدرت خود را در کدنویسی front-end افزایش دهید و هم به دوستان برنامه نویس خود بگویید که کد نویسی front-end آن چنان که فکر می کنند بد نیست.

شباهت های SASS و LESS:

1. کلاس ها (Class)
2. پارامتر ها .
3. قانون کلاس های تو در تو که باعث میشود از کد های تکراری جلوگیری شود.
4. توابعی که باعث میشه بتونیم از محاسبات ریاضی در CSS استفاده کنیم.
5. تابع هایی برای رنگ ها که باعث میشود بهتر رنگ ها را انتخاب کنید.
6. قابلیتی که باعث میشد گروهی از استایل ها را فراخوانی کنید.
7. scope : قابلیتی که باعث میشود استایل هایتان را به صورت local مدیریت کنید.
8. ارزیابی هایی از جاوا اسکریپت که باعث میشود آن را در طراحی سایتتان استفاده کنید.

تفاوتهای SASS و LESS:

مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت – ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است.خیلی از توسعه دهنده ها ممکن است از LESS استفاده نکنند چون همانطور که گفته شد LESS یک library جاوااسکریپت است و ممکن است که کاربر جاوااسکریپت را غیر فعال کند ولی SASS چنین مشکلی ندارد .چند راه حل برای LESS وجود دارد،یکی از راه ها این است که LESS را فقط در حین روند توسعه (Development) استفاده کنید و بعد از این که کارتان تمام شد آن را به صورت یک خروجی CSS تبدیل کنید و بعد آن را توسط یک برنامه minifier به صورت خلاصه و پشت سر هم تبدیل کنید و آن را درون یک فایل جدا CSS بریزید تا به جای فایل های LESS استفاده شوند و یا از برنامه LESS.app استفاده کنید. با این کارها، دیگه کاربر نیازی به فعال بودن java-script بر روی مرورگرش نداره.یکی از خوبی های SASS این است که نیازی نیست آن را به صورت جدا درون فایل CSS بریزید و برای اینکه آن را روی سرور بذارید میتوانید به صورت مستقل اینکار را بکنید و یا فایل CSS را با آن قاطی کنید ولی برای آنکه آن را اجرا کنید باید Ruby را نصب کنید و سپس SASS را نصب کنید .

 

10 کتابخانه جالب Sass که شما باید بدانید

از ویژگی های عالی آن میتوان به کار با متغیرها،mixin (توابعی هستند با امکانات کمتری دارند  چیزی بین توابع و library ها)، توابع، وراثت و تو در تویی آن اشاره کرد. با استفاده از صدها کتابخانه  و فریمورک  و پلاگین هایی که وجود دارند شما میتوانید در هنگام ایجاد وبسایت مورد نظرتان  از آنها استفاده کنید و زمان کمتری را از دست دهید.

در این مقاله ما قصد داریم تا با شما مجموعه ای از 10 کتابخانه جالبSassرا به اشتراک بگذاریم که فکر می کنیم  باید بررسی شوند.

یک سیستم سادهCSSبرای ساخت پوسته های مدرن و زیرماژول هاست . استفاده از آن برای کاربران بسیار ساده است ، شما فقط باید عناصر ستون(.col)خود را در یک grid container(.grid) قرار دهید.

Gridlex به شما طرح های responsive (واکنش گرا) را  که براساس media-queries هستند پیشنهاد میدهد وشبکه های تودرتو را مستقیما در یک ستون پشتیبانی می کند.

Buttons

Css button library  یک کتابخانه open-source و رایگان با قابلیت  تنظیم  دقیق  می باشد که توسط Sass ایجاد شده و به شما یک راه سریع و آسان برای اضافه کردن دکمه های زیبا و رنگارنگ  در وب سایت خودتان را پیشنهاد یا ارائه می دهد.البته انواع مختلفی هم از دکمه ها وجود دارند  از جمله مسطح، گرد، درخشان، 3dو بسیاری موارد دیگرکه میتوانید به سلیقه خودتان آنها را انتخاب کنید

 

Bourbon

بوربون یک کتابخانه ساده و سبکSassاست که راه ساده ای برای ایجادstylesheets  هایی که برای  استفاده مستقل از مرورگر ها میباشند را فراهم میکند

که تقریبا شامل همه چیزی است که شما برای ایجاد یه وب سایت شگفت انگیز نیاز دارید- mixins، توابع و افزونه ها.این کتابخانه بدون وابستگی است و نیاز به تنظیمات ندارد.

Sassy Inputs

یک کتابخانهmixin sass برای استایل دهی به input های فرم با استفاده از CSS3 که روی همه ی مرورگر ها قابل اجراست . این کتابخانه شاملmixinsبرای text، textarea، search، select، radiobutton، checkbox، و button input هاست و همچنین input هایSassyقابل سفارشی سازی  هستند.

Saffron

Sass mixin یکی از ساده ترین  کتابخانه هایSaffron است.

این کتابخانه به شما  سریعترین راه برای اضافه کردن  انیمیشن های css ,  و transitions را پیشنهاد میدهد و برای کاربر فضای راحتی را ایجاد میکند  که بتواند با آن کار کند و تنها کاری که باید انجام دهید اعلام کردن  include ها  و   تعریف کردن متغیرهایی است که میخواهید از آن ها استفاده  کنید

تنوع گوناگونی  در انیمیشن ها  و transitions ها وجود دارد مثل  fade-in، fade-out، slide in، slide out، و bounce و خیلی موارد بیشتر

mini.css

یک فریمورک سبک است و اولین فریم ورک css موبایل است که برای ساخت سایتی ریسپانسیو طراحی شده است و کلا حجم آن 10 kb میباشد.

وهمچنین  responsive بودن آن و دارا بودن ابزار به روز میتواند یک راه سریع و آسان برای ساخت طرح های زیبا برای تمامی اندازه های صفحه نمایش ارائه کند

Angled Edges

یک کتابخانه ی Sass mixin برای ایجاد لبه های زاویه دار در section ها با استفاده از (encoding)انکدینگ SVG است. این کتابخانه یک مثلث SVGایجاد میکند که به عنوان عکس background تنظیم شده است. شما می توانید از پارامترهای آن برای تعیین مکان ، hypotenuse ، رنگ ، عرض و ارتفاع استفاده کنید . تمام مرورگرهای مدرن – Chrome، Firefox، Safari، Edge وIE9+ از آن پشتیبانی میکنند.

Typesettings

با استفاده از typesetting شما میتوانید اندازه فونت خود را در مقیاس ماژولار با EMS ،vertical rhythm و نسبت های responsive براساس اندازه ی متن تنظیم کنید .اندازه ی آن به طور پیش فرض 6px است و اندازه ی عمودی آن با مقیاس پیکسل براساس border تعیین میشود . Typesettings تمام اندازه های دقیق ریاضی را برای Ems مدیریت می کند و از مقیاس ماژولار برای تنظیم اندازه فونت استفاده می کند.

MaterializeCSS

یک فریم ورک css است که مبتنی بر material design میباشد . قابلیت سفارشی سازی بالایی دارد و کاملا responsive میباشد این فریم ورک گلچین زیادی از component ها را به شما ارائه میدهد مثل:  button, card, form, navbar، ( صفحه بندی)pagination ها و کلی موارد دیگر . همچنین از دیگر مزیت های آن میتوان به سازگاریش با  Chrome، Firefox، Safari، EdgeوIE  11+ اشاره کرد.

Included media

کتابخانه Sass است که یک راه آسان برای نوشتن media query ها ارائه میدهد . دارای لیستی از breakpoint های پیش فرض برای گوشی ، تبلت و دسکتاپ است و می توانید به شیوه ای که دوست دارید آن را سفارشی کنید . این کتابخانه به شما امکان نوشتن media query ها با em و rem و ایجاد نام مستعار برای عبارت هایی که زیاد استفاده میشوند را میدهد

 

 

نوشتن Sass در bootstrap Studio

بوت استرپ استودیو، برنامه قدرتمندی برای ساخت وب سایت هاست و یک راه آسان برای نوشتن و ویرایش فایل های Sass ارائه می دهد. شما میتوانید برای طراحی های ویژوال از drag and drop استفاده کنید و با CSS و SASS آن را استایل دهی کنیدو نتیجه را بصورت real-time ببینید.

 

چگونه LESS را install کنیم ؟

 

  1. ابتدا باید فایل های مربوطه رو از سایت http://lesscss.org دانلود کنید.
  2. از فایل less.js یک کپی بگیرید و داخل پوشه وب سایتتون قرار بدید
  3. یک فایل درست کنید و در آن استایل ها تون که به صورت less می باشد بنویسید (مانند:style.less)
  4. و این کد را که در پایین نوشتم در قسمت کد HTML بزنید :

 

<head>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
</head>

همچنین یک Server-side version of LESS وجود داره که یک راه آسون برای برای نصب LESS است. همچنین برای نصب LESS روی سرور از این (Node Package Manager (NPM ابزار استفاده کنید.

متغیر ها (Variables)

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

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

اگر ما این سه رنگ را به 3 تا تگ div اعمال کنیم رنگ ها به صورت زیر میشود .

Image

تنها تفاوتی که در متغیر های درون LESS و SASS وجود دارد این است که در LESS ما از علامت @ استفاده میکنیم و در SASS از $ استفاده میکنیم و چند تا تفاوت در بین Scope های این دو هم وجود دارد .

mixin ها

بعضی مواقع هست که شما مجبور میشید کلاس های مختلفی به تگ هاتون بدید و همش از صفحه stylesheet به html برید که زیاد کار جالبی نیست ولی LESS راه حلی برای این مشکل دارد برای اینکه اینکارو انجام بدید من یک نمونه اینجا گذاشتم:

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}

همانطور که میبینید ما با این کار از زیاد تکرار شدن کدمون جلوگیری میکنیم و این کد خیلی کامل و خوب کار میکند .

Image

اگر بخواهید این کارو با SASS انجام بدید باید کد زیر رو بزنید .

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

درباره badry

دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

bigtheme
x

شاید بپسندید

زبان Go یا Golang چیست؟

زبانِ گو یا Go که به گولنگ یا Golang معروف می باشد ...