مثال‌های SASS و کامپایل آن به CSS – بخش دوم

مثال‌های SASS و کامپایل آن به CSS - بخش دوم

فهرست مطالب

مثال‌های SASS و کامپایل آن به CSS – بخش دوم

SASS Examples + Compiled CSS – Part2

 

با سلام. در مقاله قبل، ۲۹ مثال از زبان sass را با هم بررسی کردیم. در این مقاله، مثال های بیشتری از زبان SASS را با هم مرور خواهیم کرد.

 

قابلیت extend در sass:

ممکن است گاهی اوقات بخواهیم استایلهای یک کلاس css را عینا برای یک کلاس دیگر نیز تعریف کنیم. با استفاده از کلمه کلیدی @extend می توان اینکار را انجام داد.

 مثال سی‌ام – قابلیت EXTEND در SASS:

به مثال زیر در مورد extend توجه کنید:

کد sass:

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

کد css:

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

نکته: در مثال فوق، دو کلاس error , seriousError داریم که کلاس error یک کلاس کلی می باشد و میخواهیم در کلاس seriousError علاوه بر استایلهای خود آن، استایلهای error را نیز داشته باشیم. به بیان دیگر، هر المانی که کلاس seriousError را داشته باشد، مسلما استایلهای کلاس error را نیز خواهد داشت.

 

 مثال سی و یکم – Extend شدن استایلهای کلاس:

کد SASS:

 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

کد CSS:

 
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }
.seriousError {
  border-width: 3px; }

نکته: در مثال فوق، کلاس .seriousError علاوه بر استایلهای کلاس .error دارای خاصیت border-width:3px نیز می باشد.

 

 مثال سی و دوم – قابلیت Multiple Extend در SASS:

کد sass:

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

کد css:

 
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }
.seriousError {
  border-width: 3px; }

نکته: یک سلکتور در زبان sass می تواند بیش از یک سلکتور را اکستند (Extend) کند. در مثال بالا، سلکتور .seriousError دو کلاس .attention و .error را اکستند می کند. به این قابلیت در زبان sass ، Multiple Extend می گویند.

 

 مثال سی و سوم – توسعه زنجیره‌ای (Chaining Extend):

کد sass:

 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

کد css:

 
.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }
.seriousError, .criticalError {
  border-width: 3px; }
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

نکته: امکان دیگری که زبان sass برای طراحان وب فراهم می کند، اکستند زنجیره ای (Chaining Extend) می باشد. در مثال بالا می بینیم که سلکتور .criticalError کلاس .seriousError را اکستند کرده است که خود آن از کلاس .error اکستند شده است.

 

 مثال سی و چهارم – استفاده از کلاس css بصورت extend:

کد sass:

 
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

کد css:

 
#context a.notice {
      color: blue;
      font-weight: bold;
      font-size: 2em; 
}

نکته: در مواقعی که بخواهیم سلکتوری بنویسیم که تنها بتوان از آن بصورت extend استفاده کرد و نتوان بصورت مستقیم از آن استفاده نمود باید مانند مثال فوق، از علامت % بصورت بهره برد.

 

 مثال سی و پنجم – استفاده از علامت optional! در مقابل عبارت [email protected]:

در حالت عادی، اگر کلاسی که extend شده است وجود نداشته باشد با ارور مواجه خواهیم شد. اما اگر از علامت !optional در مقابل عبارت @extend استفاده کنیم، با ارور روبرو نمی شویم. به مثال زیر دقت کنید:

کد sass:

 
a.important {
  @extend .notice !optional;
}

 

 مثال سی و ششم – تعریف [email protected] در یک بلاک:

در زبان sass اگر از @extend در یک بلاک مانند دایرکتیو مدیا (@media) استفاده کنیم، باید کلاسی که مقابل عبارت @extend نوشته شده است نیز در همان بلاک وجود داشته باشد وگرنه با ارور مواجه می شویم. برای روشن شدن مطلب، به مثال زیر توجه کنید:

کد sass که بدرستی کار می کند:

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

و اما کد sass ای که ارور خواهد داد:

 
.error {
  border: 1px #f00;
  background-color: #fdd;
}
@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

 

 مثال سی و هفتم – عملگر [email protected] در sass:

کد sass:

 
.parent {
  ...
  @at-root .child { ... }
}

کد css:

 
.parent { ... }
.child { ... }

نکته: توسط عبارت @at-root این امکان را فراهم کردیم که بجای اینکه سلکتور child بصورت سلسله مراتبی و زیرمجموعه parent تعریف شود، هم ردیف parent تعریف شود. مثال دیگری در این زمینه را مشاهده کنید:

 

 مثال سی و هشتم – سلکتورهای سلسله مراتبی:

کد sass:

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

کد css:

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

نکته: در مثال فوق سلکتورهای child1 و child2 همردیف parent در خروجی ظاهر می شود اما step-child در زیرمجموعه parent نمایان خواهد شد.

 

 مثال سی و نهم – خارج کردن سلکتور از بلاک مدیا توسط عملگر without:

کد sass:

 
@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

کد css:

 
@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

