ساس چیست؟ نحوه استفاده از این زبان برنامه افزودنی CSS را بیاموزید

اگر با فایل های CSS نامرتب و نامرتب دست و پنجه نرم می کنید، به Sass و جادوی پردازش آن نگاه نکنید.

شیوه نامه های نحوی عالی (Sass) یک زبان پسوند CSS محبوب است. این زبان حدود 15 سال است که وجود دارد. این به خوبی با هر نسخه از CSS کار می کند، و آن را با هر کتابخانه و چارچوب CSS، از Bootstrap گرفته تا Foundation، سازگار می کند.

این زبان به شما امکان می دهد کد Sass را بنویسید و سپس آن کد را در CSS کامپایل کنید. ارزش استفاده از Sass به جای CSS ساده این است که ویژگی های اضافی را ارائه می دهد که در حال حاضر خارج از محدوده CSS هستند.

در این آموزش، نحوه استفاده از Sass و مهمترین ویژگی های آن را خواهید آموخت.

نصب Sass

راه های مختلفی برای استفاده از Sass در دستگاه شما وجود دارد. از جمله اجرای یک برنامه (مانند LiveReload یا Scout-App)، دانلود Sass از GitHub یا نصب آن با استفاده از npm.

نصب Sass با npm

برای نصب Sass با استفاده از npm، باید NodeJS و npm را روی دستگاه خود نصب کنید. سپس باید یک فایل package.json ایجاد کنید (که تمرین خوبی در هنگام نصب هر بسته npm در پروژه های خود است). می توانید با دستور ترمینال زیر یک فایل package.json را در فهرست پروژه خود ایجاد کنید:

npm init -y


با اجرای این دستور یک فایل package.json با محتوای زیر تولید می شود:

{
"name": "my_app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}


فایل package.json مهم است زیرا به عنوان پیکربندی برای پروژه شما عمل می کند. هر بار که یک بسته جدید npm را نصب می کنید، فایل package.json این را نشان می دهد.

اکنون می توانید Sass را با قرار دادن دستور زیر در ترمینال خود نصب کنید:

npm install sass


این دستور با ایجاد یک فیلد وابستگی جدید که حاوی بسته جدید Sass است، فایل package.json را به روز می کند. همچنین یک فایل package-lock.json جدید تولید می کند و sass (به علاوه وابستگی ها) را در دایرکتوری node_modules نصب می کند.

انواع مختلف فایل Sass

یک فایل Sass می تواند یکی از دو پسوند .sass یا .scss را داشته باشد. تفاوت اصلی بین آنها در این است که فایل .scss از پرانتزهای فرفری و نیم ویرگول (مثل CSS) استفاده می کند، در حالی که فایل .sass CSS را با استفاده از تورفتگی (مثل پایتون) ساختار می دهد. برخی از توسعه دهندگان ترجیح می دهند از فایل .scss استفاده کنند زیرا ساختار آن به CSS نزدیک تر است.

یک نمونه فایل .scss

$primary-color: blue;
body {
color: $primary-color;
p {
color: red;
}
}


نمونه فایل .sass

$primary-color: blue
body
color: $primary-color
p
color: red

کامپایل یک فایل Sass در CSS

شما می توانید یک فایل Sass را با استفاده از برنامه خط فرمان sass کامپایل کنید:

sass file.scss > file.css

شما همچنین می توانید sass را در تمام فایل ها در یک فهرست خاص اجرا کنید:

sass scss:dist/css/

این دستور تمام فایل های Sass را در دایرکتوری scss کامپایل می کند و فایل های حاصل را در dist/css ذخیره می کند.

اگر از npm استفاده می کنید، می توانید یک میانبر مناسب برای کامپایل sass با استفاده از فیلد اسکریپت در فایل package.json خود تنظیم کنید:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "sass --watch scss:dist/css/"
},


این پیکربندی از گزینه –watch استفاده می کند. Sass را در حال اجرا نگه می دارد و اطمینان حاصل می کند که آن فایل ها را هر زمان که تغییر می کنند دوباره کامپایل می کند. برای هر فایل، sass یک فایل css. و یک فایل css.map.

برای اجرای اسکریپت Sass در بالا، باید دستور زیر را در ترمینال خود اجرا کنید:

npm run sass


با اجرای آن دستور خروجی مشابه این تولید می شود:

> my_app@1.0.0 sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss:dist/css/
Compiled scss\main.scss to dist\css\main.css.
Sass is watching for changes. Press Ctrl-C to stop.


متغیرهای Sass

امروزه می توانید متغیرهایی را در CSS ایجاد کنید، اما 15 سال پیش متغیرهای CSS وجود نداشتند، بنابراین پشتیبانی Sass از آنها ارزشمند بود. متغیرهای Sass تقریباً به همان روشی عمل می کنند که متغیرهای CSS انجام می دهند. آنها مقادیری (مانند رنگ ها) را که شما قصد استفاده از آنها را در یک فایل CSS دارید ذخیره می کنند. یکی از مزایای اصلی متغیرها این است که به شما این امکان را می دهند که بسیاری از رخدادهای یک مقدار را تنها با تغییر آن در یک مکان به روز کنید.

