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

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

من همیشه میگم sass همون css پیشرفته است (حالا نمیدونم این جایی خوندم یا آقای اکبری گفتن یا از خودم :D)

ولی خب همون طور که تو مطلب آقای اکبری نوشته شده Sass امکانات جالبی داره : "Sass به ما امکان استفاده از متغیر‌ها، دستورات تودرتو (nested rules)، وارد کردن فایل‌های دیگر (inline imports) و استفاده از قوانین تکراری (mixins) و بسیاری دستورات دیگر را در تولید فایل‌های CSS می‌دهد. "

اولین موضوع امکان تعریف متغییرها است

css به ما این قدرت رو نمیداد ولی در sass این امکان وجود داره این کار برای ما خیلی از دوباره کاری ها رو کم میکنه

گاهی پیش میاد که ما رنگی در خیلی از قسمت های سایت استفاده کردیم و بعد از اینکه مشتری میاد و میبینه با این که قبلا این رو دیده میگه نه مثلا این رنگ زرد خوب نیست رنگ رو یکمی پر رنگ کنید یا مثلا به کل تغییرش بدین خب اگر به روش css باشه ما باید بگردیم و همه اون رنگها رو پیدا کنیم و دونه دونه تغییر بدیم . حالا به روش sass من میام یه رنگ رو به این شکل تعریف می کنم :

$warning-color: yellow;

خب من هر جا رنگ زرد دارم کافیه از این متغییر استفاده کنم و برای اینکه تغییرش بدم کافیه مفدار اختصاصی به این متغیر رو تغییر بدم به همین راحتی رنگ در تمام نقاط مورد نظر تغییر میکنه.

این روش در مورد خیلی از موارد موجود قابل استفاده است مثلا :

$font-color: darken($default-color, 60%);
$container-width: 960px;

$container-padding: 80px;

$container-inner-width: $container-width - (2 * $container-padding);

$gutter-in-container: 10px;

$text-width: 60%;
$font-size: 16px;

$line-height: $font-size * 1.6;

$h1-size: $font-size * 2;
 

 میبینید که به این شکل هر چیزی رو میتونیم تعریف کنیم و کاری راحت داشته باشیم.

دوم دستورات تودرتو (nested rules) : برای استایل یک منو در css چطور عمل میکنیم؟

  #block-main-menu ul {
    margin: 0;
    padding: 0;
    display: inline-block;
  }

#block-main-menu ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    background-image: url("../images/menu/seprator.png");
    background-repeat: no-repeat;
    background-position: left 50%;
    height: 70px;
    line-height: 70px;
  }

  #block-main-menu ul li.last {
    background-image: none;
  }
  #block-main-menu ul li a {
    padding: 0 17px;
    display: block;
    text-decoration: none;
    color: #ffffff;
  }
  #block-main-menu ul li a:visited {
    background-color: #38a0c0;
  }

خب این یه نمونه کوچک بود و فقط یه تکه کد بود حالا اگر بخوایم همین و البته کاملش رو با sass داشته باشیم :

$menu-back: #34495e;

$visited: #38a0c0;

#block-main-menu {
        background-color: $menu-back;
        width: 612px;
        width: 66.2%;
        height: 70px;
        line-height: 70px;
        float: right;
        ul.menu {
            margin: 0;
            padding: 0;
            display: inline-block;
            li {
                margin: 0;
                padding: 0;
                list-style: none;
                float: right;
                background-image: url('../images/menu/seprator.png');
                background-repeat: no-repeat;
                background-position: left 50%;
                height: 70px;
                line-height: 70px;
                &.last {
                    background-image: none;
                }

                a {
                    padding: 0 17px;
                    display: block;
                    text-decoration: none;
                    color: #ffffff;
                    &:visited {
                        background-color: $visited;
                    }
                }
            }
        }
    }

 به راحتی در 37 خط یک منو رو استایل میدهید. و نتیجه را به راحتی میبینید. راز بهتر بودن کار در انتخاب خوب Selectorها ست.

سوم وارد کردن فایل‌های دیگر (inline imports) :

خود من برای راحتتر کردن کدهام و مرتب بودنش هر قسمت رو  در یک فایل sass جداگانه کدهاش رو میزارم مثلا یک فایل base برای پایه کار قرار میدم. یک فایل برای node و ...

خب sass همه این فایل ها رو توسط Compass کامپایل میکند و در یک فایل قرار میدهد . خب از کجا باید متوجه این موضوع بشه که فایل ها جدا از هم هستن؟ از @import اگر شما هم به این روش کار می کنید باید همه را در base وارد کنید به این شکل :

@import "_node.scss";
@import "_comments.scss";

چهارم استفاده از قوانین تکراری (mixins) :

[email protected] center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container {
[email protected] center();
  /* Other styles here... */
}
 

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

پنجم بسیاری دستورات دیگر را در تولید فایل‌های CSS می‌دهد :

برای مثال برای استفاده از border-radius خب در css به این شکل هستش:

border-radius: 25px;

توی sass ابتدا باید یک دستور رو import کنیم و بعدش از اون استفاده کنیم :

@import "compass/css3/border-radius";

#preface {
    .region-preface-first {
        background-color: #b10069;
        @include border-radius(25px);
    }
}

در مورد این دستور خب شاید بگید آخه چکاری من مث قبل این رو میزنم فرقی نداره که ! 

درسته فرقی نداره ولی به نظرتون قشنگتر نیست ما که داریم sass کار میکنیم از اون بهتر و کاملتر استفاده کنیم؟

برچسب ها: 

دیدگاه‌ها

تصویر شیرین عبدالهی

شیرین عبدالهی

مرسی ، خیلی خوب بود.

در ادامه مطلبت فقط بگم که

  @include border-radius(25px);

وقتی تبدیل به css میشه به صورت زیر در میآد :

border-radius: 25px; 

-webkit-border-radius:25px;

-moz-border-radius:25px;

-ms-border-radius:25px;

-o-border-radius:25px;

 

که برای بروزر های مختلف هستند. و خب کار رو برای ما خیلی راحت تر میکنه.چون ما یه خط مینویسیم و مطمئنیم توی همه بروزر های قدیمی که ساپورت میکنن border radius رو کار میکنه و لازم نیست همه شون رو جدا جدا بنویسیم.

 

تصویر الهه عربیان

الهه عربیان

سلام

شیرین جان ممنون از توضیحت به نکته ی خوبی اشاره کردی. واقعا این یکی از مهمترین ویژگی های sass هستش

افزودن نظر جدید