آموزش Sass

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

  • Preprocessing

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

    مثل تعریف متغییر(variable) ، تو در تو (nesting) نوشتن استایل ها و ایجاد توابع و ارث بری و سایر امکاناتی که در آن وجود دارد.

    زمانی که شما فایل Sass خود را ایجاد می کنید و کد نویسی های خود را انجام می دهید دست آخر به عنوان خروجی، Sass به شما یک فایل css می‌دهد که می توانید آن را در وبسایت خود استفاده کنید.


  • Variables

    تعریف variable ها یک راه حل برای ذخیره یک سری از اطلاعاتی است که شما می خواهید از آنها در جاهای مختلف css خود استفاده کنید.
    به طور مثال مواردی مانند رنگ ها، فونت ها و یا هر مقداری که در css شما بتوانید با آن فکر کنید.
    در Sass برای تعریف variable از علامت
    $استفاده می‌شود. به مثال زیر توجه کنید:

    SCSS Syntax

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

    زمانی که Sass پردازش می‌شود. تمامی variable هایی که در پروژه خود تعریف کردید مانند $font-stack و $primary-color color در خروجی تبدیل به کد های css معمولی خواهند شد. و مقادیر این متغییر ها به جای اسم آنها می‌نشیند.این مورد برای استایل هایی که در جاهای مختلف تکرار می شوند خیلی کارآمد است.

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

  • Nesting

    زمانی که شما یک HTML را می نویسید اگر دقت کرده باشید کد ها تو در تو در دل یکدیگر ایجاد می کنید. اما این کار را در مورد css نمی توانید انجام دهید.

    Sass امکان تو در تو نوشتن selector ها را به شما می دهد. وقتی شما نمی توانید به صورت تو در تو در css استایل های خود را ایجاد کنید باعث می شود که در برخی از موارد سر در گم شده و یا مجبور بشوید که برخی از استایل های خود را به خاطر بسپارید.

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

    SCSS Syntax

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    

    چیزی که باید توجه کنید این است که ul, li, و a همه سلکتور هایی هستند که درونnav قرار می گیرند. روش بالا یکی از راه هایی است که شما می توانید به واسطه آن استایل های خود را سازماندهی کنید.
    در اینجا چیزی که به عنوان خروجی 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

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

    این یک روش برای ماژولار نوشتن استایل ها می باشد. مزیت این روش این است که کد های خود را تقسیم بندی می کنید و برای ویراش آنها خیلی راحت فقط فایل مربوطه را اصلاح می کنید و به همه کد ها دست نمی زنید. این کار خیلی ساده با ایجاد فایل هایی مانند _partial.scssامکان پذیر می باشد.
    به این صورت که شما فایل هایی که قرار است بعدا در هم اقدام شوند را با قرار دادن یک " _ " پشت اسم آن ایجاد میکنید.
    و برای تولید کد ها به صورت یکپارچه، توسط @importآدرس فایل های scss ایجاد شده را در یک فایل نهایی اضافه می کنید. تا در آخر یک خروجی css جامع از ماژول های ایجاد شده داشته باشید.


  • Import

    در css شما این امکان را دارید که با import کردن فایل های کوچکتر css خود یک فایل بزرگتر را ایجاد نمایید.
    اشکال این روش در css این است که فایل هایی که اینگونه در صفحه صدا زده می شوند هر بار توسط http یک request ارسال میکند که این باعث کند شدن صفحه در هنگام نمایش آن می شود.
    اما در Sass شما فایل های scss خود را در یکدیگر اضافه می کنید و دست آخر تنها یک فایل css به عنوان خروجی نهایی دارید که این امر باعث می شود که تنها یک request برای لود فایل ها در صفحه ارسال شود.

    برای مثال ما دو فایل Sass با نام _reset.scss و base.scss داریم. و ما می خواهیم که _reset.scss را به base.scssاضافه کنیم.

    SCSS Syntax

    // _reset.scss
    
    html,
    body,
    ul,
    ol {
       margin: 0;
      padding: 0;
    }
    
    /* base.scss */
    
    @import 'reset';
    
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }
    

    توجه کنید که در کد بالا، ما از @import 'reset'; در base.scss استفاده کردیم و نیازی نیست که پسوند.scss فایل را بنویسیم. درSass به صورت هوشمند این مورد تشخیص داده می شود.
    زمانی که فایل css شما تولید می شود خواهید داشت:

    html, body, ul, ol {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }
    

  • Mixins

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

    شما با استفاده از Mixin یک تابع برای تولید کد css ایجاد می کنید و از آن می توانید در جاهای مختلف استفاده کنید.
    یک مثال از
    border-radius:

    SCSS Syntax

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
    
    .box { @include border-radius(10px); }
    

    در mixin ایجاد شده بالا شما از @mixin mixin پشت نام border-radiusاستفاده شده است.همچنین یک variable با نام $radius
    داخل آن استفاده شده است که به وسیله آن مقادیر مورد نظر شما (مثلا 10px) به mixin ارسال می شوند.

    بعد از اینکه mixin خود را ساختید آن را توسط @includeدر پشت نام mixin در مکانی که می خواهید از آن استفاده کنید. صدا می زنید.
    زمانی که فایل استایل شما تولید می شود، چیزی شبیه این را خواهید دید:

    .box {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
    }
    

  • Extend/Inheritance

    یکی از موارد که در Sass خیلی مفید است،ارث بری کد ها از یکدیگر است. به صورت که شما یک مجموعه خصوصیات css را در سایر سلکتور های صفحه استفاده می کنید. این کار توسط@extend انجام می شود.این به شما کمک می کند که خیلی ساده یک سری از استایل ها را با یک بار نوشتن در کلاس های دیگر به راحتی استفاده کنید.
    برای مثال ما یک سری استایل در کلاس massage نوشته ایم و می خواهیم که کلاس های errors, warning و successes از آن ارث بری داشته باشند:

    SCSS Syntax

    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }
    
    .warning {
      @extend .message;
      border-color: yellow;
    }
    

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

    .message, .success, .error, .warning {
      border: 1px solid #cccccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      border-color: green;
    }
    
    .error {
      border-color: red;
    }
    
    .warning {
      border-color: yellow;
    }
    

  • Operators

    انجام محاسبات ریاضی در css خیلی می تواند به شما کمک کند. Sass تعداد خیلی کمی از علامت های ریاضی شبیه به +, -, *, /, و %. را پشتیبانی می کند.
    در مثال زیر ما یک نمونه ساده از کاربرد علائم محاسباتی ریاضی برای انجام محاسبه عرض
    aside و articleبه شما نشان داده ایم.

    SCSS Syntax

    .container { width: 100%; }
    
    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }
    
    aside[role="complimentary"] {
      float: right;
      width: 300px / 960px * 100%;
    }
    

    در این نمونه ساده ما عرض صفحه را 960px در نظر گرفته ایم و می خواهیم بدون انجام محاسبه دستی آن ها را از px به % تبدیل کنیم. این روش برای grid بندی صفحه بسیار به خصوص در طرح های responsive خیلی مفید خواهد بود.
    چیزی که در خروجی css خواهید دید

    .container {
      width: 100%;
    }
    
    article[role="main"] {
      float: left;
      width: 62.5%;
    }
    
    aside[role="complimentary"] {
      float: right;
      width: 31.25%;
    }