آموزش Sass – نصب، تعریف متغیر، عملگر، پارشیال و میکسین

آموزش Sass – نصب، تعریف متغیر، عملگر، پارشیال و میکسین

SASS Tutorial – Variables, Operators, Partials, Mixin

 

با سلام خدمت دوستان همراه وب سایت محتوا. در این سری آموزشی، می خواهیم قواعد زبان SASS را به همراه مثال های کاربردی یاد بگیریم. این مقاله، ترجمه ای است از وب سایت مرجع Sass به آدرس http://sass-lang.com .

آموزش sass به زبان فارسی

 

معرفی Sass:

کلمه Sass مخفف عبارت Syntactically Awesome Stylesheets می باشد. sass قابلیت های زیاد و جالبی به css اضافه می کند که باعث کارآمدی بیشتر css بخصوص در پروژه های بزرگ با استایل های زیاد و پیچیده می شود. برای شروع استفاده از SASS می توان به دو روش کلی زیر اقدام کرد:

 

نصب Sass:

 

۱- اپلیکیشن (Application):

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

  • CodeKit: پولی – نسخه MAC

  • Compass: پولی – متن باز (Open Source) – نسخه ویندوز، مک و لینوکس

  • GhostLab: پولی – نسخه ویندوز، مک

  • Hammer: پولی – نسخه مک

  • Koala: متن باز (Open Source) – نسخه ویندوز، مک و لینوکس

  • LiveReload: پولی – متن باز – نسخه ویندوز و مک

  • Prepros: پولی – نسخه مک و ویندوز و لینوکس

  • Scout: متن باز – نسخه ویندوز و مک

 

۲- خط فرمان (Command Line):

 

۱-۲: نصب sass در لینوکس (Linux):

در ابتدا باید رابی (Ruby) را نصب کنید (می توان از طریق package manager و یا rvm و یا rbenv آنرا نصب کنید) سپس فرمان زیر را اجرا کنید:

sudo su -c "gem install sass"

 

۲-۲: نصب sass در سیستم عامل ویندوز (Windows):

قبل از استفاده از SASS، باید رابی (Ruby) را از طریق نصب کننده رابی (Ruby Installer) روی ویندوز سیستم خود نصب کنید. که دارای نصب آسانی می باشد و با یک کلیک روی سیستم شما نصب خواهد شد. این فایل نصبی، خط فرمان رابی (Ruby Commandline) را نیز روی سیستم شما نصب می کند تا بتوانید از کتابخانه های رابی (Ruby) استفاده کنید.

 

۳-۲: نصب sass در مک (MAC):

اگر شما استفاده از خط فرمان (Command Line) را به نرم افزار ترجیح داده اید، راه سریع تری برای نوشتن و کامپایل SASS در پیش خواهید داشت!

۱-۳-۲: خط فرمان و یا ترمینال سیستم خود را باز کنید:

در سیستم عامل مک (mac) ترمینال (Terminal.app) بصورت پیش فرض نصب می باشد (در فولدر utilities موجود می باشد) و در سیستم عامل ویندوز می توانید cmd را اجرا کنید.

۲-۳-۲: SASS را نصب کنید:

رابی (Ruby) از gem برای مدیریت package های کد مانند SASS استفاده می کند. وقتی ترمینال (Terminal) را باز کردید، فرمان زیر را در آن تایپ و اجرا کنید:

gem install sass

با اجرای این فرمان، SASS به همراه تمام موارد وابسته به آن (Dependencies) نصب خواهد شد. اما اگر با ارور (Error) مواجه شدید، می توانید Sudo را نیز نصب کنید:

sudo gem install sass

۳-۳-۲: دوباره چک کنید:

از آنجایی که کار از محکم‌کاری عیب نمی کنه! بهتر است برای حصول اطمینان از نصب SASS، فرمان زیر را اجرا کنید:

sass -v

 خروجی باید به شکل زیر باشد: Sass 3.4.22 (Selective Steve)

تبریک می گوییم!  شما توانستید SASS را از طریق ترمینال، روی سیستم عامل mac نصب کنید. اکنون می توانید با خواندن ادامه این مقاله، یادگیری SASS را شروع کنید.

