CSS یا SCSS - از کدام مورد استفاده کنیم؟

وقتی صحبت از طراحی صفحات وب می‌شود، تمایل داریم از CSS ساده یا SCSS (نسبت به پیش پردازنده‌های دیگر) در پروژه استفاده کنیم. SCSS یک مجموعه برتر از CSS است. بیشتر توسعه دهندگان به دلیل ویژگی‌های پیشرفته و سینتکس واضح‌تر، استفاده از آن را نسبت به CSS راحت‌تر می‌دانند.

در این مقاله می‌خواهیم ویژگی‌های SCSS و پیشرفت‌های CSS در طول سال‌های اخیر را بررسی کنم. علاوه بر این ارزیابی می‌کنیم که آیا CSS به عنوان جایگزین SCSS در عمل می‌تواند جوابگو باشد یا خیر.

آنچه CSS ارائه می‌دهد

CSS از روزهای ابتدایی خود مسیری طولانی را طی کرده است. پیشرفت‌های اخیر در CSS حتی نیاز به استفاده از جاوااسکریپت برای انیمیشن‌ها را از بین می‌برد. وقتی این انیمیشن‌ها را توسط CSS اجرا می‌کنیم، مرورگرهای مدرن از GPU (واحد پردازش گرافیکی) برای بهبود عملکرد استفاده می‌کنند. همچنین می‌توانیم با کمترین کد، طرح‌های شبکه‌بندی پیچیده و واکنش‌گرایی را با CSS ایجاد کنیم.

با اینکه بسیاری ویژگی جدید در CSS وجود دارد، می‌خواهیم بر ویژگی‌های جدیدی که اغلب در برنامه‌های وب مدرن استفاده می‌شود، تأکید کنیم.

• در هر برنامه وب، بخش اصلی و مهم در آن مسئله طرح‌بندی (Layout) آن است. در حالی که بسیاری از ما سال‌ها به فریمورک‌های CSS مانند بوت‌استرپ اعتماد داشتیم، اما اکنونCSS Grid ، Subgrid و Flexbox را ارائه می‌دهد تا طرح را به صورت طبیعی در یک صفحه وب ساختاردهی کند. هرچند Flexbox در بین توسعه‌دهندگان بسیار محبوب است، Grid هم در حال جلب توجه است.
• انعطاف پذیری تایپوگرافی
• قدرت و انعطاف پذیری Transitions و Transforms نیاز به جاوااسکریپت را برای انیمیشن‌ها از بین می‌برد.
• ویژگی‌های سفارشی/پشتیبانی از متغیرها. این ویژگی به ویژه هنگام اشتراک و استفاده مجدد از کامپوننت‌های CSS با استفاده از ابزاری مانند Bit(Github) بسیار مهم است. آن‌ها به ما این امکان را می‌دهند تا تم‌ها، سایزها، پالت‌های رنگی، فونت‌ها و... را بسازیم.

ویژگی‌های SCSS

SCSS به ما امکان می‌دهد از تکرار متغیرها خودداری کنیم

ما در کد استایل خود بارها از تعداد زیادی رنگ و عناصر دیگر مانند فونت‌ها استفاده می‌کنیم. به منظور تعریف این ویژگی‌ها استفاده مجدد در یک مکان، SCSS متغیرهایی را ارائه می‌دهد. این به ما امکان می‌دهد به جای تکرار مقدار رنگ، یک رنگ را تحت نام متغیر تعریف کرده و از نام متغیر در همه جای پروژه استفاده کنیم.

بیایید نگاهی به یک مثال بیندازیم.

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;
body {
  color: $black;
  font-family: $primary-font;
  padding: #{$unit * 2};
}

CSS به ما امکان می‌دهد از متغیرها و همچنین از خصوصیات سفارشی استفاده کنیم. خصوصیات سفارشی در CSS به این شکل است.

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;
body {
  width: var(--width);
  color: var(--black);
  font-family: var(--primaryFont);
}

هرچند خصوصیات سفارشی CSS در زمان اجرا نسبت به متغیرهای SCSS به صرفه نیستند.

دلیل پردازش آنها در زمان اجرا مرورگر است. در مقابل آن، متغیرهای SCSS هنگام تبدیل SCSS به CSS در مرحله پیش پردازش تعیین می‌شوند. بنابراین استفاده از متغیرها و استفاده مجدد از کد در عمل با SCSS بهتر است.

SCSS امکان استفاده از سینتکس تو در تو را فراهم می‌کند

