Kaptain Kitty
دسته ها :Html و Css , html5
انتشار :۲۶ مرداد ۱۳۹۳
بازدید :1096 بار

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

آموزش html آموزش less آموزش sass آموزش بوت استر بوت استرپ توییتر بوت استرپ طراحی با css طراحی با html فریم ورک compass فریم ورک less فریم ورک sass فریم ورک بوت استرپ
مطالب مرتبط

Appear.in یک انتخاب متفاوت است که یک مکالمه تصویری با افراد گروه شما را به صورت رایگان ایجاد می کند که سقف تعداد نفرات هر چت روم ۸ نفر است و به کاربران اجازه می دهد که یک کنفرانس ویدئویی را بدون داشتن هیچ حساب کاربری ایجاد کنند.

پلتفرم firebase یک سرویس سمت سرور است که تمامی نیازهای یک اپلیکیشن را برطرف می کند. از جمله اعتبار سنجی، ذخیره داده ها و مدیریت کاربران

زامارین ( Xamarin ) یک شرکت نرم افزاری در شهر سان فرانسیسکوی ایالت کالیفرنیا است که متعلق به شرکت Microsoft می باشد. این شرکت در سال ۲۰۱۱ توسط مهندسانی تاسیس شد که خالق Mono، Mono for Android و MonoTouch هستند که کاربردهای میان پلتفرمی از زیرساخت زبان مشترک (CLI) و مشخصات زبان مشترک هستند (که اغلب Microsoft.NET نامیده می شود).

سؤال بالا، سوالی است که اکثر افراد هنگام شروع به یادگیری مباحث برنامه نویسی وب، با آن مواجه می شوند. اما به راستی، اگر بخواهیم برنامه نویسی وب را آغاز کنیم، باید از چه زبانی شروع کنیم؟ چه نکاتی باید رعایت شوند؟

نظراتتان را برایمان بنویسید

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

مطالب ما تو این شبکه های اجتماعی هم پخش میشه