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

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

فهرست مطالب

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

SASS Examples + Compiled CSS – Part1

 

بخش اول از سری آموزشی پیش پردازنده SASS دارای سرفصل های زیر بود:

  • معرفی و نصب SASS در سیستم عامل های مختلف (ویندوز-لینوکس-مک)
  • لزوم استفاده از پیش پردازنده SASS در پروژه ها
  • متغیرها (Variables) در SASS
  • تو در تو نویسی (Nesting) در SASS
  • تعریف فایل های Partial در SASS
  • میکسین (Mixin) در SASS
  • توسعه/ارث‌بری (Extend/Inheritance) در SASS
  • عملگرها (Operators) در SASS

 

در این مقاله و مقاله بعد، می خواهیم نمونه هایی از زبان SASS را با هم بررسی کنیم. با ما باشید.

 

آموزش زبان sass با مثال و تبدیل آن به css:

 

 مثال اول – قابلیت Nesting:

کد SASS (کامپایل نشده) زیر را در نظر بگیرید:

 
#main {
  width: 97%;
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}

و خروجی آن (کد CSS) بصورت زیر خواهد بود:

 
  #main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

در این مثال از قابلیت Nesting استفاده شده است.

 مثال دوم – عملگر & برای جایگزینی سلکتور والد:

کد SASS بصورت زیر است:

 
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

و کد CSS آن :

 
  a {
      font-weight: bold;
      text-decoration: none; 
    }
  a:hover {
     text-decoration: underline; 
    }
  body.firefox a {
    font-weight: normal; 
    }

در این مثال عملگر جدید & را مشاهده می کنیم که & جایگزین سلکتور والد خود می شود. یعنی بجای & سلکتور a خواهد نشست.

 

 مثال سوم – عملگر & و قابلیت تو در تو (Nesting):

کد SASS این مثال:

 
#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

کد CSS تولیدی:

 
#main {
    color: black;
}
    #main a {
        font-weight: bold;
    }
        #main a:hover {
            color: red;
        }

در مثال سوم نیز از عملگر & و قابلیت تو در تو (Nesting) در زبان sass استفاده شده است.

 

 مثال چهارم – عملگر “:” برای تعریف namespace در SASS:

کد SASS:

 
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

و CSS خروجی :

 
.funky {
      font-family: fantasy;
      font-size: 30em;
      font-weight: bold; 
    }

مشاهده می کنید که توسط : میتوانیم namespace تعریف کنیم. در مثال فوق، به این دلیل که font-family , font-size , font-weight همگی دارای کلمه font در ابتدایشان هستند، می توانیم با تعریف font: ، تمامی خواص مربوط به فونت را در آن تعریف کنیم. نکته: نحوه کامنت کردن خط و یا خطوطی از استایل های نوشته شده در SASS مانند CSS می باشد. با کمی تفاوت. بدین صورت که برای کامنت کردن یک خط در SASS می توان از // استفاده کنیم (در حالیکه در CSS نمی توانستیم) و برای کامنت کردن چندین خط مانند CSS از /* و */ استفاده می شود.

 

 مثال پنجم – کامنت گذاری در SASS:

کد SASS:

 
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

و کد CSS خروجی:

 
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }
a {
  color: green; }

نکته: همانطور که در کد CSS فوق مشاهده می کنید، کامنتهایی که در SASS با // مشخص شده اند، در CSS حذف خواهند شد.

 

 مثال ششم – استفاده از قابلیت mixin:

کد SASS:

 
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

و کد CSS:

 
  body.firefox .header:before {
    content: "Hi, Firefox users!"; 
  }

در مثال فوق از قابلیت mixin استفاده شده است.

 

 مثال هفتم – عمل چهارگانه ریاضی در SASS:

کد SASS:

 
 p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
}

و کد CSS:

 
  p {
      font: 10px/8px;
      width: 500px;
      height: 250px;
      margin-left: 9px; 
    }

 

 مثال هشتم – استفاده از عملگر {}# برای متغیرها:

کد SASS:

 
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

و کد CSS:

 
  p {
    font: 12px/30px; 
    }

نکته این مثال اینست که می توان برای استفاده از متغیرها در CSS از عملگرهای #{} استفاده کنیم.

 

 مثال نهم – استفاده از عملگرها در رنگ:

کد SASS:

 
p {
  color: #010203 + #040506;
}

و کد CSS:

 
p {
    color: #050709; 
  }

در این مثال از عملگرها در رنگ استفاده شده است. با جمع زدن ۰۱+۰۴ و ۰۲+۰۵ و ۰۳+۰۶ به کد رنگی ۰۵۰۷۰۷ می رسیم. (اعداد رنگ ها بصورت دو به دو با هم جمع می شوند)

 

 مثال دهم – تعریف عملگر ضرب برای رنگ:

کد SASS:

 
p {
  color: #010203 * 2;
}

کد CSS:

 
p {
    color: #020406; 
}

مشاهده می شود که عملگر ضرب نیز مانند جمع عمل می کند و اعداد رنگ را دوتا دوتا ضرب می کند.

 

 مثال یازدهم – تاثیر عملگرها روی بخش آلفای رنگ ها:

کد SASS:

 
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

و کد CSS:

 
 p {
  color: rgba(255, 255, 0, 0.75); 
   }

نکته: اگر رنگ ها بصورت rgba تعریف شوند، عملگرها روی بخش آلفا (alpha- در این مثال ۰٫۷۵) هیچ تاثیری ندارند.

 

 مثال دوازدهم – چسباندن (Concat) دو رشته در SASS:

عملگر + می تواند دو رشته را به هم بچسباند (CONCAT):

کد  SASS:

 
p {
  cursor: e + -resize;
}

کد CSS:

 
p {
  cursor: e-resize; 
  }

 

 مثال سیزدهم – الحاق دو رشته با کوتیشن:

کد SASS:

 
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

کد CSS:

 
 p:before {
    content: "Foo Bar";
    font-family: sans-serif;
         }

نکته: اگر دو رشته را بخواهیم به هم الحاق کنیم، اگر یکی از دو رشته دارای کوتیشن (“”) باشد، یکی از موارد زیر پیش میاید:

۱- اگر رشته دارای کوتیشن در ابتدا قرار داشته باشد (مانند Foo در این مثال)، رشته حاصل، دارای کوتیشن خواهد بود.

۲- اگر رشته دارای کوتیشن رشته دوم به بعد باشد (مانند sans)، رشته خروجی بدون کوتیشن می شود.

 مثال چهاردهم – عملگر جمع در margin:

کد SASS:

 
p {
  margin: 3px + 4px auto;
}

کد CSS:

 
  p {
  margin: 7px auto; }

 

 مثال پانزدهم – کاربرد عملگر {}# در SASS:

کد SASS:

 
p:before {
  content: "I ate #{5 + 10} pies!";
}

کد CSS:

 
p:before {
  content: "I ate 15 pies!"; }

نکته: مشاهده می کنید که عبارات داخل #{} محاسبه شده و در خروجی قرار می گیرد.

 

 مثال شانزدهم – مقدار null در SASS:

کد SASS:

 
$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

کد CSS:

 
p:before {
  content: "I ate  pies!"; }

نکته: مقدار NULL مانند رشته خالی عمل می کند.

 

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

کد sass:

 
p {
  width: 1em + (2em * 3);
}

کد css:

 
 p {
  width: 7em; }

نکته: برای اولویت بندی در ترتیب عملگرها (operators) می توان از پرانتز استفاده کرد.

 

 مثال هجدهم – استفاده از {}# برای نمایش مقدار متغیر:

کد sass:

 
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

کد css:

 
 p.foo {
  border-color: blue; }

نکته: همانطور که مشاهده می کنید، در این مثال مجددا از عبارت #{} یا اصطلاحا (Interpolation) استفاده شده است. در مثال های قبل نیز از این قابلیت در sass استفاده کرده بودیم. در مثال فوق، با تعریف p.#{$name} مقدار متغیر name بعنوان کلاس برای پاراگراف تعریف شده و چون مقدار متغیر name برابر foo است، خروجی بصورت p.foo خواهد شد.

 

 مثال نوزدهم – قابلیت Interpolation در SASS:

کد sass:

 
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

کد css:

 
p {
  font: 12px/30px; }

 

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

کد sass زیر را در نظر بگیرید:

 
.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

نکته: علامت & را در مثال های قبل نیز دیده بودیم. & به نزدیکترین سلکتور والد (parent) اشاره می کند. اگر سلکتور والدی وجود نداشته باشد، مقدار & برابر null خواهد شد. در مثال فوق، & به دو سلکتور .foo.bar .baz.bang و .bip.qux اشاره می کند.

 

 مثال بیست و یکم – استفاده از & در یک mixin:

کد sass زیر را مشاهده کنید:

 
@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

