تصویر محمدعلی اکبری
Sass: فایل‌های CSS را قدرتمند بنویسید

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

Sass به ما امکان استفاده از متغیر‌ها، دستورات تودرتو (nested rules)، وارد کردن فایل‌های دیگر (inline imports) و استفاده از قوانین تکراری (mixins) و بسیاری دستورات دیگر را در تولید فایل‌های CSS می‌دهد.

همچنین کتابخانه‌هایی مانند Compass قابلیت‌های Sass را افزایش می‌دهند، کلیه این امکانات Sass را به ابزاری قدرتمند در دستان برنامه نویسان واسط کاربری تبدیل کرده است.

نصب Sass

Sass برای نصب به Rubby نیاز دارند. لذا گام های نصب به ترتیب زیر است.

گام اول: با مراجعه به آدرس rubyinstaller.org با توجه به سیستم عامل خود Rubby را نصب کنید.

گام دوم: Sass را نصب کنید.

** در محیط windows در صورت بروز مشکل CMD را به صورت Run as administrator اجرا کنید.

gem install sass

در صورتی که فایل gem آن را دانلود کرده اید با دستور زیر آن را نصب کنید.

gem install --local sass-3.2.12.gem

از صحت نصب آنها مطمئن شوید.

sass -v

چند خط Sass بنویسیم

گام اول: یک فایل متنی با نام style.scss ایجاد کنید. فایل را ویرایش کرده و کد زیر را در آن بنویسید.

$font-stack:    Tahoma, Arial, sans-serif;
$primary-color: #333;
$backgroun-color: #0cb000; // Green

body {
  font: 100% $font-stack;
  color: $primary-color;
  background-color: $backgroun-color;
}

گام دوم: CMD یا Terminal را باز کرده و در مسیر فایل قرار بگیرید. سپس دستور زیر را برای کامپایل sass و ایجاد css اجرا کنید.

sass style.scss style.css

تمام شد، خروجی فایل style.css به صورت زیر است.

