sass - آکادمی دت لرن

کامپایل کردن sass در VS Code

برای اینکه ما بتوانیم در VS Code از sass استفاده کنیم و از عملیات تبدیل sass به css بهره ببریم و همچنین فایل sass رو به css کامپایل کنیم کافی هست از یک افزونه در VS Code به نام Live Sass Compiler استفاده کنیم در ادامه با من همراه باشید تا به راحتی مراحل کامپایل کردن sass/scss با استفاده از افزونه Live Sass Compiler رو قدم به قدم آموزش بدم.

برای کامپایل کردن sass / scss روش های مختلفی وجود داره اما اگه با ویرایشگر VS Code کار میکنم این روش یعنی استفاده از افزونه Live Sass Compiler بهینه تر خواهد بود.

افزونه Live Sass Compiler

Live Sass Compiler یک افزونه برای VS Code است که وظیفه آن کامپایل کردن فایل های sass / scss به فایل css می باشد در این آموزش به چگونگی کامپایل کردن sass به css و همچنین استفاده کردن از فایل کامپایل شده ازsass در یک سند html می پردازیم.+

قدم اول : دانلود VS Code

در قدم اول شما بایستی VS Code را دانلود نمایید اگر که ویرایشگر VS Code رو سیستم شما نصب نیست .

قدم دوم : اجرا کردن VS Code و نصب افزونه Live Sass Compiler

بعد از دانلود و نصب VS Code این نرم افزار را اجرا کنید و به تب افزونه ها طبق شکل زیر بروید.

در کادر جستجو عبارت Live Sass Compiler یا live sass را وارد نمایید :

و روی گزینه install کلیک نمایید تا این افزونه برای شما نصب شود ، تا به اینجای کار ما مراحل نصب رو انجام دادیم بریم ببینیم به چه صورت میتونیم حالا از این افزونه برای کامپایل کردن sass به css استفاده کنیم.

قدم سوم : کامپایل کردن sass/scss

یک پوشه به نام test ایجاد نمایید و داخل این پوشه یا دایرکتوری یک سند وب به نام index.html بسازید و همچنین یک پوشه به نام app یا هر نام دلخواهی که داخلش یک فایل sass به نام app.scss ایجاد کنید .

بعد از ایجاد پوشه ها و فایل های مورد نظر داخل فایل app.scss یک استایل تست برای تگ body بنویسید مثل تصویر زیر :

حالا به راحتی بعد از استایل دادن تست به تگ body ، در گوشه پایین سمت راست روی watch sass کلیک نمایید تا فایل شما به app.css کامپایل شود :

بعد از کلیک روی watch sass شما مشاهده خواهید کرد که فایل scss به css کامپایل شد و کافی است فایل app.css برای استفاده از فایل کامپایل شده scss آن را در سند html خود قرار دهیم همانند تصویر زیر :

و در نهایت خروجی سند html که فایل css آن کامپایل شده فایل scss است رو در مرورگر مشاهده میکنیم :

تا اینجا ما تونستیم استایل هامونو از طریق scss بنویسیم و کامپایل کنیم فایل scss رو به css .

قدم چهارم : تغییر مسیر فایل های کامپایل شده یا خروجی stylesheet ها

شاید این سوال به ذهنتون برسه که چطور میتونم مسیر خروجی فایل های کامپایل شده به css روتغییر بدم مثلا یک پوشه در نظر بگیرم با نام css و فایل هایی که کامپایل میشه رو در این مسیر قرار بدیم .

برای این کار باید در VS Code به مسیر زیر :

file -> preferences -> settings

بروید ، بعد از اینکه وارد پنجره settings شدید کافی هست به ترتیب تب extensions رو باز کنید و روی Live Sass Compiler کلیک کنید و در نهایت روی گزینه Edit in settings.json کلیک نماید طبق شکل زیر:

و در پنجره باز شده کافی است یک کد json قرار دهیم که جلوتر این کد رو توضیح خواهم داد :