نکته: در مثال بالا مشاهده می کنیم که به منظور خارج کردن یک سلکتور از دایرکتیو مدیا (@media) باید از عبارت @at-root (without: media) استفاده کنیم. بنابراین در کد فوق، دو کلاس page در خروجی تعریف خواهد شد که یکی در مدیا و دیگری در خارج از بلاک مدیا کوئری نمایان می شود.

 

قابلیت شرط (if) و حلقه های شرطی در زبان sass:

 

 مثال چهلم – عملگر if در sass:

کد sass:

 
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

کد css:

 
  p {
  border: 1px solid; }

نکته: در این مثال از قابلیت شرط گذاری در sass استفاده کرده ایم. بدلیل اینکه فقط شرط اول صحیح است، استایل اول را به p اختصاص پیدا می کند.

 

 مثال چهل و یکم – حلقه for در زبان sass:

کد sass:

 
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

کد css:

 
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

نکته: در این مثال از حلقه for در زبان sass استفاده نمودیم. در هر بار اجرای این حلقه، متغیر $i دارای مقادیر ۱ و ۲ و ۳ می باشد و بجای عبارت #{$i} مقدار i قرار می گیرد. در حلقه for مقدار اولیه بازه را با کلمه from و مقدار پایانی را بعد از through تعریف می کنیم.

 

 مثال چهل و دوم – حلقه each در sass:

کد sass:

 
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

کد css:

 
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

نکته: در این مثال از عبارت @each استفاده کرده ایم. برای اینکه آیکون های حیوانات را بصورت داینامیک ایجاد کنیم، نام حیوانات را در حلقه each آورده ایم (مانند puma) و نام تصاویر آنها را نیز با همین نام تعریف کرده ایم (مانند puma.png) در هر بار اجرای حلقه مذکور، بجای عبارت #{$animal} نام حیوانات قرار می گیرد.

در ادامه مقاله، در مورد حلقه های شرطی مانند for و while در زبان sass نمونه هایی خواهیم دید و در نهایت، در مورد مبحث مهم mixin پنج مثال را بررسی خواهیم کرد.

 

 مثال چهل و سوم – حلقه while:

 
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

کد css:

 
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

نکته: در مثال ۴۳ از عبارت while در زبان sass برای تولید استایلهای دلخواه استفاده کرده ایم. در ابتدا مقدار اولیه متغیر $i را تعریف کردیم و سپس حلقه while را شروع کرده ایم که در هر بار اجرای حلقه از مقدار i دو واحد کم می شود و کلاس های item-6 , item-4 , item-2 را ایجاد کرده ایم که width های مختلفی دارند.

 

 مثال چهل و چهارم – کاربرد میکسین ها (mixins) در sass:

کد sass:

 
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

کد css:

 
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

نکته: همانطور که در مبحث میکسین ها (mixins) قبلا توضیح دادیم، کاربرد اصلی آنها، امکان استفاده در جاهای مختلف است. در مثال فوق نیز در میکسین large-text ، فونت و رنگ متن را مشخص کردیم. و در سلکتور page-title خواص padding , margin-top را تعریف کرده ایم.

 

 مثال چهل و پنجم – ارسال آرگومان به میکسین در زبان sass:

کد sass:

 
@mixin my-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include my-border(blue, 1in); }

کد css:

 
  p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

نکته: در مثال فوق از قابلیت های @mixin و @include و نیز ارسال آرگومان به میکسین در زبان sass استفاده کرده ایم. با فراخوانی میکسین my-border بصورت my-border(blue, 1in) بجای پارامتر color مقدار blue و بجای width مقدار ۱in می نشیند.

 

 مثال چهل و ششم – عدم ارسال آرگومان به mixin:

کد sass:

 
@mixin new-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include new-border(blue); }
h1 { @include new-border(blue, 2in); }

کد css:

 
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

نکته: اگر در هنگام صدا زدن mixin ، مقداری را بعنوان آرگومان به آن ارسال نکنیم، بصورت مثال فوق، می توان یک مقدار پیش فرض را برای آن تعریف کنیم (مقدار ۱in برای width سلکتور p)

 

 مثال چهل و هفتم – ارسال تعداد نامعلومی آرگومان به mixin:

 
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

کد css:

 
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

نکته: در هنگام استفاده از mixin ها ، این منطقی بنظر می رسد که گاهی بخواهیم تعداد نامعلومی آرگومان به mixin ارسال کنیم (مانند استایل box-shadow) زبان sass امکان انجام اینکار را برای برنامه نویسان و طراحان فراهم کرده است. توسط نوشتن … در مقابل نام آرگومان در هنگام تعریف mixin (در مثال فوق box-shadow($shadows…))

 

 مثال چهل و هشتم – آرگومان های نامحدود در میکسین:

کد sass:

 
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

کد css:

 
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}
.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

نکته: در مثال فوق از تعداد آرگومان های نامحدود در هنگام استفاده از minxin ها استفاده کرده ایم.

 

با تشکر از همراهی شما عزیزان با سری آموزشی زبان SASS و کد CSS آن. امیدوارم از این آموزش استفاده لازم را برده باشید و در صورت داشتن پیشنهاد و سوال از طریق نشانی ایمیل [email protected] یا فرم دیدگاه پایین مقاله، با بنده در تماس باشید.

به این مقاله امتیاز دهید!

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

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

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

هفده + پنج =

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"