تعداد بازدید: 3221

آموزش Sass و کاربردها

sass یک ابزار قدرتمند برای تولید کدهای css می باشد (CSS Extension Language) می باشد. sass یک زبان پیش پردازنده (Preprosessor) می باشد. یعنی کد ها را پردازش و بعد تبدیل به css می کند.

sass یک ابزار برای محیط توسعه (development) می باشد و در پایان شما باید کدهای خروجی css را در پروژه خود فراخوانی کنید.

با استفاده از sass می توانید با استفاده از Logic های مختلف کدهای css پیاده سازی کنید :

  • Variables : استفاده از متغیرها
  • Nested Rules and Properties : پیاده سازی دستورات تو در تو
  • Referencing Parent Selectors : دسترسی به المان والد در ساختار های تو در تو
  • Partial Imports : وارد کردن کدها در جایگاه های مختلف و در نهایت compile به یک فایل
  • Mixin Directives : مثل تابع در زبان های برنامه نویسی عمل می کند.
  • Control Directives & Expressions : پیاده سازی ساختاره های شرطی حلقه
  • Function : توابع پیش فرض شامل تولید رنگ بر مبناهای مختلف یا تولید اعداد محاسبات و…

Sass Command Line Interface

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

فرض کنید در پوشه scss/style.css فایل های sass ما می باشد و ما میخواهیم آن را در مسیر css/style.css خروجی بگیریم :

sass --watch scss/style.scss:css/style.css --style expanded

فرمول این دستور به صورت زیر است :

sass SASS_FILE_PATH:CSS_FILE_PATH OPTIONS

آپشن های پر کاربرد در این دستور به شرح :

  • --watch : این دستور برای به گوش بودن sass جهت تبدیل و ذخیره هر گونه تغییر در فایل scss می باشد.
  • --style : نوع خروجی که می گیرد به چه صورت باشد. مقدار این option پس از آن می آید :
    • nested : مقدار پیش فرض که به خوانایی آن متوسط است.
    • expanded : تمیز و با بالاترین خوانایی – Most Human Readable
    • compact : هر property در یک خط
    • compressed : روش minify یا فشرده ترین حالت که فقط توسط مرورگر ها قابلیت خواندن دارد.

همچنین با استفاده از --update می توان بروزرسانی انجام داد که اگر مسیر خروجی را نداشته باشیم در دایرکتوری جاری خروجی را انجام می دهد.

متغیر (Variables)

جهت ذخیره موقت محتوا مثلا رنگ ها یا اندازه ها به طور خلاصه کلیه Property value یا هر مورد دیگری مثل اطلاعاتی دیگر نظیر زبان و یا جهت برای استفاده از ساختار های کنترل و یا نام کلاس ها و شناسه ها از متغیر ها استفاده می کنیم.

انواع داده در متغیر های sass می توان گفت همان مواردی که قرار است به عنوان Property value تعریف کردیم می باشد.

$width: 5em;
$color1: #ccc;
$color2: blue;
$border: 1px solid black;
$content: "gnutec";

متغیر ها پس از تعریف ممکن است در جای جای برنامه استفاده گردد. همچنین زمانی که متغیر در یک فایل تعریف شده باشده در تمامی زیر فایل ها که به وسیله import در فایل فراخوانی شده اند نیز قابل دسترسی است.

نکته : اگر در مقابل مقدار متغیر !default بگذارید اولویت آن را همیشه آخرین قرار می دهید. یعنی مقدار پیش فرض به ازای این که متغیر تعریف نشده باشد. ولی هر جا متغیر تعریف شد مقدار تغییر می کند.

Nested Rules and Properties

Nested Rules : اگر در DOM به دنبال آدرس یک المنت می گردید می توانید از همان ابتدا شروع به آدرس دهی از طریق المان های والد آن بکنید. همین ساختار دنباله دار در Html نیز به صورتی دیگر در scss قابل پیاده سازی است.

.main {
  color: black;
  h1{
    margin: 0;
  }//h1
}//.main

در مثال بالا ابتدا peoperty های مربوط به .main را تعریف و بعد به سراغ فرزند آن یعنی h1 رفتیم و یه سری property برای آن تعریف کردیم.

Nested Properties : برای property های دوقسمتی مثل tex-* یا font-* یا background-* یا margin-* می توانیم به شکل زیر عمل کنیم.

.main {
  border: {
    color: black;
    width: 3px;
    style: solid;
  }
}//.main

Referencing Parent Selectors یا همان دسترسی به والد از طریق کاراکتر & که برای پیاده سازی انواع pseudo class و مواردی این چنین استفاده می شود.

.main {
  &:hover{
    border:{
      color: $borderColor;
    }//border
  }//hover
}//.main

نکته : در زمان پیاده سازی قوانین تو در تو به این نکته توجه داشته باشید که عمومیت یک استایل را از بین نبرید. مثلا اگر قرار است به یک widget استایل بدهیم که هم در ساید بار و هم در مکان های مختلف استفاده شده است از ساید بار شروع نکنید که محدود به ویدجت های ساید بار شود.

برای این کار می توانید از @at-root استفاده کنید یا اینکه این طور استایل هایی که جنبه عمومی دارند را در مکانی دیگر (مثلا در دایرکتوری general) تعریف کنید.

Sass Rules and Directive

در sass ما یک سری دستورالعمل یا directive داریم که برخی از آن ها را بررسی می کنیم :

@import : معادل include در زبان php که در فایل های css هم عمل می کند.

@import "foo.scss";
//or
@import "foo";

دقت داشته باشید که فایل های scss همه در هم فراخوانی شده و در نهایت خروجی css می دهند.

