SASS چیست و چه کاربردی دارد؟ چگونه از Sass در Css استفاده کنیم؟

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

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

آنچه در این مقاله می آموزید:

Preprocessor چیست؟

پیش پردازنده ها یا preprocessors ابزارها یا برنامه هایی هستند که یک مدل کد را دریافت می کنند و آن را به کد دیگری تبدیل می کنند. می توانیم پیش پردازنده های محبوب زبان HTML و CSS را Haml و Sass نام ببریم. پیش پردازنده Haml برای HTML و پیش پردازنده sass برای CSS طراحی شده اند. Preprocessor ها به غیر از رفع مشکلات کدنویسی، روش هایی را برای بالا بردن کدنویسی به طراحان ارائه می دهند.

پیش پردازنده های css

پیش پردازنده های CSS یا css preprocessors ابزارهایی هستند که قابلیت هایی را به فایل های CSS اضافه می کنند. علاوه بر این باعث صرفه جویی در وقت و میزان کار یک توسعه دهنده وب می شوند. این پیش پردازنده ها با کمک قابلیت هایی همچون متغیرها، اپراتورها، interpolation ها، توابع و mixins عملکرد CSS را افزایش می دهند.

SASS چیست؟

Sass مخفف عبارت Syntactically Awesome Stylesheets می باشد که به عنوان یک افزونه یا پیش ‌پردازنده (Preproccesor) زبان css به حساب می آید. شما با استفاده از Sass می توانید، به راحتی از استایل ها آسان کنید، حتی در زمان هایی که فایل های css شما بسیار بزرگ و پیچیده هستند. sass علاوه بر آسان کردن کار با استایل ها، وظیفه نگهداری استایل ها را هم بر عهده دارد. به دلیل وجود متغیر ها، mixins ها، nesting ها و وراثت در Sass، به راحتی کدهای نوشته شده، سازماندهی می شوند.

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

نرم افزار‌ های کامپایل کدهای Sass

شما با نرم افزار های کامپایل زیر می توانید، کدهای‌sass را به CSS اضافه نمایید.

CodeKit (Paid) Mac
Compass.app (Paid, Open Source) Mac Windows Linux
Ghostlab (Paid) Mac Windows
Hammer (Paid) Mac
Koala (Open Source) Mac Windows Linux
LiveReload (Paid, Open Source) Mac Windows
Prepros (Paid) Mac Windows Linux
Scout-App (Free, Open Source) Windows Linux Mac

نصب نرم افزار Scout-App

نرم افزار Scout-App یکی از محبوب ترین، جذاب ترین نرم افزار های کامپایل sass می باشد که به صورت رایگان در اختیار کاربران قرار می گیرد. این نرم افزار به صورت Open Source می باشد و برای سیستم‌ عامل ‌های Mac، Windows و Linux تولید شده است.

مراحل نصب نرم افزار Scout-App

مرحله اول

نرم افزار Scout-App را دانلود و آن را نصب نمایید تا صفحه زیر برای شما باز شود.

مرحله دوم

در این مرحله باید پروژه خود را وارد نمایید یا پروژه جدید ایجاد نمایید. برای وارد کردن پروژه خود، پوشه پروژه خود را انتخاب نمایید و در قسمت مشخص شده در تصویر زیر بکشید (Drag and Drop). در صورتی که بخواهید پروژه جدید ایجاد نمایید، بر روی گزینه Add a Project کلیک نمایید و از صفحه باز شده بر روی دکمه Make New Folder کلیک نمایید. برای اتمام کار بر روی OK کلیک نمایید.

مرحله سوم

زمانی که پوشه جدید ایجاد کردید، نام آن را Sass-Project بگذارید. فراموش نکنید که در این مرحله فایل‌ های‌sass و پوشه فایل‌ های css را به فایل پروژه خود اضافه نمایید. برای اضافه کردن اطلاعات خود، همانند تصویر زیر در قسمت Input Folder پوشه مربوط به فایل‌ های Sass و در قسمت Output Folder پوشه مربوط به فایل‌ های CSS خود را اضافه نمایید.

مرحله چهارم

