Sass چیست و با CSS چه ارتباطی دارد

Sass چیست ؟ 

Sass که مخفف Syntactically Awesome Style Sheets میباشد ، به زبان ساده تر یک مکمل برای زبان CSS هست ولی هرگز در کارآیی CSS تغییری ایجاد نمیکند . 

Sass امکان ایجاد متغیرها در CSS را ممکن میکند اما کدهای Sass سمت سرور کامپایل و در نهایت به همان CSS تبدیل شده و به مرورگر تحویل داده میشوند . 

Sass امکانات زیادی مثل متغیرها (Variables) ،  دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه‌بندی کدها (Mixins)، وراثت (Inheritance) و عملگرها (Operators) را در کدهای Css را فراهم می‌کند.

Cascading Style Sheets یا همان CSS ، از زمانی که توسط W۳C پذیرفته شده است ، مسیر طولانی را طی کرده است. زمانی بود که طراحان وب با برش تصاویر و جداول وب سایت طراحی میکردند اما با بوجود آمدن CSS۳ انقلاب بزرگی در طراحی وب سایت ها بوجود آمد و مخصوص برای افرادی که روزهای سختی را با نسخه های قبلی پشت سر گذاشته بودند عالی بود  . تا اینکه  امروزه پیش پردازنده هایی مثل Sass برای CSS ساخته شده است 

پیش پردازنده ی CSS چیست ؟

پیش پردازنده های CSS یک زبان اسکریپتی هستند که از CSS ارث بری میکنند و به طراح این امکان را میدهند که عملیاتی را با آن زبان نوشته و در نهایت به CSS تبدیل کنند . Sass یکی از محبوب ترین پیش پردازنده های CSS است و پیش پردازنده های دیگری مثل Less و Stylus نیز وجود دارد .

قبل از اینکه بیش از این جلوتر برویم اگر شما CSS را بلد نیستید توصیه میکنیم برای ادامه ی این مقاله حتما در مورد CSS مطالعه کنید و حداقل با دستورات CSS  آشنا باشید . 

نحوه ی استفاده از Sass 

Sass با تمام نسخه های CSS هماهنگ میباشد و تنها چیزی که برای استفاده از CSS نیاز میباشد نصب زبان Ruby  است چرا که Sass با Ruby توسعه داده شده است و همچنین میتوانید از مستندات خود Sass در این قسمت استفاده کنید . 

قواعد دستوری Sass : 

• SCSS یا Sassy CSS که با فرمت فایلی .scss ایجاد میشود و مشابه قواعد دستوری خود CSS است . 
• Indented یا simply called Sass که با فرمت .sass ایجاد میشود و شاید مشابه با قواعد دستوری CSS نباشد ولی کدنویسی سریعتری را به ارمغان می آورد 

این دو نوع فایل با استفاده از دستور sass-convert قابل تبدیل به یکدیگر هستند . 

متغیر ها در Sass  : 

مثل تمام زبان های برنامه نویسی Sass هم به شما اجازه میدهد متغیر بسازید و اطلاعات خود را درآنها نگهداری کنید و سپس در فایل استایل خود استفاده کنید . 

برای مثال شما میتوانید مقدار یک رنگ را بصورت هگزا در یک متغیر نگهداری کنید این کار را ساده تر میکند چون در آینده بجای اینکه همه ی جاهایی که آن رنگ را استفاده کردید تغییر دهید فقط مقدار متغییر را تغییر میدهید و همه جا تغییر اعمال میشود  . 

برای مثال کد زیر را ببینید : 

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

نتیجه ی کدهای بالا در CSS بصورت زیر است ( بعد از کامپایل ) : 

body { font: 100% Helvetica, sans-serif; color: #333; }

کدهای تو در تو در Sass : 

Nesting یا کدنویسی تو در تو مثل شمشیر دو لبه است . کدهای تو در تو در Sass نه تنها باعث کاهش کدهای نوشته شده میشود بلکه باعث مرتب شدن ، خوانایی بالا و جلوگیری از خطاهای احتمالی میشود .

برای درک بیشتر به مثال زیر دقت کنید 

کد نوشته شده با Sass : 

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

و نتیجه ی کامپایل شده کد بالا به CSS : 

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

ایمپورت کردن قطعه کد دیگر در فایل Sass : 

partials یا قطعه کد ها ، فایل هایی با قطعه کدهای کوچک هستند که قابل ایمپورت به دیگر فایل های Sass میباشد . حال با این قابلیت CSS میتوانید ماژولار باشد یعنی قطعه کدی را شخص دیگری بنویسد و به شما بدهد یا از اینترنت دانلود کنید و به راحتی در کدهای خود وارد کنید ! 

یک partial فایلی هست که به این شکل نام گذاری میشود . ابتدا نام partial و سپس _ و سپس  partial.scss  :  بصورت کاملتر partial.scss_

دستور @import به شما اجازه میدهد فایل های partial خود را وارد کنید  

مثال : 

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

نحوه ی ایمپورت کردن فایل بالا در Sass : 

// basefile.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

و نتیجه ی کامپایل شده به CSS : 

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

توجه : زمانی که شما فایل partial را وارد میکنید تنها نام فایل را بنویسید نیازی به نوشتن _ و کلمه ی partial و .scss نیست .

 

گروه بندی یا Mixin در Sass : 

فرض کنید یک دسته کد دارید که میخواهید آنها را چند جای مختلف استفاده کنید و همچنین پارامتری هم برای آن ارسال کنید یک چیز شبیه توابع در زبان های برنامه نویسی دیگر !

مثال زیر دقت کنید : 

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

در کد بالا میبینید که border-radius با کدهای زیادی یکبار نوشته شده است ولی بعدا میتوانید هر جا استفاده کنید و مقدار متغیر $radius را هم عوض کنید 

نتیجه ی کدهای بالا در CSS کامپایل شده به شکل زیرا ست : 

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ارث بری و گسترش یا Extend/Inheritance در Sass : 

دستور @extend در Sass یکی از دستورات کاربردی در Sass هست که باعث جلوگیری از کدنویسی مجدد میشود و مبحث DRY یا Dont Repeat Your Self مطرح میشود .

برای اینکه شما کلاس های متعددی در المان های HTML خود وارد نکنید بهتر است با استفاده از این دستور از class های دیگر ارث بری کنید و ویژگی های جدید اضافه کنید .

عملگرها در Sass : 

وجود عملگرها در CSS به شما این امکان را میدهد که کارهای بیشتری را انجام دهید مثلا px را به درصد تبدیل کنید و بالعکس . 

شما به عملیات حسابی ساده مثل جمع ، تفریق ، ضرب و تقسیم دسترسی دارید و میتوانید اعداد و مقادیر را محاسبه کنید 

البته Sass یک سری توابع هم دارد که به شما کمک میکند کارهای محاسباتی بیشتری انجام دهید که میتوانید لیستی از این توابع را اینجا ببینید 

 

---

مطالب زیر ممکن است برای شما مفید باشد

 تگ های header را در سئو سایت دست کم نگیرید رادیو صفر و یک - پادکست شماره ی 9 ام - اینترنت بی اینترنت رادیو صفر و یک - پادکست شماره ی 3 ام - شرکت جت برینز و محصولاتش برای برنامه نویسان رادیو صفر و یک - پادکست شماره ی 5 ام - دیپ فیک چیست ؟‌ آخرین مرز میان حقیقت و دروغ رادیو صفر و یک - پادکست شماره ی 1 ام - معرفی رادیو صفر و یک و زندگینامه ی گوینده

محصولات برگزیده مناسب شما

 کارگاه آموزش طراحی سایت با BULMA کارگاه آموزشی کار با ریسایکلر ویو در زبان کاتلین دوره ی آموزش لینوکس اوبونتو کارگاه آموزش کار با API های اینستاگرامی

پایان 👍