آموزش Sasssassبرنامه نویسی

آموزش سریع sass : در کمتر از 10دقیقه با Sass استایل نویسی کنید

تصویر از رحمت ابراهیمیان قاجاری رحمت ابراهیمیان قاجاری در توییتر دنبال کنید 8 بهمن 1401آخرین بروزرسانی: 8 بهمن 1401
0 259 زمان تقریبی مطالعه 8 دقیقه
آموزش سریع sass
آموزش سریع sass

آموزش سریع sass در 10 دقیقه نه افسانه است نه حقهف این آموزش کوتاهی است که در وبسایت رسمی sass معرفی شده و برای افرادی است که قصد دارند خیلی سریع سر از کدهای sass در آورده و بدون معطلی اقدام به کدنویسی با آن نمایند.

فهرست عناوین:

Sass چیست؟

  • Sass مخفف عبارت Syntactically Awesome StyleSheet به معنی “برگه استایل دهی از نظر دستوری نحوی فوق العاده!!” است.
  • Sass در واقع یک افزونه برای CSS است.
  • sass یک پیش پردازنده CSS است.
  • Sass به صورت کامل با تمام نسخه های CSS سازگار است.
  • Sass تعداد خطوط لازم برای اجرای یک استایل CSS را کاهش داده، مانع از تکرار شده و در نتیجه در وقت و انرژی صرفه جویی می کند.
  • Sass توسط Hampton Catlin طراحی و توسط Natalie Weizenbaum توسعه داده شد.
  • Sass کاملا رایگان است.

چرا از Sass استفاده کنیم؟

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

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

Sass چطور کار می کند؟

مرورگر، کدهای Sass را درک نمی کند، بنابراین قبل از هر چیز، کدهای Sass باید به کدهای CSS کامپایل شوند. بنابراین برای تبدیل کدهای Sass به کدهای CSS به یک کامپایلر نیاز خواهید داشت.

به فرآیند تبدیل Sass به CSS ترانسپایلینگ (Transpiling) گفته می شود. شما باید کدهای Sass را به یک ترنسپایلر بدهید تا آن ها را به کدهای CSS که برای مرورگرها قابل فهم است، تبدیل کند.

فایل Sass و تبدیل به CSS

پسوند فایل های sass به صورت “.scss” است.

مستقیم ترین راه برای تبدیل sass به CSS استفاده از ترمینال است. هنگامی که Sass نصب شد، می توانید با استفاده از دستور sass کدهای sass را به CSS تبدیل کنید.

نوشته های مشابه

باید به sass بگویئد که کدام فایل را کامپایل کند، و کجا فایل خروجی آن را تولید کند. به عنوان مثال قصد داریم فایل input.scss را به output.css کامپایل کنیم.

همچنین می توانید فایل ها یا دایرکتوری ها را با پرچم --watch زیرنظر بگیرید. این پرچم به sass می گوید که فایل input.scss را دائما زیر نظر بگیرد و با هربار تغییر در این فایل، آن را مجددا کامپایل کند و فایل output.css را بازنویسی کند.

برای مثال:

Aqaye Pardakht
sass --watch input.scss output.css

می توانید مشخص کنید که ورودی و یا خروجی در کدام پوشه قرار دارند:

sass --watch app/sass:public/stylesheets

در واقع sass تمام فایل ها در مسیر app/sass را زیر نظر دارد و به هنگام تغییر، آن ها را در پوشه public/stylesheet خروجی می گیرد.

sass دارای دو دستور نحوی (Syntax) است! سینتکس scss (فایل با پسوند.scss) رایج تر است. این سینتکس شامل ترین نسخه برای درج کدهای CSS است. سینتکس توررفته (indented syntax با پسوند .sass)، کمتر استفاده می شود. در این روش به جای استفاده از آکولاد ، از تو رفتگی برای قرار دادن دستورات و از خطوط جدید به جای سمی کولن برای جداسازی آ نها استفاده می شود. تمام مثال های این آموزش شامل هر دو نحو است.

راه آسان دیگر استفاده از نرم افزارهای کامپایلر همچون Scott-app است.

آموزش سریع sass

متغیرها در Sass

به متغیرها به عنوان ظرف هایی برای ذخیره اطلاعاتی که قصد دارید بارها و بارها و در جاهای مختلفی از کد (و در فایل های مختلف) استفاده کنید، نگاه کنید.

می توانید متغیرهایی برای رنگ ها، نوع فونت، اندازه فونت یا هر مقدار CSS که می خواهید تعریف و هر چندبار و هر کجا که می خواهید از آن متغیرها استفاده کنید.

برای تعریف متغیرها، در ابتدای نام متغیر از علامت دلار $ استفاده می کنیم:

سینتکس SCSS

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

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

سینتکس 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 پردازش می شود، متغیرهایی که تعیین کردیم، کامپایل شده ودر فایل CSS خروجی، به جای نام متغیر، مقدار آن قرار می گیرد.

Zarin pall

برای نمونه در مثال بالا، در خروجی CSS، به جای $primary-color، مقدار آن یعنی #333 قرار می گیرد.

می توانید یک مجموعه رنگ انتخاب کنید و هر زمان که خواستید، تنها با تغییر مقدار این متیغرها، تم رنگی کل وبسایت را تغییر دهید.

کدهای تو در تو در sass

کدهای HTML از یک ساختار سلسله مراتبی بهره مند هستند. یعنی یک یا تعدادی تگ می توانند فرزندان یک تگ دیگر باشند. اما CSS چنین قابلیتی ندارد (البته به لحاظ نحوی)

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

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

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

اما در Sass این فرآیند به راحتی قابل درک و پیاده سازی است.

کدنویسی تودرتور به سبک SCSS

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

  li { display: inline-block; }

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

کدنویسی تودرتور به سبک 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;
}

طبق کد بالا، برای نشان دادن رابطه پدر فرزندی از آکولادهای تو در تو بهره بردیم. با این سبک کدنویسی، خوانایی کدها بسیار ساده و درک آنها بسیار راحت خواهد بود.

فایل های جزئی Partials

می توانید فایل های جزئی (بخوانید جانبی) ایجاد کنید که هر کدام حاوی قطعات کوچکتری از کد هستند و سپس این فایل های جانبی را به عنوان جزئی از فایل های اصلی، در آن فایل های اصلی درج کنید (اصطلاحا import یا درون ریزی کنید)

با این روش می توانید به راحتی کدهای خودتان را ماژولار کنید (modularize). با این کار دسته بندی کدها راحت تر و سازماندهی آن ها نیز آسان تر خواهد بود.

فایل جزئی، یک فایل با پسوند scss است که در ابتدای نام آن فایل یک علامت آندرلاین (_) قرار می گیرد. برای مثال _header.scss یک فایل جزئی است.

وقتی یک فایل به صورت جزئی باشد، خودش به تنهایی خروجی تولید نمی کند. یعنی فایل خروجی همچون header.css از آن تولید نمی شود. بلکه این فایل را باید در یک فایل Scss دیگر (که بدون آندرلاین است) درج کرد.

برای درج یک فایل جزئی در فایل اصلی، از قانون @use استفاده می شود.

@use "dw_variables";

نکته مهم: در حال حاضر فقط نسخه Dart از @use پشتیبانی می کند. در سایر نسخه ها باید از قانون @import استفاده کنید.

@import "dw_variables";

ماژول ها در Sass

لازم نیست تمام کدهای sass خود را در یک فایل بنویسید. می توانید آن ها را به هر تعداد فایل جزئی که خواستید تقسیم، و سپس این فایل های جزئی را با دستور @use یا @import در فایل های اصلی فراخوانی کنید.

به این فرآیند، کدنویسی ماژولار می گویند. در نهایت کدها همه در یک فایل اصلی درج شده و به عنوان یک فایل css در خروجی کامپایل می شوند.

کدنویسی ماژولار در SCSS :

میهن وبهاست

9 درصد تخفیف ویژه با کد معرف زیر
mwh-683cc

فایل جزئی با نام _base.scss

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

فایل اصلی با نام style.css

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

کدنویسی ماژولار در Sass:

فایل جزئی با نام _base.scss

// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

فایل اصلی با نام style.css

// styles.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

نکته: اگر از نسخه Dart استفاده نمی کنید، از دستور @import به جای @use استفاده کنید.

نکته مهم: در زمان فراخوانی، نیازی به استفاده از آندرلاین و پسوند فایل ندارید. یعنی کافیست بنویسید @use 'base' .

کد CSS خروجی

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

.inverse {
  background-color: #333;
  color: white;
}

Mixin ها در Sass

نوشتن برخی کدها در CSS کمی خسته کننده است، به خصوص یا CSS3 و پیشوندهای وندور بسیاری که وجود دارد.

پنل پیامکی پیشرفته پنل پیامکی پیشرفته دونا اس ام اس

یک mixin به شما امکان می دهد گروهایی از اعلان های CSS را ایجاد کنید و هرجا لازم شد از آن ها بهره مند شوید.

برای مثال:

استفاده از mixin در SCSS

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

استفاده از mixin در Sass

@mixin theme($theme: DarkGray)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff


.info
  @include theme

.alert
  @include theme($theme: DarkRed)

.success
  @include theme($theme: DarkGreen)

خروجی CSS

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

برای ایجاد یک میکس از دستور @mixin استفاده می کنید و نامی برای آن می گذارید.

نام mixin ما در اینجا theme است. همچنین از متغیر $theme درون پرانتز استفاده می کنیم تا بتوانیم هر مقداری را به جای theme به این mixin بدهیم.

پس از ایجاد mixin، می توانید به عنوان یک اعلان CSS (declaration)، از آن استفاده کنید. برای استفاده از mixin ها از دستور @include و سپس نام mixin استفاده می کنیم.

گسترش / ارث بردن در sass (Extend/Inheritance)

با استفاده از دستور @extend، می توانید بین سلکتورهای CSS و استایل های اختصاص داده شده اشتراک ایجاد کنید.

یعنی یک کلاس ایجاد کنید که خود شامل تعدادی استایل است. سپس با استفاده از دستور extend، همین استایل ها را به یک سلکتور یا کلاس دیگر هم بدهیم.

استفاده از extend در SCSS

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

استفاده از extend در Sass

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

خروجی CSS

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

کد بالا چکار می کند؟

یک سلکتور به نام message-shared داریم که دارای بوردر 1 پیکسل، 10 پیکسل پدینگ و رنگ متن 333 است.

حالا، همین استایل ها را به سلکتور کلاس message، success, error و warning هم اختصاص می دهیم.

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

در نتیجه هم در نوشتن استایل ها صرفه جویی شده و هم کد خروجی در کمینه ترین حالت نوشته شده است.

توجه کنید که متغیر equal-heights هرگز کامپایل نمی شود. چون جایی استفاده نشده است.

عملگرها در Sass

گاهی استفاده از عملگرهای ریاضی مفید خواهد بود. تعدادی عملگر ریاضی همچون جمع، تقسیم، ضرب، تفریق، % و تابع math() بسیار به کار می آیند.

استفاده از اپراتور در SCSS

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

استفاده از اپراتور در Sass

@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%

aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto

خروجی CSS

.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

ما در مثال بالا یک شبکه پویا و سیال ایجاد کردیم. عرض مقاله همواره برابر درصدی از 960 پیکسل است. مقدار عرض تگ article برابر 60 درصد و مقدار عرض aside برابر 30 درصد مقدار 960 پیکسل است.

امیدوارم این اموزش مفید بوده باشه. منتظر شنیدن نظرات تون هستیم.

مطالب پیشنهادی:

منبع: Sass Basic

به این مطلب امتیاز بدهید

تصویر از رحمت ابراهیمیان قاجاری رحمت ابراهیمیان قاجاری در توییتر دنبال کنید 8 بهمن 1401آخرین بروزرسانی: 8 بهمن 1401
0 259 زمان تقریبی مطالعه 8 دقیقه
نمایش بیشتر
بهترین درگاه پرداخت
Aqaye Pardakht
تصویر از رحمت ابراهیمیان قاجاری

رحمت ابراهیمیان قاجاری

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا