مقایسه ی فریم ورک های LESS و SASS

مقایسه ی sass و less

بحث در مورد پیش پردازنده ی CSS

مقایسه ی SASS و LESS بارها و بارها انجام شده است. در این مقاله به بحث در مورد اینکه چرا SASS بهترین گزینه است، چرا باید هرچه زودتر کار با SASS را آغاز کنید، چطور با SASS کار کنید و مشکلات موجود با پیش پردازنده ها که جانشینی برای SASS و CSS4 می باشد، می پردازیم.

قبل از شروع، بهتر است بگوییم که LESS برای مبتدیان بی نظیر است، یادگیری آن آسان بوده و راه اندازی و تنظیمات آن سریعا انجام می شود. LESS شباهت بسیار زیادی به CSS ساده دارد بنابراین نوشتن آن شهودی است. در مقایسه با CSS، همه چیز در یادگیری LESS بسیار آسان و کاربر پسند می باشد و فرد تا مدتی از کار با آن لذت می برد.

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

برتری SASS نسبت به LESS

  • ·        SASS به شما امکان نوشتن متدهای قابل استفاده ی مجدد و استفاده از دستورات منطقی را میدهد؛ به عبارت دیگر همان conditional ها و loop ها. LESS هم می تواند این کار را انجام دهد اما به روشی غیر کارآمد و غیر شهودی (یعنی mixin های محافظت شده برای conditional ها، زیر-تابع خود-مرجع برای loop ها). SASS نیز مانند LESS دارای توابع مفید توکار فراوانی می باشد که شامل تغییر رنگ، ریاضیات و لیست های پارامتر است.
  • ·        کاربران SASS می توانند از قدرت فوق العاده ی کتابخانه ی Compass استفاده کنند. البته کتابخانه هایی هم در اختیار کاربران LESS قرار دارد اما در مقایسه با Compass که به صورت منظم توسط یک جامعه ی بزرگ نگهداری و توزیع می شود، بسیار ضعیف تر هستند. Compass دارای ویژگی های فوق العاده ای مانند ایجاد داینامیک نقشه ی sprite، هک کردن مرورگر های قدیمی و پشتیبانی از ویژگی های CSS3 در تمامی مرورگر ها می باشد.
  • ·        Compass همچنین به شما امکان افزودن یک فریم ورک خارجی مانند Blueprint، Foundation یا Bootstrap را نیز می دهد. به عبارت دیگر شما می توانید به راحتی از تمام قدرت فریم ورک مورد علاقه ی خود استفاده کرده و نیاز به استفاده از ابزارهای مختلف نداشته باشید.

مشکلات LESS

هدف LESS  این است که در استایل، سینتکس و ساختار تا حد ممکن شبیه CSS باشد. اگرچه این امر باعث سهولت نوشتن آن توسط کاربران می شود اما مواردی وجود دارد که باعث می شود کار کردن با آن از جذابیت کمتری نسبت به SASS برخوردار باشد:

دستورات منطقی

در LESS شما می توانید با استفاده از یک mixin حفاظت شده، یک دستور منطقی اولیه بنویسید:

    .lightswitch(@colour) when (lightness(@colour) > 40%) {

    color: @colour;

    background-color: #000;

    .box-shadow(0 3px 4px #ddd);

    }

    .lightswitch(@colour) when (lightness(@colour) < 41%) {

    color: @colour;

    background-color: #fff;

    .box-shadow(0 1px 1px rgba(0,0,0,0.3));

    }
    

همان دستور در SASS، با استفاده از دستورات if:

@mixin lightswitch($colour) {
          color: $colour;
          @if(lightness($colour) > 40%) {
            background-color: #000;
            @include box-shadow(0 3px 4px #ddd);
          }
          @if(lightness($colour) <= 40%) {
            background-color: #fff;
            @include box-shadow(0 1px 1px rgba(#000,0.3));
          }
        }

Loop

در LESS شما می توانید با استفاده از توابع بازگشتی، در مقادیر عددی یک loop ایجاد کنید:

.looper (@i) when (@i > 0) {
              .image-class-@{i} {
               background: url("../img/@{i}.png") no-repeat;
              }
              .looper(@i - 1);
            }
            .looper(0);
            .looper(3);
            //--------------- Outputs: --------------------
            //.image-class-3 {
            //  background: url("../img/3.png") no-repeat;
            //}
            //.image-class-2 {
            //  background: url("../img/2.png") no-repeat;
            //}
            //.image-class-1 {
            //  background: url("../img/1.png") no-repeat;
            //}

 

در SASS شما می توانید در هر داده ای را تکرار ایجاد کنید که این کار بسیار مفید تر است:

@each $beer in stout, pilsner, lager {
              .#{$beer}-background {
                background: url("../img/beers/#{$beer}.png") no-repeat;
              }
            }
            // ------------------- Outputs: ---------------------
            //.stout-background {
            //  background: url("../img/beers/stout.png") no-repeat;>
            //}
            //.pilsner-background {
            //  background: url("../img/beers/pilsner.png") no-repeat;
            //}
            //.lager-background {
           //  background: url("../img/beers/lager.png") no-repeat;
            //}

 

توابع سفارشی

در SASS شما می توانید به صورت زیر، توابع مورد نیاز خود را بنویسید:

//Courtesy of Foundation...
            $em-base: 16px !default;
            @function emCalc($pxWidth) {
            @return $pxWidth / $em-base * 1em;
            }

 

در LESS:

            @em-base: 16px;
            .emCalc(@pxWidth) {
              //Ah. Crap...
            }

 

شما ترجیح می دهید که از کدام یک استفاده کنید؟

مشکلات موجود در شروع به کار با SASS و Compass

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

  • زحمت اضافی برای راه اندازی و تنظیم محیط Ruby
  • ترس فلج کننده از خط فرمان
  • عدم راحتی و زمان صرف شده در سوئیچ کردن به ابزارهای متفاوت

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

میلاد خان محمدی

Author: میلاد خان محمدی

پژوهشگر, نویسنده و علاقه مند به تکنولوژی های مختلف وب علی الخصوص front end هستم، مدیر دپارتمان هایبرید اپلیکیشن در موسسه ی iShia

پاسخ دهید

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