Sass از محبوب ترین پیش پردازنده های css محسوب می شود، که سال هاست برای نوشتن تمیز، قابلیت استفاده مجدد و ماژولار نوشتن دستورات css به ما کمک کرده است. در این آموزش سریع، من مواردی که مهم هستند رو به همراه تبدیل کردن sass به css رو از طریق خط فرمان آموزش می دهم.
۱- نصب Node.js
برای تبدیل sass از طریق خط فرمان، اول ما نیاز داریم که node.js رو نصب کنیم. برای دانلود به سایت رسمی اون به آدرس nodejs.org وارد می شیم و بعد از دانلود، مراحل نصب برنامه رو طی می کنیم.
۲- ایجاد ساختار پوشه
اول از همه یه پوشه در desktop درست می کنیم که من اسمشو میزارم sass-to-css
و بعد از اون خط فرمان سیستم خودم رو باز میکنم بعد با دستور cd desktop
وارد desktop می شم و بعد اون با دستور cd sass-to-css
وارد پوشه ای که ساختیم می شیم.
داخل این پوشه ما چند فایل و پوشه جدید درست می کنیم:
- فایل
vitateach.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sass to Css | Vitateach</title> </head> <body> <h1>Vitateach</h1> </body> </html>
دستورات بالا رو داخل فایل vitateach.html
قرار می دهیم و ذخیره می کنیم.
- حالا یک پوشه به نام css و یک پوشه به نام
scss
ایجاد می کنیم. داخل پوشهscss
یک فایل با نامvitateach.scss
ایجاد می کنیم.
۳- ایجاد فایل package.json
برای ایجاد فایل package.json
ما باید داخل خط فرمان اول به مسیر اصلی پوشه خودمون وارد بشیم و بعد دستور زیر رو وارد می کنیم:
npm init -y
همانطور که مشاهده می کنید فایل package.json
برای ما بدون هیج مشکلی ایجاد شد.
۴- نصب node-sass
node-sass یک پکیج برای تبدیل sass به css از طریق node.js است. برای نصب اون ما در خط فرمان دستور زیر رو وارد می کنیم:
npm i node-sass
۵- ویرایش فایل package.json
بعد از نصب پکیج node-sass ، فایل pakcage.json
رو باز می کنیم و در قسمت scripts
دستور زیر رو به این شیء اضافه می کنیم:
{ "name": "sass", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", // این خط رو اضافه می کنیم "scss": "node-sass --watch scss -o css" // این خط رو اضافه می کنیم }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "node-sass": "^4.13.0" } }
این خط کد چه کاری انجام می دهد:
- node-sass: به پکیج node-sass اشاره می کند.
- watch–: یک آپشن برای تبدیل خودکار فایل های
scss.
بعد از هر بار ذخیره سازی است. - scss: نام پوشه ای که فایل
scss.
ما وجود دارد. - o css- : مشخص کننده محل فایل های خروجی تبدیل شده به css
۶- اجرای دستور تبدیل scss به css
برای اجرای این دستوری که به فایل package.json
اضافه کردیم، ما باید در خط فرمان دستور زیر رو وارد کنیم:
npm run scss
- و حالا دستورات زیر رو داخل فایل
vitateach.scss
قرار می دهیم و ذخیره می کنیم:
$vitateach-primary: #2863ec; $vitateach-center: translate(-50%, -50%); $vitateach-font-lg: 3rem; body{ background: $vitateach-primary; } h1{ position: absolute; top: 50%; left: 50%; transform: $vitateach-center; font-size: $vitateach-font-lg; }
- خوب حالا فقط کافیه فایل
vitateach.css
که برامون ایجاد شد بصورت خودکار رو به فایلvitateach.html
بصورت زیر لینک کنیم:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sass to Css | Vitateach</title> <!-- لینک کردن فایل تبدیل شده --> <link rel="stylesheet" href="./css/vitateach.css" /> <!-- لینک کردن فایل تبدیل شده --> </head> <body> <h1>Vitateach</h1> </body> </html>
حالا اگه در مرورگر فایل vitateach.html
رو باز کنیم خروجی زیر رو مشاهده می کنید:

به راحتی برای تبدیل سریع فایل های sass به css میتونید از طریق node.js و پکیج node-sass با طی کردن مراحلی که در بالا گفته شد این کار رو انجام بدید.
به دیگر مقالات ما سربزنید Vitateach.com