هر متغیر Sass با علامت دلار شروع می شود و به دنبال آن هر ترکیبی از کاراکترها وجود دارد. سعی کنید مانند مثال $primary-color بالا، متغیرهای خود را توصیفی کنید. توجه به این نکته مهم است که یک متغیر Sass در متغیرهای CSS کامپایل نمی شود. به عنوان مثال، این فایل .scss:

$primary-color: blue;

body {
color: $primary-color;
}

در CSS زیر کامپایل خواهد شد:

body {
color: blue;
}


همانطور که از فایل بالا می بینید هیچ متغیر CSS وجود ندارد. مزیت متغیرها این است که هر تغییری که در فایل Sass ایجاد شود، فایل CSS مربوطه را به روز می کند.

Sass Mixins

اگر یک ویژگی دارید که می خواهید چندین بار در طول پروژه خود از آن استفاده کنید، یک متغیر عالی است. اما اگر گروهی از ویژگی‌ها را دارید که می‌خواهید از آنها به عنوان واحد استفاده کنید، یک mixin این کار را انجام می‌دهد.

هر میکسی با کلمه کلیدی @mixin شروع می شود و به دنبال آن نامی که می خواهید به mixin اختصاص دهید. شما این امکان را دارید که متغیرها را به عنوان پارامتر به mixin منتقل کنید و از آن متغیرها در بدنه mixin استفاده کنید، تقریباً مانند یک تابع.

استفاده از Mixin

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}

#home {
@include light-theme(blue);
}


اولین چیزی که ممکن است در کد بالا متوجه شوید این است که mixin دو آرگومان را می پذیرد. می‌توانید مقادیر پیش‌فرض را به آرگومان‌ها اختصاص دهید و وقتی آن را اضافه می‌کنید، آن‌ها را لغو کنید.

بعد از اینکه میکس خود را ایجاد کردید، می توانید آن را در هر بخش از وب سایت خود با استفاده از کلمه کلیدی @include و نام میکسین استفاده کنید.

کامپایل کد Sass در بالا، کد CSS زیر را در فایل مقصد شما ایجاد می کند:

#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: blue;
color: #2c2c2c;
}


توابع Sass

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

@function add-numbers($num-one, $num-two){
$sum: 0;
$sum: $num-one + $num-two;
@return $sum
}


این تابع بالا دو عدد را می پذیرد و مجموع آنها را برمی گرداند. توابع Sass حتی می توانند حاوی دستورات if، حلقه ها و سایر دستورات جریان کنترل باشند.

ماژول های Sass

اگر مجبور بودید همه متغیرها، میکس‌ها و توابع خود را در یک فایل قرار دهید، هنگام ایجاد برنامه‌های بزرگ، یک فایل Sass عظیم خواهید داشت. ماژول‌ها راهی برای تقسیم فایل‌های بزرگ به فایل‌های کوچک‌تر فراهم می‌کنند که sass در طول کامپایل ترکیب می‌کند. به عنوان مثال، شما می توانید یک ماژول تابع و یک ماژول mixin داشته باشید، تنها چیزی که باید به خاطر داشته باشید کلمه کلیدی @use است.

در اینجا یک مثال نشان می دهد که چگونه می توانید میکس قبلی را به فایل خود جدا کنید:

فایل mixins.scss

@mixin light-theme($primary-color: white, $secondary-color: #2c2c2c) {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: $primary-color;
color: $secondary-color;
}


فایل main.scss

@use 'mixins';
#home{
@include mixins.light-theme;
}

برای وارد کردن و استفاده از یک فایل خارجی به عنوان ماژول، باید از کلمه کلیدی @use برای وارد کردن آن استفاده کنید. سپس، برای استفاده از یک mixin خاص از فایل وارد شده، پیشوند نام mixin خاص را با نام فایل و به دنبال آن نقطه قرار دهید. با کامپایل کردن فایل های بالا کد CSS زیر تولید می شود:

#home {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
background-color: white;
color: #2c2c2c;
}


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

Sass یک فرمت از سینتکس CSS است. به شما این امکان را می دهد که شیوه نامه های خود را ساده کنید و آنها را کارآمدتر مدیریت کنید. اما برای ایجاد طرح های موثر همچنان باید به CSS و اصول طراحی وب تسلط داشته باشید.

این مقاله نحوه نصب و استفاده از Sass را به شما آموزش می دهد. شما یاد گرفته اید که چگونه متغیرها، میکسین ها، توابع و ماژول های Sass را ایجاد کنید. اکنون تنها کاری که باید انجام دهید این است که یک سند HTML ایجاد کنید و شاهد زنده شدن کد Sass خود باشید.

منبع مقاله