SCSS (Sassy CSS) یک زبان برنامه نویسی پیش پردازنده است که به CSS (Cascading Style Sheets) تفسیر یا کامپایل می شود. CSS معمولی را با ویژگی‌ها و قابلیت‌های اضافی تقویت می‌کند که نگهداری آن را قدرتمندتر و آسان‌تر می‌کند. در اینجا چند نکته کلیدی در مورد SCSS وجود دارد:
ویژگی های کلیدی SCSS:
1. متغیرها: SCSS به شما امکان می دهد متغیرهایی را برای مقادیر قابل استفاده مجدد مانند رنگ ها، فونت ها یا هر مقدار ویژگی CSS تعریف کنید.
$primary-color: #333;
body {
color: $primary-color;
}
2. تودرتو: SCSS به شما امکان می دهد انتخابگرهای CSS خود را به گونه ای لانه کنید که از سلسله مراتب بصری HTML شما پیروی کند و خوانایی و نگهداری آن را آسان تر کند.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li { display: inline-block; }
}
}
3. Partials و Import: می توانید CSS خود را به فایل های کوچکتر و قابل استفاده مجدد تقسیم کنید. سپس این جزئی ها را می توان به یک فایل SCSS اصلی وارد کرد.
// _variables.scss
$font-stack: Helvetica, sans-serif;
// main.scss
@import 'variables';
body {
font-family: $font-stack;
}
4. میکس‌ها: میکس‌های SCSS به شما اجازه می‌دهند تا تکه‌های کد قابل استفاده مجدد ایجاد کنید، که می‌توانند در انتخابگرهای دیگر گنجانده شوند.
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
5. Extend/Inheritance: در SCSS این امکان به شما داده می شود که مجموعه ای از ویژگی های CSS را از یک انتخابگر به انتخابگر دیگر به اشتراک بگذارید.
%message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success { @extend %message; background-color: #e6efc2; }
.error { @extend %message; background-color: #f4cccc; }
6. توابع: توابع سفارشی را برای استفاده در کد SCSS خود ایجاد کنید.
@function pow($base, $exponent) {
$result: 1;
@for $i from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.exponential { width: pow(2, 3) * 1px; }
7. دستورالعمل های کنترل: برای منطق در SCSS خود از @if، @for، @each و @while استفاده کنید.
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
نصب SCSS
نصب SCSS یک فرآیند ساده است. در اینجا مراحلی وجود دارد که می توانید برای راه اندازی و اجرای SCSS روی دستگاه خود دنبال کنید:
مرحله 1: Node.js and npm را نصب کنید
Node.js and npm (Node Package Manager) برای اجرای SCSS مورد نیاز است. می توانید آنها را از وب سایت nodejs دانلود و نصب کنید.
مرحله 2: Sass را نصب کنید
هنگامی که Node.js and npm را نصب کردید، می توانید Sass را به صورت سراسری بر روی دستگاه خود با استفاده از دستور زیر در ترمینال یا خط فرمان خود نصب کنید:
npm install -g sass
مرحله 3: تأیید نصب
برای اطمینان از اینکه Sass به درستی نصب شده است، می توانید نسخه را با اجرای زیر بررسی کنید:
sass --version
اگر Sass به درستی نصب شده باشد باید شماره نسخه را ببینید.
مرحله 4: فایل های SCSS ایجاد کنید
اکنون می توانید فایل های .scss خود را ایجاد کنید. به عنوان مثال، یک فایل به نام styles.scss در فهرست پروژه خود ایجاد کنید.
مرحله 5: SCSS را به CSS کامپایل کنید
برای کامپایل فایل های SCSS خود در CSS، از دستور زیر در ترمینال خود استفاده کنید:
sass styles.scss styles.css
این دستور styles.scss را گرفته و به styles.css کامپایل می کند.
مرحله 6: راه اندازی Watcher (اختیاری)
برای گردش کار کارآمدتر، می‌توانید یک تماشاگر راه‌اندازی کنید تا هر زمان که تغییرات را ذخیره می‌کنید، به‌طور خودکار فایل‌های SCSS شما را کامپایل کند. از این دستور برای تماشای فایل SCSS خود استفاده کنید:
sass --watch styles.scss:styles.css
این کار ادامه می‌یابد و هر بار که تغییری ایجاد می‌کنید و آن را ذخیره می‌کنید، به‌طور خودکار فایل SCSS شما را در CSS کامپایل می‌کند.
مرحله 7: CSS را در HTML خود قرار دهید
در نهایت، فایل CSS تولید شده را در فایل HTML خود قرار دهید:
<link rel="stylesheet" href="styles.css">
و بس! اکنون برای شروع استفاده از SCSS در پروژه های خود تنظیم شده اید.
معماری کارآمد
- الگوی 7-1: پروژه خود را در هفت پوشه و یک فایل اصلی سازماندهی کنید.
scss/ |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | |– components/ | |– _buttons.scss # Buttons | |– _carousel.scss # Carousel | |– layout/ | |– _navigation.scss # Navigation | |– _grid.scss # Grid system | |– pages/ | |– _home.scss # Home specific styles | |– themes/ | |– _theme.scss # Theme specific styles | |– utils/ | |– _variables.scss # Sass Variables | |– _functions.scss # Sass Functions | |– _mixins.scss # Sass Mixins | |– _helpers.scss # Class & placeholders | |– vendors/ | |– _bootstrap.scss # Bootstrap | `– main.scss # Main Sass file
- ITCSS (مثلث معکوس CSS): یکی دیگر از معماری های مقیاس پذیر و قابل نگهداری.
| Settings | (Global variables) | Tools | (Functions, mixins) | Generic | (CSS resets, normalize) | Elements | (Global element styles) | Objects | (Structure and design patterns) | Components | (Components like buttons, navbars) | Utilities | (Utility and helper classes)
