آشنایی با SASS SCSS

آموزش SASS SCSS

Sass که مخفف Syntactically Awesome Stylesheets هستش یک زبان شیوه نامه ای‌ست که اول توسط Hampton Catlin طراحی و توسط Nathan Weizenbaum توسعه داده شد. بعد از نسخه ابتدایی Weizenbaum و Chris Eppstein به گسترش Sass با Sass Scripting پرداختند.

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

سینتکس جدیدتر به عنوان scss شناخته شده و فرمت دهی بلاک ها تو این سینتکس شبیه همون css هست. یعنی دقیقا آکولادها و ; به همون معنی که تو css هست، اینجا هم هست.

ممکنه بپرسید کار sass چی هست اصلا؟ دیدید تو زبان های برنامه نویسی ما متغیر ، فانکشن ، عملگر و … داریم؟ ولی تو سی اس اس همچین چیزی رو نداریم. حالا فکر کنید اگر میشد تو سی اس اس از این ها استفاده کرد چقدر سرعت نوشتن کدها بالا میرفت! Sass به شما این امکان رو میده که از این ویژگی هایی که تو سی اس اس نداریم (همون متغیر و تابع و عملگر و … رو منظورمه) استفاده کنیم و نوشتن کدهای سی اس اس سریع تر و جذاب تر بشه.

لازم به ذکره که فریم ورک Foundation هم از sass پشتیبانی میکنه.

خب! مقدمه کافیه بریم سر اصل مطلب.

متغیرها

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

more  بیشتر بخوانید : دوره مجازی SASS : جلسه ششم – متغییرها در sass

یک مثال از تعریف متغیر با سینتکس scss:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

همین مثال بالا با استفاده از سینتکس sass:

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

در هر دو کد بالا، در خطوط ۱ و ۲، اول متغیرها رو تعریف و مقداردهی کردیم و خط ۵ و ۶ ازش استفاده کردیم.

وقتی sass پردازش شد، متغیرهایی که ما برای $font-stack و $primary-color تعریف کردیم رو میگیره و مقادیرشون رو داخل css قرار میده و خروجی css رو تولید میکنه. این کار برای زمانی که داریم با رنگ های برند کار میکنیم به شدت مفیده.

در نهایت بعد از کامپایل خروجی ما به شکل زیر هستش:

خب فکر کنم حالا این سوال براتون پیش اومده که این کدها رو کجا مینویسیم. قبل از اینکه بخوایم بقیه ویژگی های sass رو معرفی کنیم به نظرم بهتره راجع به محل نوشتن کدهای sass و نحوه کامپایل اونها صحبت کنیم.

محل نوشتن کدها که کاملا سادست. اگر با سینتکس scss میخواید بنویسید یک فایل جدید با پسوند .scss میسازید (مثلا test.scss) و کدها رو داخل این فایل میریزید. ولی اگر میخواید با سینتکس .sass بنویسید یک فایل جدید با پسوند .sass میسازید (مثلا test.sass) و کدهاتون رو داخل این فایل مینویسید.

حالا اگر این فایل رو به صفحه وبتون پیوست کنید اصلا کار نمیکنه چون فایل css نیست! پس باید فایل sass رو کامپایل و به فایل css تبدیل کنیم. نگران نباشید اصلا کار سختی نیست. نرم افزار رایگانی وجود داره به اسم Koala که میتونید این نرم افزار رو از صفحه اصلی سایتش دانلود کنید. Koala هم نسخه ویندوز، هم نسخه لینوکس و هم نسخه مکینتاش داره. اگر قراره از نسخه ویندوز استفاده کنید باید ابتدا Ruby رو نصب کنید. کافیه فایل exe اون رو از سایت خودش دانلود و نصب کنید. پیشنهاد میکنم نسخه ۱٫۹٫۳ رو دانلود کنید.

موقع نصب این نرم افزار به همچین صفحه ای برخورد میکنید:

آموزش sass

 

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

حالا که ruby رو نصب کردید میتونید koala رو نصب کنید.