اگر یک بلوک از کد را در CSS در نظر بگیریم:

.header {
  padding: 1rem;
  border-bottom: 1px solid grey;
}
.header .nav {
  list-style: none;
}
.header .nav li {
  display: inline-flex;
}
.header .nav li a {
  display: flex;
  padding: 0.5rem;
  color: red;
}

به نظر می‌رسد کد بالا با همان کلاس والدی که برای استفاده از یک استایل در کلاس‌های فرزند تکرار می‌شود، به هم ریخته خواهد شد.

با این حال با استفاده از SCSS می‌توانید از یک سینتکس تو در تو استفاده کنید که کد تمیزتری را تولید می‌کند. کد بالا در SCSS به شکل زیر است:

.header {
  padding: 1rem;
  border-bottom: 1px solid grey;
  .nav {
    list-style: none;
    li {
      display: inline-flex;
      a {
        display: flex;
        padding: 0.5rem;
        color: red;
      }
      
    }
  }
}

بنابراین به نظر می‌رسد استایل دهی کامپوننت‌ها با استفاده از SCSS نسبت به CSS معمولی بسیار بهتر و تمیزتر باشد.

ویژگی @extend - از تکرار استایل‌های یکسان خودداری کنید

در SCSS می‌توانید برای گسترش خصوصیات بین چند سلکتور از @extend استفاده کنید. استفاده از @extend با متغیرهایی مانند زیر است.

%unstyled-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

%unstyled-list یک مکان نگهدارنده (به مانند یک متغیر) است که می‌تواند برای جلوگیری از تکرار کد در مواردی که شما باید از الگوی یکپارچه سازی لیست بالا در چندین مکان استفاده کنید، مورد استفاده قرار گیرد.

.search-results {
  @extend %unstyled-list;
}
.advertisements {
  @extend %unstyled-list;
}
.dashboard {
  @extend %unstyled-list;
}

به همین ترتیب می‌توانید از این الگو در همه استایل‌های خود به صورت مجدد استفاده کنید.

در SCSS ویژگی‌های بسیار بیشتری مانند توابع، میکسین‌ها، حلقه‌ها و... وجود دارد که کار یک توسعه‌دهنده فرانت-اند را آسان‌تر می‌کند.

آیا باید از SCSS به CSS مهاجرت کنیم؟

ما در حال بررسی آنچه امروز CSS ارائه می‌دهد و همچنین ویژگی‌های SCSS تاکنون بوده‌ایم. با این حال اگر CSS را با SCSS مقایسه کنیم، می‌توان چند ویژگی اساسی را پیدا کرد که در حال حاضر در CSS در دسترس نیستند.

• با رشد و توسعه یک برنامه وب، پایگاه کد پیچیده‌تر و بزرگتر می‌شود. بنابراین قابلیت تو در تویی به عنوان یک نجات‌دهنده زندگی برای همه افراد در چنین پروژه به منظور بهبود خوانایی بسیار اهمیت دارد. با این حال متاسفانه CSS از آن پشتیبانی نمی‌کند.
• CSS توانایی مدیریت قوانین کنترل جریان را ندارد. اما SCSS مقررات کنترل جریان مانند @if،@else ،@each، $for و @while را فراهم می‌کند. به عنوان یک برنامه‌نویس، این موضوع در مورد انتشار استایل‌ها بسیار مفید است. همچنین این امکان را برای شما فراهم می‌کند تا کد کمتر و تمیزتری را بنویسید.
• SCSS به صورت out-of-the-box از مجموعه استاندارد عملگرهای عددی پشتیبانی می‌کند که در CSS برای عملگرهای عددی باید از تابع ()calc استفاده کنید. همچنین این نوع عملیات در SCSS به طور خودکار بین واحدهای سازگار تبدیل می‌شود.
  هرچند تابع calc() در CSS محدودیت کمی دارد مانند تقسیم که سمت راست باید یک عدد باشد و برای ضرب حداقل یکی از آرگومان‌ها باید یک عدد باشد.

• جنبه مهم دیگر استفاده مجدد از استایل است که یک سنگر برای SCSS تلقی می‌شود. به عنوان مثال SCSS ویژگی‌های بسیاری مانند ماژول‌های داخلی، نقشه‌ها، حلقه‌ها و متغیرها را برای استفاده مجدد از استایل‌ها فراهم می‌کند.

بنابراین به نظر من حتی با وجود بهترین ویژگی‌هایCSS ، SCSS گزینه بهتری است. شما هم نظرات خود را در بخش زیر بنویسید.

منبع