در این مرحله به قسمت Environment بروید و در بین گزینه های آن، گزینه Development را انتخاب نمایید تا کدهای شما قابل ویرایش باشند. برای فشرده شدن کدها بد از کامپایل، گزینه Compressed را انتخاب نمایید.

مرحله پنجم

این مرحله آخرین مرحله نرم افزار Scout-App می باشد. در نوار سمت چپ صفحه رو به رو خود که همانند تصویر زیر می باشد، بر روی گزینه مشخص شده کلیک نمایید. فراموش نکنید که قبل از کلیک بر روی آن، کدهای خود را در برنامه بنویسید یا وارد نمایید.

آموزش مقدماتی Sass

در این قسمت می خواهیم به شما نحوه استفاده از Sass را آموزش دهیم.

Syntax (سینتکس)

sass به طور کلی دارای 2 Syntax می باشد که به طور کامل به آن ها می پردازیم.

(SCSS (Sassy CSS

نوشتن کدها در scss به سادگی sass نمی باشد و این سینتکس به خوبی از فرمت scss. و CSS پشتیبانی می کند.

دندانه‌ دار (همان Sass)

نوشتن کدها در sass خلاصه ‌تر و راحت ‌تر می باشد و به خوبی از CSS پشتیبانی می کند. این مدل Syntax دارای از فرمت sass. می باشد و از آن استفاده می کند.

استفاده از هر کدام از Syntax های sass به راحتی و سلیقه شما بستگی دارد.

کامنت گذاری

شما برای اینکه بتوانید در sass کامنت گذاری کنید، می توانید همانند زبان سی شارپ عمل کنید.

از علامت // برای کامنت گذاری خطوط تک خطی استفاده می شود.
از علامت /**/ برای کامنت گذاری خطوط چند خطی استفاده نمایید.

ایجاد متغیر (Variables)

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

Sass code

$font–stack: Helvetica, sans–serif

$primary–color: #333

body

font: 100% $font–stack

color: $primary–color

CSS compiled code

} body

;font: 100% Helvetica, sans-serif

;color: #333

{

در مثالی که برای شما زده ایم، یک متغییر برای نام فونت ها و دیگری را برای رنگ ایجاد کرده ایم.

شما با داشتن متغییر به راحتی می توانید به جای تغییر کد رنگ یا فونت و …، تنها مقدار متغییر مورد نظر خود را تغییر دهید.

تو در تو (Nesting)

همانطور که در جریان هستید، قابلیت تو در تو تنها در زبان HTML وجود دارد و css از این قابلیت پشتیبانی نمی کند. اما CSS با افزونه Sass می تواند از قابلیت تو در تو پشتیبانی کند. به مثال زیر توجه نمایید.

Sass code

nav

margin: 0

padding: 0

list-style: none

display: inline-block

display: block

padding: 6px 12pxtext-decoration: none

CSS compiled code

} nav ul

;margin: 0

;padding: 0

;list-style: none

{

} nav li

;display: inline-block

{

} nav a

;display: block

;padding: 6px 12px

;text-decoration: none

{

ایجاد توابع (Mixins)

شاید برای شما هم پیش آمده باشد که در زمان کدنویسی CSS، کدهایی به دفعات بسیار تکرار می شوند. برای برطرف کردن این موضوع می توانید از افزونه Sass استفاده نمایید. Sass به وسیله ویژگی Mixins خود که همان function زبان های برنامه نویسی می باشد، یک الگو ایجاد می کند و آن الگو را به تعداد دفعات مورد نیاز تکرار می کند. همانند مثال زیر.

Sass code

(transform($property=

webkit-transform: $property-

ms-transform: $property-

transform: $property

box.

((transform(rotate(30deg+

CSS compiled code

} box.

;(webkit-transform: rotate(30deg)-

;(ms-transform: rotate(30deg)-

;(transform: rotate(30deg)

{

Partial ها

Partial ها به فایل های کوچک درون Sass گفته می شود که امکان import شدن به درون دیگر فایل ‌های Sass را برای طراح ایجاد می کنند. شما با استفاده از قابلیت Partial می توانید، فایل های ماژولاری css خود را درون sass وارد نمایید و از آن ها نگهداری کنید. به صورت زیر نام گذاری می شوند.

_partial.scss

Import

import دارای دستور import@ می باشد که به وسیله این دستور می توانید Partial ها را به خود های خود اضافه نمایید. فراموش نکنید که این کار به وسیله Http Request انجام می شود. به مثال زیر توجه نمایید.

Sass code

reset.scss_ //

,html

,body

,ul

} ol

;margin: 0

;padding: 0

{

basefile.scss //

;’import ‘reset@

} body

;font: 100% Helvetica, sans-serif

;background-color: #efefef

{

CSS compiled code

} html, body, ul, ol

;margin: 0

;padding: 0

{

} body

;font: 100% Helvetica, sans-serif

;background-color: #efefef

{

توسعه / ارث ‌بری

ارث بری این امکان را برای شما فراهم می کند تا بتوانید استایل های مربوط به سلکتورها را دریافت نمایید و در صورت نیاز آن ها را ارث بری نمایید. شما برای اجرای این قابلیت می توانید از دستورالعمل @extend استفاده کنید.

عملگر

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

نگهدارنده placeholder

نگهدارنده ها همانند متغیر ها می باشند که با علامت % مشخص می شوند. تفاوت نگهدارنده ها با متغیر ها این است که نگهدارنده ها توانایی بیشتری در نگهداری یک بلاک کد را دارند.

} %shared-font-size
 ;font-size: 14px
 {

دستور مخلوط @mixin

دستور مخلوط @mixin مانند %placeholder عمل می کند ولی به نسبت %placeholder امکانات بیشتری را در اختیار شما قرار می دهد.

} (mixin img-responsive($display: block @

;display: $display

max-width: 100%; // Part 1: Set a maximum relative to the parent

height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching

{

دستورات شرطی

دستورات شرطی شامل موارد زیر هستند.

@if(شرط){}
@else{}
@else if{}

آرایه Array

آرایه ها با علامت $ نمایش داده می شوند و در زمان کدنویسی با علامت ( ( ) ) باز و بسته می شوند.

) :colors$

,(grey: ( dark: #444, base: #666, light: #999 )

(brand: ( pink: #ff69b4, blue: #0000ff

(

حلقه های تکرار

حلقه های تکرار شامل 3 حلقه زیر می باشند.

for@

} for $i from 1 through 3@
$i // is value
{

while@

}(شرط) while@

…

{

each@

} each $i in array @

…

{

روش های کاربردی برای استفاده از sass

در این قسمت می خواهیم روش های مختلف استفاده از SASS در پروژه را به شما معرفی نماییم.

به صورت یک ماژول مستقل Ruby

اگر می خواهید، توسعه پروژه خود را در بستر ویندوز انجام دهید، باید Ruby را نصب نمایید یا به صورت ماژول مستقل از Ruby است کنید.

به صورت یک ابزار خط فرمان (Command line tool)

در این قسمت به چند نمونه از دستورات خط فرمان می پردازیم.

دستور sass input.scss output.css

این دستور به شما این امکان را می دهد تا بتوانید کد های SASS را از خط فرمان (Command line) اجرا کنید.

دستور sass –watch input.scss:output.css

این دستور به SASS این دستور را می دهد که در صورت تغییر محتوای فایل sass، مقادیر css را نیز بروز رسانی نماید.

sass –watch app/sass:public/stylesheets

این کد به sass کمک می کند تا بتواند بر روی تمام محتوای پوشه/directory نظارت داشته باشد.

افزونه ی Rack/Rails/Merb

افزونه ی Rack

افزونه Rack به عنوان یک رابط وب سرور (web server interface) معرفی شده است که توسعه دهنده به وسیله آن می تواند اپلیکیشن های تحت وب به زبان Ruby طراحی نماید. برای استفاده و فعال سازی از SASS در اپلیکیشن های مبتنی بر Rack، کد زیر را به فایل config.ru موجود در پوشه ی root اضافه نمایید.

‘require ‘sass/plugin/rack

use Sass::Plugin::Rack

افزونه ی Rails

افزونه Rails یک فریم ورک توسعه ی اپلیکیشن های تحت وب (Web framework) می باشد که به صورت متن باز و رایگان (open-source) در اختیار کاربران قرار می گیرد. این افزونه از استاندار هایی همچون JSON ،HTML ،CSS و JavaScript برای طراحی ظاهر سایت و … استفاده می کند. شما برای استفاده از افزونه Rails باید کد اول را به فایل environment.rb موجود در پوشه ی config اضافه نمایید. کد دوم نیز وارد فایل Gemfile نمایید.

“config.gem “sass

“gem “sass

افزونه ی Merb

افزونه Merb همانند افزونه های Rails و Rack، یک فریم ورک توسعه ی اپلیکیشن های تحت وب می باشد. این افزونه ویژگی هایی همچون سرعت و ماژولار بودن را درون افزونه Rails قرار می دهد. برای اینکه بتوانید SASS را در فریم ورک Merb فراخوانی و از آن استفاده نمایید، باید کد زیر را در فایل config/dependencies.rb اضافه کنید.

“dependency “merb-haml

قابلیت ذخیره ی موقت فایل ها در Caching

یکی از قابلیت های بی نظیر sass، ذخیره فایل هایی همچون template ها و partial ها بر روی حافظه cache می باشد. در صورتی که محتوای این فایل ها ویرایش یا بروز رسانی نشده باشند می توانید بدون استفاده از parse (بررسی نحوی و تبدیل)، بارها از این فایل ها استفاده نمایید. فراموش نکنید اگر فایل های کش شده را پاک نمایید، در زمان کامپایل تولید خواهند شد.

تنظیمات و مقدار دهی آن ها (Options)

می توانید برای انجام تنظیمات لازم options که در فایل environment.rb یا config.ru اپلیکیشن مبتنی بر Rack وجود دارند، از دستورات زیر استفاده نمایید.

Sass::Plugin.options[:style] = :compact

برای تنظیم کردن مقادیر فایل init.rb موجود در اپلیکیشن مبتنی بر Merb، از کد زیر استفاده نمایید.

Merb::Plugin.config[:sass][:style] = :compact

تنظیماتی که می توانید در SASS و SCSS استفاده و مقدار دهی نمایید، شامل موارد زیر می باشند.

style
syntax
property_syntax
cache
read_cache
cache_store
never_update
always_update
always_check
poll
template_location
css_location
unix_newlines
filename
line
load_paths
filesystem_importer
line_numbers
trace_selectors
debug_info
custom
quiet

کد گذاری

SASS برای کد گذاری کاراکتر های stylesheets، از روش مشخص سازی مشخصات CSS استفاده می کند. مشخصات css شامل موارد زیر می باشند.

برای مشخص سازی مشخصات، در ابتدا موضوع Unicode مورد بررسی قرار گرفته می شود و پس از آن موضوع charset@ اعلام می شود. در نهایت کد گذاری رشته روبی Ruby انجام می شود.
در مرحله دوم که مربوط به کد گذاری charset می باشد، در صورت که تنظیمات آن انجام نشود، عنوان آن را UTF-8 در نظر می گیرند.
با استفاده از اعلام charset@، باید موضوع کد گذاری کاراکتر ها را مشخص نمایید.

چرا بهتر است از Sass استفاده کنیم؟

همانطور که می دانید زبان های html و css دارای نقطه ضعف های بسیاری هستند، که مهم ترین این نقطه ضعف ها تکرار بیش از حد کدها در زمان کدنویسی می باشد. در زبان های پیشرفته تر، برای سازماندهی کدها از تعریف متغیر ها، توابع و … استفاده می کنند که باعث از بین رفتن تکرار شدن کدها در کدنویسی می شوند. دلیل استفاده از Sass همین موضوع می باشد. Sass مکمل زبان css می باشد که باعث برطرف شدن مشکلات و نقطه ضعف های css و سازماندهی شدن کدها می شود.

مزایای استفاده از SASS

کاملا سازگار با CSS
استفاده از متغیر ها و بلاک‌ های تو در تو و MIXINها
بسیاری از توابع مفید برای دستکاری رنگ و مقادیر دیگر
ویژگی‌ های پیشرفته مانند دستورالعمل ‌های کنترل برای کتابخانه‌ ها
خروجی قابل تنظیم با فرمت قابل تنظیم

LESS چیست؟

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