سورس کد json مربوط به live sass :

"liveSassCompile.settings.formats": [
        // This is Default.
        // {
        //     "format": "expanded",
        //     "extensionName": ".css",
        //     "savePath": "~/../css/"
        // },
        //Or you can compress your css
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ],

بعد از ذخیره کرده فایل Settings.json وارد پوشه app میشویم و فایل های app.css.map و app.css را حذف میکنیم . و وارد فایل app.scss میشویم و اگر مجدد روی watch sass کلیک نماییم خواهیم دید که یک پوشه به نام css ایجاد شده و فایل کامپایل شده app.scss در آن قرار گرفته طبق شکل زیر :

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

css/app.min.css

و حالا میتونید از فایل کامپایل scss در پوشه css استفاده کنیم .

توضیح کدهای json که در setting.json استفاده شد

به تصویر زیر که شامل کد های json مربوط به افزونه live sass هست مشاهده بفرمایید :

در این کد json ما یک آرایه داریم که داخلش دو آبجکت قرار دارد که هر یک از این آبجکتها شامل ۳ عنصر هستن به نام های زیر که هر یک را بصورت کامل شرح میدهیم :

fotmat = فرمت فایل هایی که ذخیره میشود بصورت فشرده (compressed) باشد یا در حالت توسعه (expanded)

extensionName = اگر format فایل بصورت فشره باشد باید مقدار این key به صورت “min.css” نوشته شود و اگر هم در حال توسعه باشد format باید “css” نوشته شود.

savePath = مسیر خروجی فایل های کامپایل شده و نام پوشه خروجی فایل های stylesheet یا css

بلاک ۱ : بصورت پیش فرض اگر کد آبجکت ۱ که در تصویر بالا مشاهده میکنید را قرار دهیم میسر خروجی فایل های کامپایل شده ما در مسیر css و با فرمت .css کامپایل میشود .

بلاک ۲ : اگر کد آبجکت ۲ که در تصویر بالا مشاهده میکنید را قرار دهیم میسر خروجی فایل های کامپایل شده ما در مسیر css و با فرمت min.css . کامپایل میشود .

منابع : medium.com و hoshcoding.com

۱۸/۰۶/۱۳۹۸۱۷/۱۲/۱۴۰۰

آشنایی عمیق با sass

کدنویسی بهینه css

در این مقاله قصد دارم به صورت مختصر آشنایی عمیقی از sass داشته باشیم .

برای کدنویسی css به صورت بهینه در حال حاضر بهترین روش استفاده از پیش پردانده sass است .

در حقیقت انتخاب روش بهینه یکی از اصول اساسی هر کاری است.

همچنین برای کدنویسی اصولی و بهینه css میتوانیم از پیش پردازنده sass استفاده کنید .

انگیزه

اگر میخواهید با css برنامه نویسی کنید .
اگر میخواهید کد کمتر بزنید بیشتر استفاده کنید.
اگر میخواهید زمان کمی از دست بدهید بیشتر نتیجه بگیرید.
در آخر
اگر میخواهید از کدنویسی css لذت ببرید با ادامه این مقاله با من همراه باشید.[/text_quote]

پیش پردانده Sass چیست ؟

به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است.

پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم.

ویژگی‌هایی مانند متغیرها ، قواعد تو در تو و موارد مختلف دیگر.

هدف استفاده از این موارد این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم.

به زبان ساده تر sassیک مکمل برای زبان CSS هست ولی هرگز در کارآیی CSS تغییری ایجاد نمیکند.
اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.
برای به کار گیری sass باید درک کاملی از موارد پایه ای css داشته باشید.

Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.

با استفاده از sass می توانید با css برنامه نویسی کنید

اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.

در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.

پیش پردازنده چیست ؟

در علوم رایانه، پیش‌پردازنده، برنامه‌ای را گویند که با پردازش داده‌های ورودی، دادهٔ خروجی‌ای تولید می‌کند.

