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

با سلام و عرض ادب

در مقاله آموزشی پیش پردازنده 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; 
}

در این مثال از عملگرها در رنگ استفاده شده است. با جمع زدن 01+04 و 02+05 و 03+06 به کد رنگی 050707 می رسیم. (اعداد رنگ ها بصورت دو به دو با هم جمع می شوند)

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

کد 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- در این مثال 0.75) هیچ تاثیری ندارند.

 مثال دوازدهم – چسباندن (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; 
}

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

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

2- اگر رشته دارای کوتیشن رشته دوم به بعد باشد (مانند 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("http://fonts.googleapis.com/css?family=#{$family}");

کد css:

@import url("http://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”;

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

نکته 2: شما نمی توانید در یک فولدر یک 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) از متغیرها و عملگرها و توابع استفاده کرد.

قابلیت 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! در مقابل عبارت extend@:

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

کد sass:

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

 مثال سی و ششم – تعریف extend@ در یک بلاک:

در زبان 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; 
    } 
}

 مثال سی و هفتم – عملگر at-root@ در 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 دارای مقادیر 1 و 2 و 3 می باشد و بجای عبارت #{$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:

کد sass:

$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; 
}

نکته: در مثال 43 از عبارت 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 مقدار 1in می نشیند.

 مثال چهل و ششم – عدم ارسال آرگومان به 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 ، مقداری را بعنوان آرگومان به آن ارسال نکنیم، بصورت مثال فوق، می توان یک مقدار پیش فرض را برای آن تعریف کنیم (مقدار 1in برای 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 آن. امیدوارم از این آموزش استفاده لازم را برده باشید و در صورت داشتن پیشنهاد و سوال از طریق نشانی ایمیل EhsanSafari@hotmail.com یا فرم دیدگاه پایین مقاله، با بنده در تماس باشید.