body {
  font: 100% Tahoma, Arial, sans-serif;
  color: #333333;
  background-color: #0cb000; }

پیکربندی Netbeans برای Sass

اتوماتیک کردن کارهای تکراری از علایق برنامه نویسان است، در حالت عادی با هر تغییر فایل‌های scss باید دستورات کامپایل را مجددا تکرار کنیم. لذا نگاهی به پیکربندی Netbeans برای کامپایل خودکار فایل‌های scss می‌اندازیم.

گام اول: ابتدا مسیر فایل اجرایی sass را برای netbeans مشخص می‌کنیم. برای اینکار از منو "Tools > Options" وارد پنجره پیکربندی شده و در تب Miscellaneous در زیر-تب CSS Preprocessors مسیر فایل اجرایی sass را وارد می‌کنیم.

مسیر فایل اجرایی sassگام دوم: ابتدا از مسیر "Winodw > Projects" لیست پروژه‌ها را فعال کنید. سپس روی نام پروژه مورد نظر کلیک-راست کرده و وارد پنجره Properties شوید. در قسمت CSS Preprocessors گزینه "Compile Sass Files on Save" را فعال کرده و در لیست پایین مسیرهای فایل‌های sass و css را وارد کنید.

تنظیم مشخصات پروژه
برای بررسی صحت پیکربندی فایل‌های scss را تغییر داده و فایل‌های css معادل آن را بررسی کنید. برای آشنایی بیشتر با زبان Sass به مستندات آن مراجعه کنید.

دیدگاه‌ها

تصویر Saman

Saman (تایید نشده)

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

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام؛ نیازی به دانلود sass نیست، با همان دستوات فوق به عنوان افزونه به ruby اضافه می‌شود. سایت sass: http://sass-lang.com

تصویر mojtaba bist

mojtaba bist

واقعاً مطلب فوق العاده زیبایی بود.
یه سوال کوچولو:
اگه میشه لطف کنید اسم قالبی که برای سایتتون استفاده می‌کنید رو می خواستم بدونم
قالب جالبیه
البته عذر می‌خوام اینجا سوالاتم رو مطرح می‌کنم چون تو سایت قسمتی برای فروم ندیدم.

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام؛ قالب رو خودمون توسعه دادیم با skeleton

تصویر mojtaba bist

mojtaba bist

سلام ؛ ببخشید دوباره می‌پرسم
ممنون می‌شم اگه راهنماییم کنید ، چون ما کوچکترها باید جا پای شما بزرگترها بگذاریم تا به جایی برسیم،
می‌خواستم بدونم چطور آمار بازدیدکنندگان سایت رو بالای هر نود در قسمت Submitted نمایش داده‌اید، منظورم چه کدی رو به فایل نود سایت افزوده‌اید ، چون من هر کاری کردم آمار بازدیدکنندگان (تعداد بازدیدکنندگان) با عنوان آن نمایش داده می‌شود ، مثلاً نمایش داده می‌شود :
بازدیدکنندگان : 239
و در بالای سایت شما به نحو ماهرانه‌ای فقط تعداد بازدیدکنندگان نمایش داده شده ، قبلاً مطلبی تحت عنوان submitted_override در سایت منتشر کرده بودید آن رو هم انجام دادم ولی نتیجه دلخواه حاصل نشد.
بازهم از اینکه وقت می‌گذارید و دیدگاه‌ها رو پاسخ می‌دهید صمیمانه سپاس گذارم

تصویر محمدعلی اکبری

محمدعلی اکبری

ماژول submitted_override رو از پیوست اون مطلب نصب کردید؟ ماژول statistics‌ هم فعال بود؟

تصویر mojtaba bist

mojtaba bist

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

تصویر حمید عامل زنده دل

حمید عامل زنده دل (تایید نشده)

وب سایت http://www.sass-lang.ir هم به تازگی راه اندازی شده می تونید ببینید.

تصویر الهه عربیان

الهه عربیان

اگر سرعت اینترنت کم باشه و خطا برای کانکشن بده میتونیم از این دستور استفاده کنیم

gem install sass --http-proxy --source http://rubygems.org

تصویر مهدی

مهدی (تایید نشده)

سلام
مطلب جالب و عالی بود
البته من به دنبال نصب sass بودم و اول به سایت http://amirmoharami.ir/ برخوردم که اون هم کامل با شکل توضیح داده بود
اما متاسفانه نتونستم نصب کنم و پیغام خطا می داد
حتی از راه الهه عربیان "کامنت قبل از من" رفتم اما نشد
یه لینک عکسی که از خطا cmd گرفتم رو هم براتون می گذارم
ممنون می شم کمک کنید .
http://upload7.ir/preview.php?user=&file=f75e5cb24bfce2189f564c9b74f32c2...

تصویر محمدعلی اکبری

محمدعلی اکبری

قبلش این دستور رو اجرا کنید:

$ chcp 1256
تصویر مهدی

مهدی (تایید نشده)

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

http://upload7.ir/preview.php?user=&file=21df1b6e98e7f985094af3a06d902d8...

من به سایت http://rubyinstaller.org/ می رم و از قسمت دانلود هاش فایل Ruby 2.2.1 (x64) رو می زنم و نصبش هم موفقیت آمیزه اما با cmd مشکل دارم
بن کل دستورات رو نمی شناسه

تصویر مهدی

مهدی (تایید نشده)

شرمنده من هی کامنت می گذارم
هدف اصلی من استفاده از این کد ها در برنامه ای هست که دارم با فون گپ می سازمش
http://codepen.io/malydok/pen/LERvpM/
من از کامپایلر webmatrix 3 استفاده می کنم و اگر به همین لینک بالا برید متوجه میشید که HTML,CSS,JQuery رو گرفتم و کتابخانه JQuery و استایل Font Awesome رو هم اظافه کردم
محیط رو برام میاره ولی افکت ها اعمال نمی شه
به همین خاطر هم رفتم دنبال sass و غیره
حالا شما بعنوان یه متخصص اگر کمکم کنید ممنون میشم

تصویر وحید

وحید (تایید نشده)

سلام آقای اکبری
من به تازگی sass رو نصب کردم قبلا هم نصب کرده بودم و مشکلی نبود ولی اینبار بعد از هر کامپایل یه سری warning نمایش داده میشه و یه فولدر .sass-cache هم در root پروژه ام ساخته میشه
چیکار باید انجام بدم تا این warning ها از بین بره؟

ممنون میشم راهنماییم کنید

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام دوست عزیز

خطاهایی که میگیرید چیست؟

اگر مربوط به ie است و در نهایت compile انجام میشود، مشکلی نیست.

پوشه .sass-cache هم مهم نیست.

تصویر وحید

وحید (تایید نشده)

سلام مهندس ممنون که جواب دادی

خطایی که من میبینم ایناست
WARNING: Compass has changed how browser support is configured. The following co
nfiguration variables are no longer supported: $legacy-support-for-ie6, $legacy-
support-for-ie7, $legacy-support-for-ie8.Details: http://compass-style.org/help/
documentation/tuning-vendor-prefixes/
on line 384 of c:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.
3/stylesheets/compass/_support.scss
from line 113 of c:/xampp/htdocs/****/sites/all/themes/volvo/sass/
_init.scss
from line 10 of c:/xampp/htdocs/****/sites/all/themes/volvo/sass/s

البته کامپایل میشه و درست هم هست ولی میخوام شسته رفته ببینم همه چیزا رو حتی توی گیت یه جا خوندم که باید مسیر فولدر .sass-cache رو تو tmpبزارم از طریق فایل کانفیگ ولی وقتی اینکارو کردم کلا شد خطا و مراحل رو به قبل برگشتم
میشه بگین چیکار باید کنم؟

ممنون

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام، دارید از zen استفاده می کنید. این هشدار اصلا اهمیتی نداره. برای اینکه فولدر .sass-cache توی git نیاد و اذیتت نکنه توی gitignore اضافش کن.

تصویر مصطفی رستگار

مصطفی رستگار (تایید نشده)

سلام
مشاهده کردم دیدم که شما هم در این حوزه فعال هستید.
در صورت تمایل شما هم به کمپین sass ایران بپیوندید.
http://sass-lang.ir
سایت هنوز در فاز دمو است و داریم با تجمیع متخصصان این حوزه، فعالیت میکنیم.

با تشکر
مهندس رستگار

تصویر حسین

حسین (تایید نشده)

با سلام ممنون به خاطر مطلب یه سوالی داشتم:
میخواستم بدونم sass به خاطر استفاده از ruby مشکلی برای اجرا روی صفحات php نداره؟

تصویر محمدعلی اکبری

محمدعلی اکبری

سلام، نه. بعد از کامپایل به CSS دیگه با فایل های SASS کاری نداریم

افزودن نظر جدید