@media : می توانید media query های خود را مکانی که property تعریف می کنید پیاده سازی کنید.

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

@extend : می توان property های یک المان را برای یک المان دیگر تعریف کرد. به وسیله selector می توان به آن دسترسی پیدا کرد :

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

extend directive را می توان چند گانه هم پیاده سازی کرد. یعنی یک المان از چندین المان استفاده کند که نحوه compile آن متفاوت خواهد بود.

@at-root : این برعکس کاراکتر & در nested rules می باشد. یعنی به شکلی که اگر از آن استفاده کنیم به root المان می رود و خاصیت فرزندی آن از بین می رود.

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

خروجی پس از کامپایل به شکل زیر خواهد بود :

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

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

Mixin Directives

رفتاری بسیار نزدیک به توابع در زبان های برنامه نویسی دارد به طوری که پارامتر ورودی هم دریافت می کند یا این که پارامتر نداشته باشند.

پارامتر های ورودی می توانند مقدار پیش فرض بگیرند که در صورتی که در زمان فراخوانی مقدار دهی نشده باشند از مقدار پیش فرض استفاده گردد.

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

در زمان فراخوانی هم می توان به شکل زیر عمل کرد (با استفاده از @include ) که پس از خروجی در فایل css کل موارد mixin در آن وجود خواهد داشت:

.main {
  border: {
    color: black;
    width: 3px;
    style: solid;
  }
  &:hover{
    @include border-radius(35px);
  }
}

می توان یک فایل با نام mixin.scss داشته باشیم که در آن تمامی mixin ها را تعریف کرده و در فایل های مورد نظر فراخوانی کنید.

Partial Imports Boilerplate

مرحله اول ) برای بالا بردن سرعت لود بالای صفحات تمامی فایل های css را به صورت یکجا در یک فایل قرار می دهیم. از طرفی می خواهیم تا فایل ها به صورت مرتب به صورت جداگانه داشته باشیم تا بهتر بفهمیم و دسترسی پیدا کنیم و همچنین به صورت ماژولار از آن ها استفاده کنیم (مثلا یک فایل editor-style.css داشته باشیم و در تمامی پروژه های وردپرسی از آن استفاده کنیم).

برای پیاده سازی روال بالا در محیط Development تمامی فایل های scss را به صورت جداگانه داشته باشیم و در محیط Production فایل کامپایل شده نهایی css را فراخوانی کنیم.

برای این کار دایرکتوری های زیر را به ازای هر قسمت می سازیم :

  • vendor : شامل کتابخانه هایی که استفاده کرده ایم مثلا bootstrap , slick , …
  • base : استایل های font , typography , ….
  • templates : قالب های اصلی مثل single , archive , post-types , search , … که هر کدام می تواند پوشه باشد و قسمت های مختلف آن را به صورت فایل های جدا قرار دهید.
  • components : این قسمت هایی مثل navigation , header , footer , …
  • abstract : فایل های مورد استفاده در sass مثل variables , mixins , functions
  • pages : برگه های اختصاصی مثل home , contact , about , …

دایرکتوری های دیگری نیز مثل shortcodes می توانید را بسته به سلیقه خود می توانید اضافه کنید. همچنین بسته به پروژه شما می توان از هر یک از دایرکتوری های دیگر استفاده نکرد.

در پایان یک فایل master.scss داشته باشید که تمامی آن ها را import کرده باشد و همان را هم کامپایل کنید.

نکته : بسته به نیاز خود می توانید چندین قالب برای مکان های مختلف داشته باشید که تنها فایل های مورد نیاز خود را import کرده باشد. مثلا یک قالب کلی master که شامل استایل هایی است که در تمام جاها باید فراخوانی شود و یک قالب با نام single که شامل استایل هایی است که در صفحه داخلی قرار است فراخوانی شود. یک نمونه ایجاد شده را می توانید مشاهده کنید.

مرحله دوم ) در ابتدا یک فایل با نام variables.scss برای متغیر های مهم مثل رنگ ها بسازید و یک فایل با نام mixin.scss برای mixin های عمومی. و آن را در مسیر abstract قرار دهید.

مرحله سوم ) هر قسمت را با کامنت مشخص کنید که هر زمان خروجی گرفتید به وسیله این کامنت ها بفهمید این استایل مربوط به کدام قسمت از فایل های scss است.

// Header Style
/* SCSS PATH: main/header.scss */

دقت داشته باشید که دیدگاه اول در فایل scss قابل نمایش است و کامنت دوم در خروجی هم نمایش داده می شود. با استفاده از کلید جستوجی SASS PATH می توانید بفهمید که که این قسمت از استایل ها از کجا خروجی گرفته شده است.

نکته : برای خروجی بهتر است از compact استفاده کنید تا دیدگاه ها را هم داشته باشید.

نکته : برای تشخیص بهتر فایل هایی که اصلی نیستند و قرار است که import شوند را با پسوند _ ذخیره کنید.

مطالب مشابه

فریم ورک بوتسترپ

Bootstrap 4

فریم ورک Bootstrap 4 با استفاده از تکنولوژی flexbox پیاده سازی شده که مهم ترین تغییر این فریم ورک می باشد. استفاده...

ویرایشگر براکت brackets - توضیحات

ویرایشگر براکت Brackets

براکت ویرایشگری با امکانات گرافیکی بسیار قدرتمند که توسط برنامه نویسان زیادی با استفاده از زبان جاوااسکریپت نوشته شده...

FlexBox CSS Property

به صورت پیش فرض ساختار المان های Block به صورت تمامی عرض می باشد. با استفاده از float می توان نحوه چینش آن ها را تغییر...

اشتراک گذاری :

مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای آموزش Sass و کاربردها

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

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