SASS چیست؟ آموزش کامل پلتفرم SASS

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

Sass چیست

پلتفرم Sass چیست؟

مانند همیشه برای تعریف یک نرم افزار و پلتفرم از سایت رسمی شرکت ارائه دهنده استفاده می کنیم. سایت رسمی Sass در آدرس http://sass-lang.com قابل دسترس است. با توجه به اینکه امکان آموزش کامل پلتفرم Sass در یک مقاله ممکن نیست. برای آموزش کامل این پلتفرم به سایت آن مراجعه کنید. هدف ما آشنایی شما با این پلتفرم میباشد. پلتفرم Sass با زبان های طراحی سایت به زبان PHP و زبان Ruby و زبان Asp کاملا همآهنگ است ومیتوانید از سایت Sass نسبت به دانلود نسخه مناسب با توجه به زبان برنامه نویسی خود اقدام کنید.

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

Sass مخفف واژه Syntactically Awesome StyleSheets می باشد.

ویژگی های پلتفرم SASS 

1- سازگاری با CSS

Sass با تمام نسخه های Css سازگار است. این سازگاری برای تولید کنندگان Sass از اهمیت بالایی برخوردار بوده و کاربران Sass میتوانند، از هر کتابخانه Css استفاده کنند. بصورت کلی سه کتابخانه Css به نام های Css1,css2,css3 میان کاربران پرطرفدار هستند و همگی توسط Sass پشتیبانی می شوند.

2- تکامل یافته بودن Sass

Sass بیش از ده سال است که در حال تولید، عرضه، توسعه است و اکنون به سطحی رسیده است که کاربران براحتی میتوانند به عنوان یک نرم افزار حرفه ای برای تولید استایل صفحات وب از آن استفاده کنند.

3- کاربران Sass

امروزه از پلتفرم Sass بصورت تخصصی استفاده می شود، و بسیاری از تولید کنندگان حرفه ای صفحات وب از Sass بعنوان زبان برنامه نویسی Css استفاده می کنند. Sass توسط برنامه نویسان و توسعه دهندگان و شرکت های برنامه نویسی فراوانی در سراسر دنیا پشتیبانی می شود. Sass توسط توسعه دهندگانی مانند compass،Bourbon،Susy و بسیاری توسعه دهندگان دیگر تکامل یافته و مورد استفاده صد ها سایت معتبر قرار گرفته است. (شبکه اجتماعی linkdin از پلتفرم compass استفاده می کند.)

4- نصب Sass

نصب بر روی سیستم عامل لینوکس:

برای نصب Sass بر روی لینوکس باید ابتدا Ruby را نصب کنید. در لینوکس با کمک package manager می توان Ruby را نصب کرد.

sudo gem install sass --no-user-install

نصب Sass در ویندوز :

برای نصب Sass بر روی ویندوز، باید ابتدا زبان برنامه نویسی Ruby را نصب کنید. میتوانید از سایت www.ruby-lang.org فایل Ruby Installer را دریافت و با کمک آن روبی را نصب کنید. در سایت P30download نیز نسخه آفلاین روبی قرار داده شده است که برای دانلود آن میتوانید به آدرس http://p30download.ir/fa/entry/43885 مراجعه کنید.

با نصب ruby در ویندوز شما نرم افزارهای Ruby command و powershell را نیز نصب خواهید کرد.

نصب Sass بر روی Mac :

برای نصب Sass بر روی مک نیازی به نصب Ruby ندارید. مک بصورت پیشفرض روبی را با خود روی سیستم نصب می کند.

نصب Sass

چگون Sass را نصب کنیم؟

بعد از آنکه در سیستم عامل های ذکر شده پیش زمینه لازم برای نصب Sass را فراهم کردید میتوانید با گام های زیر Sass را نصب کنید. نرم افزار خط دستور سیستم عامل خود را اجرا کنید. در مک نام این نرم افزار Terminal.app است و آن را میتوانید در پوشه Utilities بیابید. در ویندوز باید در پنجره Run دستور Cmd را اجرا کند. برای نصب Sass باید از دستور Gems که از دستورات Ruby است استفاده کنید. کد زیر را در خط فرمان تایپ کنید.

gem install sass

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

sudo gem install sass

کنترل مجدد:

در حال حاضر باید Sass بر روی سیستم نصب شده باشد. ولی بهتر است از نصب Sass اطمینان حاصل کنید. برای اینکار دستور زیر را چک کنید.

sass -v

شما باید پیام زیر را دریافت کنید:

Sass 3.5.1.

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

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

فایل های Sass با پسوند Sass ایجاد میشود برای استفاده از این فایل ها در وب باید آنها را به Css تبدیل کرد. برای اینکار از دستور sass input.scss output.css در خط فرمان استفاده کنید. برای مشاهده فایل ها و پوشه ها میتوانید از دستور –watch استفاده کنید. به دستور زیر نگاه کنید.

sass --watch app/sass:public/stylesheets

متغییر ها در Sass

به متغییرها بصورت ابزاری نگاه کنید، که میتوانند اطلاعاتی را برای شما ذخیره کنند، تا بتوانید در آینده از آن اطلاعات دوباره استفاده نمایید. میتوان اطلاعاتی مانند رنگ و نام فونت و یا هر مقدار دیگری در Css را بصورت متغییر در Sass ذخیره کرد و بار دیگر به کاربرد. sass برای ایجاد متغییر ها از پسوند $ استفاده می کند.

Sass:

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

بعد از پردازش Sass متغییر های $font-stack و $primary-color پردازش شده و به کد های Css تبدیل می کند.

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

چیدمان کدها درSass

یکی از ویژگی هایی که باعث میشود کاربران بخواهند، بجای نوشتن Css کدهای استایل دهی را با زبانی مانند Sass بنویسند سادگی چیدمان کد ها در Sass است. هنگامیکه کد های Html سایت را می نویسید. یک ساختار درختی از کد ها ایجاد می کنید. در css نمی توان این ساختار درختی را ایجاد کرد. Sass به شما اجازه میدهد که ساختار درختی فایل Html را در استایل دهی نیز بکار ببرید. به این ترتیب نوشتن کدهای استایل دهی بسیار ساده خواهد شد. یک مثال ساده از کد نویسی با حفظ ساختار درختی در Sass را در مثال زیر مشاهده می کنید.
 

SASS :

nav

ul

margin: 0

padding: 0

list-style: none

li

display: inline-block

a

display: block

padding: 6px 12px

text-decoration: none

همانطور که مشاهده می کنید تگ های ul,li,a در زیر شاخصه تگ nav قرار دارند. این کدها کمک می کنند که استایل خوانایی بیشتری داشته باشد. ترجمه این فایل به Css به این صورت خواهد بود.

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

ایجاد استایل های ماژولار در Sass

در طراحی وب امروزه ما با نرم افزار های مدیریت محتوا طراحی سایت را انجام میدهیم، که باعث میشود همه چیز بصورت جداگانه و ماژولار طراحی شود. در Sass شما میتوانید تکه ای از کدها را در فایل دیگری قرار داده و آنها را با کد @import فراخوانی کنید. در Css کد @import یک درخواست Http ارسال می کند. ولی در Sass کدهای فایل وارد شده، به فایل الصاق میشوند و بصورت یک فایل Css در وب به نمایش درمی آیند. مثال زیر فایل Rest.Scss را وارد فایل base.Scss کرده ایم:

// _reset.sass

html,

body,

ul,

ol

margin: 0

padding: 0

// base.sass

@import reset

body

font: 100% Helvetica, sans-serif

background-color: #efefef

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

html, body, ul, ol {

margin: 0;

padding: 0;

}

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}

ترکیب کد در Sass

استفاده از ترکیب کد در Sass

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

=border-radius($radius)

-webkit-border-radius: $radius

-moz-border-radius: $radius

-ms-border-radius: $radius

border-radius: $radius

.box

+border-radius(10px)


SCSS SYNTAX

@mixin border-radius($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

-ms-border-radius: $radius;

border-radius: $radius;

}

.box { @include border-radius(10px); }

همانطور که میبینید در نسخه Scss یک نام @mixin ایجاد شده است که در مثال بالا برابر با border-radius قرار دارد. در نسخه Sass ما از متغییر $radius استفاده کرده ایم. اگر از نسخه Scss استفاده کنیم، متوانیم برای فراخوانی کدها از @include استفاده کنیم. نتیجه هر دو کد بالا در فایل Css به این صورت خواهد بود.

.box {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

border-radius: 10px;

}

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

مطالعه بیشتر:

مقاله بوت استرپ (Bootstrap) چیست؟ پلتفرم دیگری را برای تهیه صفحات وب را معرفی می کند که علاوه بر استایل های آماده داری یک کتابخانه جاوا اسکریپت است که کار طراحی وب را بسیار ساده می کند.

همچنین بخوانید
مراحل طراحی سایت و ایجاد یک سایت حرفه ای و روند طراحی که توسط شرکت طراحی سایت 24 انجام می شود در این صفحه توضیح داده شده است.
ارزش وب سایت ها یا قیمت آن ها برای خریداران و علاقه مندان به خرید نکته قابل توجهی است , ارزش سایت بر اساس شاخص های گوناگونی مشخص می شود
روش های کاهش زمان بارگذاری سایت که یکی از مهمترین فاکتورها در زمینه ماندگاری کاربر در سایت است در این بخش از مقالات وب24 آموزش داده شده است.
مقابله با هک کردن سایت و مقالات آموزشی مرتبط با جلوگیری از هک شدن سایت و نفوذ افراد مخرب به اطلاعات سایت های اینترنتی را در وب24 مطالعه نمایید
دیدگاه خود را با ما در میان بگذارید
امتیاز:
captcha