پروسه پردازش Sass

فرض کنید در یک کارخانه کفش مراحلی که طی میشود تا یک کفش در انتهای خط تولید داشته باشیم .
ورودی = مواد اولیه کفش
پردازش = مواد اولیه کفش + متدهای طراحی
خروجی = محصول کفش

دقیقا پیش پردازنده sass به این صورت کار میکند که ما یک سری دستورات که این دستورات همان کدهای css هست طبق سینتکس sass کدنویسی میکنیم و در نهایت در خروجی به ما کدهای Css تحویل میده .
ورودی = کدهای css طبق سینکس sass + ویژگی های sass
پردازش = تبدیل فایل Sass به css
خروجی = کد css

قاعده نوشتاری sass

دو قاعده نوشتاری برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید می‌کنند.
SCSS : استفاده از فایلی که دارای فرمت .scss است و با css هم بسیار سازگار است.
SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.

مقایسه SASS و SCSS :

در واقع SCSS نسخه سوم از SASS می باشد.که از نظر قواعدی باهم متفاوت هستند.
کد SASS فشرده شده است، که به ساختارهای کلیدی کمتری نیاز دارد.ما به پرانتز و سیمی کالن (نقطه ویرگول) نیازی نداریم.
فرورفتگی ها نقش مهمی را ایفا می کنند. از این رو، آن ها برنامه نویسی را استاندارد می کنند .

این مقاله رو هم بخونین حتما

کامپایل کردن sass در VS Code

۱۰/۰۱/۱۳۹۸۲۶/۱۲/۱۴۰۰

آموزش نصب و راه اندازی sass

۲ روش نصب و استفاده از Sass

برای اینکه ما sass رو نصب کنیم و استفاده کنیم در پروژه هامون دو روش وجود داره :

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

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

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

اگه بخوایم از نرم افزار استفاده کنیم لیستی از نرم افزار ها در زیر قرار گرفته که اگه وارد سایت sass در قسمت install بشید این نرم افزار ها به ترتیب زیر هست :

که در بین این نرم افزار ها و یا اپلیکیشن ها نرم افزار Scout-App رایگان و متن باز هست ، که ما به راحتی میتونیم در پروژه هامون از این نرم افزار قدرتمند کمک بگیرم که قابلیت های ویژه ای داره ، مثل نوتیفیکیشن ها که در زمان مناسب نمایش داده میشه و به راحتی میتونیم فایل های sass رو به css تبدیل یا به اصطلاح کامپایل کنیم.

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

برای اینکه ما بتونیم پکیج sass رو با استفاده از دستورات خط فرمان نصب کنیم باید یک بسته مدیریت پکیج در سیستممون داشته باشیم که پیشنهاد سایت sass که در قسمت install هستش node.js رو گفته که نصب کنیم ، برای اجرای دستورات و نصب پکیج sass روی سیستم .

بعد از اینکه node.js رو دانلود کردید و مراحل نصبش تموم شد باید مطمئن بشید که npm به همراه node.js نصب شده یا نه ، برای این کار وارد cmd یا محیط خط فرمان بشید و تایپ کنید npm -v و اینتر رو بزنید .
اگه npm نصب شده باشه باید ورژن مربوط به node رو نمایش بده که مشخص میشه node و npm به درستی روی سیستمون نصب شده و میتونید هر پکیجی رو که مد نظرتون بود رو با استفاده از npm نصب کنید .
بعد اطمینان از، نصب npm نوبت میرسه به نصب پکیج sass ، کافی هست دستور npm install -g sass رو وارد کنید و اینتر رو بزنید تا پکیج مربوط به sass نصب بشه.

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

کامپایل کردن sass در VS Code

اگه قصد دارید در Vscode نصب کنید sass رو این مقاله رو هم حتما ببینید ، ” کامپایل کردن sass در VS Code “.

پیشنهاد ویژه

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