بعد از نصب دو راه برای اضافه کردن فایل sass دارین. راه اول اینکه پوشه حاوی فایل sass رو بگیرید و داخل این نرم افزار بکشید. راه دوم هم اینکه دکمه بعلاوه ای که سمت چپ برنامه هست رو بزنید و پوشه ای که فایل sass رو داره بهش معرفی کنید.

بعد از اضافه کردن پوشه میبینید که تمام فایل های sass داخل پوشه رو براتون نشون میده و میتونید یکی از این فایل هارو برای کامپایل انتخاب کنید. بعد از انتخاب فایل، سمت راست یه پنجره کشویی باز میشه که دکمه compile داره اونو بزنید فایل sass رو برای شما کامپایل و به css تبدیل میکنه و در کنار پوشه ای که حاوی فایل های sass بود یه پوشه به اسم css میسازه و فایل css که ساخته بود رو اینجا براتون نگه میداره. حالا میتونید این فایل css رو برداشته و داخل پروژه های خودتون ازش استفاده کنید.

اگر هم میخواید همه ی فایل ها رو کامپایل کنید کافیه ctrl+a بزنید تا همشون انتخاب بشه. بعد روش کلیک راست کنید و گزینه compile رو انتخاب کنید.

آموزش SCSS

 

ویژگی ای که نرم افزار کوالا داره اینه که اگر نرم افزار در حال اجرا باشه و شما تغییری داخل فایل های sass یا scss بدید، به محض اینکه فایل رو save کنید فایل رو براتون کامپایل میکنه و دیگه نیازی نیست هربار دکمه کامپایل رو بزنید.

info نکته :

در صورتی که بعد از کلیک کردن روی گزینه compile چنین خطایی دریافت کردید:

‘sass’ is not recognized as an internal or external command, operable program or batch file.

باید sass رو نصب کنید. برای این منظور خط فرمان (cmd) رو باز کنید. حالا کافیه دستور gem install sass رو بنویسید تا sass نصب بشه. اینتر بزنید و یکم منتظر بمونید تا فرآیند نصب تکمیل بشه.

sass-cmd

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

info نکته :

دقت کنید که در صورتی که از سینتکس scss برای نوشتن کدها استفاده کردید حتما فایل رو با پسوند .scss و وقتی از سینتکس sass استفاده کردید حتما فایلتون رو با پسوند .sass ذخیره کنید در غیر این صورت فایلتون کامپایل نمیشه.

قبل از ادامه، این رو بگم که در این آموزش همه ی کدهای sass رو با سینتکس scss مینویسیم.

ویژگی تو در تو (Nesting)

فرض کنید همچین کد html داریم:

الان ul و liهای ما به صورت تو در تو داخل تگ nav قرار گرفتند. که داخل css به این صورت استایل دهی میکنیم:

ولی الان با استفاده از sass میتونیم به این صورت بنویسیم:

این کد بعد از کامپایل به همون شکل css که گفتیم در میاد.

در sass ما یه انتخابگر & هم داریم که هرجا ازش استفاده بشه به نزدیکترین انتخابگر والدش اشاره میکنه. & برای استفاده از شبه کلاس ها (:hover، :active، :before، :after و …) بیشتر کاربرد داره.

مثلا اگر همچین کدی داشته باشیم:

علامت & به نزدیکترین انتخابگر والدش که همون a باشه اشاره میکنه و نتیجه کد بعد از کامپایل به این صورت هست:

اگر دقت کرده باشید داخل css ما یه سری خاصیت مثل font-family، font-size و font-weight داریم که میتونیم در sass اونها رو به این صورت بنویسیم:

که این کد بعد از کامپایل به صورت درمیاد:

یا مثلا برای border میتونیم همچین چیزی بنویسیم:

بعد از کامپایل میشه:

فکر میکنم برای این جلسه کافی باشه. در جلسه بعدی با عملگرها، نحوه ایمپورت کردن یک فایل sass و همچنین نحوه نوشتن کامنت ها آشنا خواهید شد.

بازدید: 22

نظر خودتون رو بنویسید.

avatar
  اشتراک  
به من وقتی خبر بده که: