ویتایتچ ، پایگاه آموزش تخصصی برنامه نویسی و مهارت های کاربردی ویژه بازار کار
Front-end sass طراحی سایت

تبدیل Sass به Css

توسط:
تاریخ انتشار: ۰۲ آبان ۱۳۹۸
تبدیل sass به css
تبدیل Sass به Css

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

اشتراک گذاری
برچسب ها