نکته: در این مثال، از & در یک mixin استفاده شده است. همانطور که در مثال قبل عرض کردیم، اگر & سلکتور والد نداشته باشد، مقدارش برابر null می شود. بنابراین می توانیم به منظور چک کردن والد داشتن یا نه در یک mixin بصورت فوق عمل کنیم. در این مثال @if & یعنی اگر & دارای والد است، برای آن یک hover تعریف می کنیم وگرنه رنگ آن قرمز می شود.

 

 مثال بیست و دوم – عملگر default! برای تعیین مقدار پیش‌فرض:

کد sass:

 
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content: $content;
  new-content: $new_content;
}

کد css:

 
#main {
    content: "First content";
    new-content: "First time reference"; 
}

نکته: در این مثال، توسط عبارت !default در مقابل تعریف متغیر، برای آن متغیر یک مقدار پیش فرض تعریف کرده ایم. متغیر $content بدلیل اینکه خودش مقدار دارد (First content) ، دیگر مقدار پیش فرض را قبول نکرده است. اما متغیر $new-content چون مقداری از قبل ندارد، مقدار پیش فرض تعریف شده (First time reference) را می گیرد.

 

 مثال بیست و سوم – مقدار null برای متغیر در sass:

کد sass:

 
$content: null;
$content: "Non-null content" !default;
#main {
  content: $content;
}

کد css:

 
#main {
  content: "Non-null content"; 
}

نکته: اگر مقدار متغیر برابر null تعریف شده باشد، مانند اینست که هیچ مقداری ندارد و مقدار پیش فرض ما را قبول خواهد کرد.

 

 مثال بیست و چهارم – استفاده از عبارت unquote:

کد sass:

 
$family: unquote("Droid+Sans");
@import url("https://fonts.googleapis.com/css?family=#{$family}");

کد css:

 
  @import url("https://fonts.googleapis.com/css?family=Droid+Sans");

نکته: مشخص است که استفاده از عبارت unquote باعث می شود مقدار داخل آن از کوتیشن خارج شود و حاصل عبارت #{$family} برابر با Droid+Sans خواهد شد.

 

پارشیال (Partial) در Sass:

اگر در مواقعی بخواهیم کد sass و یا scss که نوشتیم به یک فایل مجزای css تبدیل نشود اما کامپایل شود و به کدهای css تبدیل شود، باید از قابلیت Partial در sass استفاده کنیم. با اینکار، به ازای آن partial فایل css جداگانه ای ایجاد نمیشود و برای استفاده از این کدهای sass باید آنها را در فایل اصلی sass با دستور @import درون ریزی (ایمپورت) کنیم. همانطور که قبلا بیان کردیم، برای ایجاد یک partial، باید در ابتدای نام فایل یک underscore (_) قرار دهیم. مانند _reset.sass

 مثال بیست و پنجم – import کردن فایل scss:

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

@import “colors”;

نکته ۱: در هنگام ایمپورت کردن، نیازی به نوشتن _ اول فایل و نیز پسوند آن نمی باشد.

نکته ۲: شما نمی توانید در یک فولدر یک partial و یک non-partial با یک نام داشته باشید. بعنوان مثال نمی توان در یک فولدر، دو فایل _colors.scss و colors.scss داشته باشیم.

 مثال بیست و ششم – استفاده از Partial توسط دستور import:

کد sass:

 
.example {
  color: red;
}

و

 
#main {
  @import "example";
}

کد css به این صورت خواهد شد:

 
#main .example {
  color: red;
}

نکته: مشاهده می کنید که می توان توسط دستور @import از پارشیال ها در css استفاده نمود.

 مثال بیست و هفتم – عبارت media در SASS:

کد sass:

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

کد css:

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

نکته: عبارت @media مانند css در sass نیز وجود دارد با همان ویژگی. اما در مثال فوق مشاهده می کنیم که می توان از media در درون استایلهای css استفاده کرد.

 

 مثال بیست و هشتم – استفاده از دایرکتیو media بصورت تو در تو (nested):

کد sass:

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

کد css:

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

نکته: در کد sass می بینید که از دایرکتیو media بصورت تو در تو (nested) استفاده کرده ایم. بنابراین یکی دیگر از قابلیت های sass ، امکان تعریف media های تو در تو می باشد.

 

 مثال بیست و نهم – استفاده از متغیرها،عملگرها و توابع در مدیا کوئری:

کد sass:

 
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

کد css:

 
  @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

نکته: در این مثال مشاهده می شود که می توان در مدیا کوئری (media query) از متغیرها و عملگرها و توابع استفاده کرد.

در مقاله بعد، ۱۹ مثال کاربردی دیگر در زمینه SASS را به همراه کد CSS کامپایل شده آنها خواهیم دید.

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

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

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

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

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

1 × چهار =

مقالات اخیر

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

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

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

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

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

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

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