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

متغیرها

یکی از ابتدایی ترین امکانات پیش‌پردازنده‌های CSS تعریف و استفاده از متغیرهاست. البته این امکان در CSS هم وجود دارد. شما می‌توانید متغیرهای زیادی را تعریف کنید و در هر قسمت از کد از آنها استفاده کنید. برای تعریف متغیر با استفاده از علامت $ به شکل زیر عمل می‌کنیم.

$primaryColor: #7a2828;
$secondryColor: #c73f3f;

کد فوق بعد از کامپایل به CSS دارای هیچ خروجی‌ای نمی‌باشد. چرا که شما فقط متغیرها را تعریف کردید ولی از آن‌ها استفاده نکردید. برای استفاده از متغیرها به شکل زیر عمل می‌کنیم.

$light-white: #E6E7E8;

body {
    background-color: $light-white;
{

متغیرها در Sass محدوده ‌(Scope) خود را دارند. یک متغیر می‌تواند به صورت محلی یا سراسری تعریف شود.

$primaryColor: white;

body {
    $primaryColor: red;
    background-color: $primaryColor;
{

div {
    background-color: $primaryColor;
}

در مثال بالا رنگ پس‌زمینه‌ی body برابر قرمز و div برابر سفید می‌شود.

عملیات ریاضی

یکی دیگر از امکانات Sass استفاده از عملگرهای ریاضی است. شما می‌توانید عملیات جمع، تفریق، ضرب، تقسیم، باقیمانده تقسیم، تساوی و یا نامساوی بودن را بر روی مقادیر مورد نظر انجام دهید.

این نکته را در نظر داشته باشید که برای استفاده از “/” باید عبارت را داخل پرانتز قرار دهید.

$fontDefault: (14px/16px);

نکته دیگری که باید در نظر داشته باشید این است که نمی‌توانید عملیات ریاضی را بر روی مقادیر با مقیاس‌های متفاوت انجام دهید. برای مثال کد زیر به شما خطا نمایش می‌دهد.

.container{
    width: 100% - 20px;
}

توابع

شاید برای شما پیش آمده باشد که به یک پرده تیره‌تر یا روشن‌تر از یک کد رنگی نیاز داشته باشید. با استفاده از توابع تعریف شده در Sass می‌توانیم قدرت بیشتری در کدنویسی داشته باشیم. برای مثال می‌توانید از تابع ()darken استفاده کنید تا چند درصد تیره تر از کد رنگی را بدست آورید. این تابع دو ورودی دریافت می‌کند که ورودی اول رنگ و ورودی دوم میزان درصد تیره‌تر بودن است.

p{
    color: lighten(#000, 15%);
    background: darken($color2, 10%);
}

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

استایل‌دهی تودرتو

یکی از مفیدترین و بهترین امکانات پیش‌پردازنده‌های CSS (از نظر من) استایل‌دهی تودرتو است. قطعا در CSS قطعه کدی شبیه به کد زیر نوشته‌ایم. یک عنصر(h2) درون عنصر دیگری(container.) قرار دارد.

.container{
    width: 100%;
}

.container h2{
    color: #3a3a3a;
}

در CSS نمی‌توانیم h2 را درون عنصر والد تعریف کنیم. اما در Sass می‌توانیم به شکل زیر استایل‌دهی کنیم.

.container{
    width: 100%;
    h2{
        color: #3a3a3a;
    }
}

همچنین اگر درون والد بخواهیم به عنصر والد دسترسی داشته باشیم، می‌توانیم از علامت & استفاده کنیم.

.container{
    width: 100%;
    h2{
        color: #3a3a3a;
    }
    &:hover{
        background-color: #e9e9e9;
    }
}

این ویژگی کمک می‌کند تا کد شما خوانایی بهتری داشته باشد. سعی کنید نهایتا تا 4 یا 5 مرحله داخل بروید تا هم کد سبک‌تری داشته باشید و هم خوانایی بالاتر.

قطعا کدی شبیه به کد زیر جز سردرد برای شما نخواهد داشت!(7 مرحله به داخل رفتیم)

.container{
    width: 100%;
    h2{
        color: #3a3a3a;
    }
    .products{
        padding: 5px 10px;
        .wrapper{
            background-color: #f0f8ff;
            .list{
                margin-top: 5px;
                .product{
                    padding: 5px;
                    .title{
                        font-size: 1.2rem;
                    }
                    .description{
                        color: #3a3a3a;
                        .button{
                            padding: 3px 5px;
                            a{
                                background-color: #6666eb;
                            }   
                        }
                    }
                }
            }
        }
    }
}

Import

یکی دیگر از امکانات Sass اضافه کردن کدهای مختلف به درون پروژه است. یعنی شما هر تکه از پروژه را به شکل یک کامپوننت تعریف می‌کنید و استایل آن را داخل یک فایل می‌نویسید. در نهایت تمام این فایل‌ها را در یک جا وارد(import) می‌کنید. به این شکل خیلی راحت می‌توانید به کامپوننت مورد نظر رجوع کرده و استایل آن را تغییر دهید. کدهای شما به شدت مرتب‌تر می‌شوند و خوانایی آن‌ها بالا می‌رود.

@import "grids.scss";

یا حتی می‌توانید پسوند فایل را هم ننویسید.

@import "grids ";

پیشنهاد می‌کنم مقاله‌ی آشنایی با طراحی اتمی رو حتما مطالعه کنید.

Extend

در Sass با استفاده از دستور extend@ می‌توانید ویژگی‌های یک عنصر را از یک عنصر دیگر به ارث ببرید.

.alert {
    border-radius: 3px;
    background-color: #ddd;
    color: #3a3a3a;
    padding: 10px 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.alert-error {
    @extend .alert;
    color: #e9e9e9;
    background-color: #bb2818;
}

.alert-success {
    @extend .alert;
    color: #e9e9e9;
    background-color: #18bb2e;
}

در کد بالا تمام اعلانات شما(چه از نوع خطا و چه موفقیت‌آمیز) ویژگی‌های یکسانی را دارند که در alert. نوشته شده است. حال alert-error. و alert-success. ویژگی‌های متفاوتی را (رنگ پس‌زمینه) به همراه دارند که برای هر کدام به صورت جداگانه نوشته می‌شود و بقیه ویژگی‌های یکسان از alert. به ارث برده می‌شود.

Mixin

با استفاده از mixin ها همانند دستور extend@ می‌توانیم مجموعه‌ای از استایل‌ها را به یک عنصر اضافه کنیم با این تفاوت که mixin همانند یک تابع، مقادیر ورودی می‌گیرد و در نتیجه استایل ما وابسته به این مقادیر ورودی است.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
}

در کد فوق یک mixin با نام border-radius تعریف کردیم. برای استفاده از این mixin کافیست به شکل زیر عمل کنیم.

div{
    @include border-radius(10px);
}

نکته دیگر در مورد mixinها این است که آن‌ها می‌توانند مقدار پیش‌فرض برای ورودی داشته باشند تا اگر به آن‌ها مقداری به عنوان ورودی ارسال نشد، از مقدار پیش‌فرض خود استفاده کنند.

@mixin transition($time : 0.4s){
    -webkit-transition: all $time;
    transition: all $time;
}

از mixin فوق می‌توانید به دو شکل زیر استفاده کنید. اگر مقداری را به عنوان زمان برای آن ارسال نکنید، به طور پیش‌فرض مقدار 0.4 ثانیه را برای transition اعمال می‌کند.

div{
    @include transition();
}
.alert{
    @include transition(1s);
}

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