تا اینجای مقاله، به معرفی sass و نحوه نصب آن به دو صورت اپلیکیشن (Application) و خط فرمان (Command line) در سیستم عامل های مرسوم پرداختیم. در بخش بعد، می خواهیم آموزش sass را شروع کنیم و با نحوه تعریف متغیر و تو در تو نویسی (nested coding) در sass آشنا شویم.

 

پیش پردازش (Preprocessing):

CSS (Cascading Stylesheets) به خودی خود شیرین و جالب است اما پروژه های تحت وب در حال گسترش می باشند و مسلما استایل های زیاد و پیچیده ای خواهند داشت. نوشتن و نگهداری و توسعه این کدهای درهم می تواند مشکل باشد. اینجا جایی است که Preprocessor ها مانند SASS می توانند به کمک برنامه نویسان بیاید. از طریق قابلیت هایی مانند تعریف متغیر (Variable) ، Mixins ، وراثت (Inheritance) که در CSS وجود ندارند.

هنگامی که کدهای SASS را نوشتید، باید آنرا به کدهای معمولی CSS کامپایل کنید تا مرورگرها بتوانند آنرا تفسیر کنند. برای انجام اینکار، در سیستم عامل مک (mac) براحتی می توانید با اجرای فرمان sass input.scss output.css در ترمینال، فایل ورودی را با فرمت scss به فایل خروجی با فرمت css تبدیل کنید.

 

متغیرها (Variables) در SASS:

در صورتی که می خواهید از یک خاصیت مانند رنگ، فونت و … در جاهای مختلف استایل خود استفاده کنید، می توانید آنرا بصورت متغیر تعریف کنید و براحتی از آن در پروژه خود چندین بار استفاده کنید. یکی از مزایای تعریف متغیر در SASS، اینست که هر وقت که بخواهید بعنوان مثال رنگ سازمانی وب سایت خود را تغییر دهید، دیگر نیاز نیست ۱۰۰ جای استایل، آنرا تغییر دهید. فقط لازم است مقدار متغیر تعریف شده برای آن را اصلاح کنیم. با علامت دلار ($) می توان متغیری در SASS تعریف کنیم:


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

با انجام اینکار (تعریف رنگ اصلی سایت در یک متغیر) هنگامی که فایل SCSS کامپایل می شود (توسط خط فرمان، ترمینال و یا نرم افزارهایی مانند KoalaT Scout و …)، هر جا که متغیر $primary-color وجود دارد، مقدار تعریف شده برای آن یعنی #۳۳۳ قرار می گیرد.

 

تو در تو نویسی (Nesting) در SASS:

هنگامیکه با کدهای HTML سر و کار دارید، حتما متوجه شده اید که کدها بصورت واضح و مشخص، بصورت تودرتو و سلسله مراتبی می باشد. در حالی که CSS بدین گونه نیست. SASS این اجازه را به شما می دهد که همانند HTML استایل های سلسله مراتبی و درختی تعریف کنید.

به مثال زیر دقت کنید:


            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 تعریف شده اند. با اینکار، خوانایی استایل های ما بیشتر می شود. پس از کامپایل sass فوق خواهیم داشت:


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

 

تعریف فایل های Partial در SASS:

قابلیت دیگری که SASS در اختیارتان قرار می دهد، تعریف فایل هایی بنام Partial است که در واقع شامل استایلهای مجزایی می باشند که می توان آنها را در فایل اصلی SASS درون‌ریزی (Import) کنیم. فایل های partial با underscore (_)  شروع می شوند مانند _MyPartial.scss که با @import می توان آنها را در فایل اصلی SASS ایمپورت کنیم. استفاده از Partial، به ماژول بندی استایل های پروژه کمک می کند (Modularize).

 

Import در SASS:

وقتی در یک فایل css از @import استفاده می کنیم، یک http-request (درخواست به سمت سرور) ارسال می شود. اما import در SASS بطرز دیگری اطلاعات را می آورد و آن اینست که SASS فایل import شده را به فایل اصلی میچسباند و با هم ادغام می کند و درخواست جدیدی به سرور ارسال نمی شود. همانگونه که در قابلیت قبلی sass اشاره کردیم، برای بخش‌بندی فایل ها در sass می توان از _partial.scssاستفاده کنیم و برای استفاده از این فایل در فایل اصلی sass، باید از دستور @import استفاده کنیم.

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

دو فایل scss داریم بنام های _reset.scss و base.scss . همانطور که از اسامی این فایل ها مشخص است، فایل reset بصورت partial تعریف شده است که باید در فایل base ادغام شود. فایل reset بصورت زیر است:


        // _reset.scss 
        html,
        body,
        ul,
        ol {
            margin: 0;
            padding: 0;
        }        

و فایل base.scss نیز دارای استایلهای زیر است:


        // base.scss @import 'reset'; 
        body {
            font: 100% Helvetica, sans-serif;
            background-color: #efefef;
        }      

مشاهده می کنید که توسط دستور @import ‘reset’ در فایل اصلی یعنی base ، می خواهیم کدهای reset را در ابتدای base قرار دهیم که خروجی نهایی بصورت زیر می شود:


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

در بخش قبل، در مورد مبحث مهم پارشیال (partial) در زبان sass صحبت کردیم. در این بخش، دو موضوع مهم میکسین (mixin) و ارث‌بری (inheritance) را مورد بررسی قرار خواهیم داد.

 

میکسین (Mixin) در SASS:

موضوعی که بخصوص در css3 خسته کننده می باشد، استایلهایی مانند border-radius می باشد که دارای چندین پیشوند و پسوند می باشند و برای هر مرورگر باید یک استایل نوشته شود:


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

اما توسط SASS می توان برای border-radius یک Mixin تعریف کنیم که از این پس، بصورت زیر آنرا فراخوانی کنیم و یا حتی به آن پارامتر ارسال کنیم:


        @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 استفاده می کنیم و سپس یک نام دلخواه به آن نسبت می دهیم که در مثال فوق، نام آنرا border-radius گذاشته ایم.

برای استفاده از mixin ایجاد شده، از عبارت @include استفاده می کنیم که در مثال فوق برای کلاس .box یک mixin بنام border-radius فراخوانی کرده ایم که مقدار ۱۰px را برای آن ارسال می کنیم.

پس از کامپایل کدهای فوق، خروجی زیر را خواهیم داشت:


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

 

توسعه/ارث‌بری (Extend/Inheritance) در SASS:

یکی از قابلیت های جالب SASS اینست که می توان چند استایل را که بین تعدادی سلکتور مشترک می باشد را بصورت یک کلاس تعریف کنیم و آن را در سلکتورهای موردنظر فراخوانی کنیم. با یک مثال، قضیه را شفاف سازی می کنیم!

در این مثال، می خواهیم برای باکس های نمایش پیام (success,error,warning) استایل هایی بنویسیم. مشخص است که در اینگونه باکس ها، اندازه و سایز فونت و سایر استایلها می توانند مشترک باشند . تنها رنگ حاشیه هر باکس متناسب با نوع پیام، تفاوت خواهد داشت. در این مثال، خواص مشترک را در کلاس .message تعریف می کنیم :


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

و پس از کامپایل sass و تبدیل آن به 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) در SASS:

وجود عملگرها (چهار عمل اصلی ضرب (*) تقسیم (/) تفریق (-) و جمع (+)) در CSS می تواند بسیار کارآمد و مفید باشد. در مثال زیر، برای سلکتورهای aside و article از این قابلیت استفاده کرده ایم:

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

همانطور که می بینید، یکی از کاربردهای عملگرها (operators) تبدیل پیکسل به درصد برای قطاع بندی صفحات وب می باشد. استایل کامپایل شده به شکل زیر خواهد بود:

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

در مقالات بعد، مثال هایی از زبان sass را بررسی خواهیم کرد…

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


برچسب‌ها:

آموزش Sassدرباره sassزبان sassفایل پارشیال در sassمتغیر در sassمقدمه sassمیکسین در sassنرم افزار sassنصب sassنصب sass در ویندوز

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

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

پنج × 5 =