menu

Sass و compass – استایل هایتان را متفاوت بنویسید

Sass و compass – استایل هایتان را متفاوت بنویسید

دوشنبه 23 تیر 1393

یکی از پیش پردازنده های جالب و معروف برای css، پیش پردازنده ی Sass هست که با استفاده از اون شما میتوانید css نوشتن را به شکلی متفاوت تجربه کنید! از نظر برخی ها، css نویسی بی قاعده.

توی این مطلب میخواهم شما را با این ابزار توسعه ی مدرن وب و یک ابزار دیگه به اسم Compass که بر اساس Sass نوشته شده است آشنا کنم.

ابتدای امر، نیاز است که ما پیش پردازنده ی Sass را برروی سیستم خود نصب کنیم. نحوه ی این کار را شما میتوانید از این لینک بخونید. اما به طور خلاصه شما برای استفاده از Sass دوراه دارید. استفاده از ابزار هایی نظیر CodeKit و Koala و یا استفاده از خط فرمان.

انتخاب آن با خود شماست. من شخصا روی سیستم عامل های لینوکسی استفاده از خط فرمان را ترجیح میدم، چون این کار از نظر من راحت تر است...

اگر روی ویندوز هستید، میتوانید از طریق این لینک آخرین نسخه ی ruby installer را دانلود کرده و پس از نصب آن، در command prompt خود(cmd) کد زیر را وارد کنید.

gem install sass

پس از اجرای کامل کد بالا، برای اطمینان حاصل کردن از نصب کامل Sass میتوانید کد زیر را بزنید و ورژن Sass خود را بررسی کنید

sass --version

حال برروی سیستم ما، sass نصب گردیده است، پس وقت آن است که دست به کار شویم!

ابتدا نیاز است که یک فایل بسازیم! لازم به ذکر است که sass با دو پسوند مختلف کار میکند.

الف) با پسوند scss.

ب) با پسوند sass.

تفاوت های این دو پسوند بسیار جزئی است. تفاوت توی قرار دادن {} و یا ; و...

البته پسوند scss جدیدتر است و از نظر من، ساختار نزدیک تری به css دارد و من همیشه از همین پسوند استفاده میکنم.

حال دایرکتوری مورد نظر خود، یک فایل با نام style.scss میسازیم و میرویم که کار را شروع کنیم.

پس از ساخت این فایل اولین کدهای خود را داخل آن قرار میدهیم.

body{
    background-color:#eee;
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

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

برای این کار، ابتدا داخل Command line خود، به محل ذخیره ی فایل Sass خود تغییر دایرکتوری میدهیم.

سپس با استفاده از کد زیر، فایل را پردازش میکنیم.

sass style.scss:style.css

در کد بالا، ابتدا ما پیش پردازنده ی Sass را فراخوانده ایم، سپس به او، فایل style.scss را که فایل Sass ما است را معرفی کرده و در نهایت از او خواسته ایم که پس از پردازش، نتیجه ی پردازش را داخل فایل style.css ذخیره کند. همانطور که مشاهده میکنید پس از اجرای کد بالا، در داخل دایرکتوری که فایل Sass ذخیره است، یک فایل style.css نیز ایجاد شده است که محتوای آن، همان محتوای پردازش شده ی فایل style.scss است.

حال میخواهیم فایل Sass خود را دوباره تغییر دهیم. پس از تغییر باید دوباره آن را کامپایل کرد، اما برای جلوگیری از کامپایل های مجدد در طول تغییرات، میتوانیم از کد زیر در داخل Command line خود استفاده کنیم.

sass --watch style.scss:style.css

در کد فوق، آپشن watch به ما این اجازه را میدهد که تغییرات real time باشد و در هر ثانیه، پس از انجام تغییرات در فایل Sass، فایل css ما به طور خودکار به روزرسانی گردد.

حال به سراغ معرفی برخی از گزینه های Sass و امکاناتی که این پیش پردازنده را از دیگر پیش پردازنده ها متمایز میکند میپردازیم.

الف) انتخاب گرهای تو در تو:

فرض کنید که کد css مطابق کد زیر داشته باشیم.

body{
    background-color:#eee;
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}

در این کد ساده ی بالا، ما دو انتخابگر(selector) مشابه داریم. اولین آن انتخابگر لینک(a) و دومین آن انتخابگر لینک هنگام حرکت موس بر روی آن(a:hover) است.

ما میتوانیم این دو انتخابگر را با یکدیگر در فایل Sass خود به شکل زیر ترکیب کنیم.

body{
    background-color:#eee;
}
a{
    text-decoration:none;
    &:hover{
        text-decoration: underline;
    }
}

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

علاوه بر آن، ما میتوانیم به طریق های مختلف دیگر نیز در Sass از انتخابگر های تودر تو بهره ببریم.

فایل css زیر را در نظر داشته باشید:

a.info{
    color:red;
}
a.warning{
    color:blue;
}

همانطور که مشاهده میکنید در این نمونه کد نیز یک انتخابگر یکسان وجود دارد، و آن هم انتخابگر لینک(a) است. پس بیایید آن هارا به یکدیگر متصل کنیم! برای این کار در فایل Sass خود کافیست کد زیر را بزنیم:

a{
    &.info{
        color:blue;
    }
    &.warning{
        color:red;
    }
}

به همین سادگی!

میتوانید فایل را کامپایل کرده و نتیجه را مشاهده کنید.

حال بیایید یک css تودر تو را داخل Sass نیز تودر تو کنیم!

فرض کنیم css زیر را داریم.

section{
    height:300px;
}
section h2{
    color:red;
}

برای تو در تو کردن آن در داخل Sass کافیست کد را به صورت زیر بنویسیم:

section{
    height:300px;
    h2{
        color:red;
    }
}

میتوانید فایل را کامپایل کرده و نتیجه را مشاهده کنید.

ب)نظر گذاری(comment)

یکی از مهم ترین قسمت های یک فایل css، نظرهای آن است. نظرها(comment) باعث میشود که در آینده، با بررسی مجدد کدهای فعلی تان دچار سردرگمی نشوید.

در فایل Sass دو نوع comment وجود دارد.

استفاده از

// Comment

و یا استفاده از

/* your comment */

اما تفاوت آنها در چیست؟

تفاوت آنها خیلی ساده است. اگر از commet نوع اول استفاده کنید، comment شما داخل فایل Sass نمایش داده خواهد شد اما در هنگام کامپایل، در فایل css نمایش داده نخواهد شد اما Comment نوع دوم هم در فایل Sass و هم در فایل css قابل مشاهده خواهد بود. از آنجایی هم که فایل Sass یک فایل پیش پردازنده هست و در اختیار همگان نخواهد بود پس برای نوشتن Comment های خصوصی، استفاده از Comment نوع اول گزینه ی بسیار مناسبی خواهد بود.

پ)استفاده از متغیر ها

تعجب نکنید! Sass هم مانند PHP دارای متغیر است(و اتفاقا متغیرهایش هم شبیه به PHP هستند!)

فرض کنید که یک کد css مانند کد زیر داریم.

h1{
    color:#eee;
}
h2{
    color:#bbb;
}
p{
    color:#eee;
}

در کد بالا، رنگ متن های h1 و p یکسان است. در این حالت میتوانیم که رنگ آن هارا به جای تکرار، در یک متغیر قرار دهیم و از آن متغیر به جای کد رنگ در Sass استفاده کنیم.

که برای این کار میتوان از کد زیر استفاده کرد:

$gray: #eee;

h1{
    color: $gray;
}
h2{
    color: #bbb;
}
p{
    color: $gray;
}

مزیت کد بالا و استفاده از متغیر ها این است که متغیر، تغییر میکند!

یعنی در آینده اگر خواستید که رنگ h1 و p را به طور همزمان تغییر دهید. به جای دست بردن توی چندین جای فایل خود، کافیست که یک متغیر یا تغییر بدهید و اگر که فایل css شما بسیار بزرگ و طولانی باشد، این نکته میتواند به شما بسیار کمک بزرگی بکند.

همچنین شما میتوانید علامت ها و قوانین ریاضی را هم با کدهای خود ترکیب کنید!

برای مثال کد Sass زیر:

$width:40%;
$height:80%;
section{
    width: $width;
    height: $height * 2;
}
article{
    width: $width + 20%;
    height: $height - 40%;
}

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

section{
    width:40%;
    height:160%;
}
article{
    width:60%;
    height:40%;
}

برای آشنایی بیشتر با عملگرهای رنگ و ریاضی ودگیر عملگر ها در Sass میتوانید به این لینک مراجعه کنید.

ت)توابع

وقتی که در Sass متغیر وجود دارند پس نباید تعجب کرد که تابع هم وجود داشته باشد!

فرض کنید که کد css زیر را داشته باشیم.

ul{
    padding:0;
    margin:0;
}
section{
    padding:0;
    margin:0;
}

مشاهده میکنید که کدهای مربوط به section و ul هردو یکسان است. پس بد نیست که از یک تابع اینجا استفاده کنیم. برای تعریف یک تابع از @mixin و برای فراخوانی آن از @include به شکل زیر استفاده میکنیم:

@mixin zero{
    padding:0;
    margin:0;
}
ul{
    @include zero();
}
section{
    @include zero();
}

پس از کامپایل فایل Sass بالا مشاهده میکنید که نتیجه با کد css یکسان است. اما یکی از مزیت های اصلی تابع، آرگومان ها(ورودی ها) است. پس حیف است که از آن ها اینجا استفاده نکنیم!

کد Sass زیر، یک تابع با دو آرگومان و فراخوانی آن را نشان میدهد:

@mixin zero($top, $right, $bottom, $left){
    padding:$top $right $bottom $left;
    margin:$top $right $bottom $left;
}
ul{
    @include zero(3px, 3px, 2px, 1px);
}
section{
    @include zero(2px, 10px, 12px, 1px);
}

که پس از کامپایل، کد css زیر را تحویل شما خواهد داد:

ul {
    padding: 3px 3px 2px 1px;
    margin: 3px 3px 2px 1px; }

section {
    padding: 2px 10px 12px 1px;
    margin: 2px 10px 12px 1px; }

همچنین میتوانیم برای تابع فوق، به صورت زیر یک مقدار پیش فرض(default) در نظر بگیریم تا درصورتی که هنگام فراخوانی تابع، آرگومانی وارد نشد از پیش فرض ها استفاده شود.مانند کد Sass زیر:

@mixin zero($top:0, $right:0, $bottom:0, $left:0){
    padding:$top $right $bottom $left;
    margin:$top $right $bottom $left;
}
ul{
    @include zero();
}
section{
    @include zero(2px, 10px, 12px, 1px);
}

ث) استفاده ی مجدد از کدها

کد css زیر را در نظر بگیرید:

.conatiner{
    overflow:hidden;
    width:100%;
    clear:left;
}
.main{
    overflow:hidden;
    width:100%;
    clear:left;
    background-color:red;
}

همانطور که میبیند، element دارای کلاس main با element دارای کلاس container دارای کدهای css یکسان است و علاوه بر کدهای container ، دارای چند خط کد اختصاصی نیز می باشد. در این حالت بهتر است از تکرار کدها در main بپرهیزیم و از کدهای قبلی دوباره استفاده کنیم.

برای اینکار در Sass میتوان به صورت زیر کدهای خود را بنویسیم:

.container{
    overflow:hidden;
    width:100%;
    clear:left;
}
.main{
    @extend .container;
    background-color:red;
}

که نتیجه ی آن پس از کامپایل کردن به صورت زیر خواهد بود:

.container, .main {
    overflow: hidden;
    width: 100%;
    clear: left; }

.main {
    background-color: red; }

ج) استفاده از فایل های Sass دیگر

فرض کنید که شما در محل ذخیره ی style.scss خود یک فایل Sass دیگر به نام typography.scss نیز دارید. حال میخواهید که هنگام کامپایل style.scss ، کدهای typography.scss نیز کامپایل شده و همراه با فایل های style.scss در فایل style.css ذخیره گردد. برای این کار کافیست که در فایل style.scss خود، فایل typography.scss را نیز صدا بزنید و سپس فایل style.scss را کامپایل کنید. برای این کار به صورت زیر عمل میتوان کرد:

@import 'typography.scss';
.container{
    background-color:red;
}

چ)استایل های Sass

به صورت پیش فرض، Sass پس از کامپایل، css شمارا به صورت زیر تحویل خواهد داد:

ul {
    padding: 3px 3px 2px 1px;
    margin: 3px 3px 2px 1px; }

section {
    padding: 2px 10px 12px 1px;
    margin: 2px 10px 12px 1px; }

اما این نیز قابل تغییر است. شما میتوانید ظاهر فایل خروجی خود را در یکی از حالات nested و یا expanded و یا compact و یا compressed قرار دهید.

برای این کار، در Command line خود میتوان به یکی از صورت های زیر فایل Sass را کامپایل کرد:

sass style.scss:style.css --style nested
sass style.scss:style.css --style expanded
sass style.scss:style.css --style compact
sass style.scss:style.css --style compressed

در ادامه، نمونه ی هرکدام از حالات زیر را به شما نشان خواهم داد:

nested:همان حالت پیش فرض است و به صورت زیر خروجی خواهد داد

ul {
    padding: 3px 3px 2px 1px;
    margin: 3px 3px 2px 1px; }

section {
    padding: 2px 10px 12px 1px;
    margin: 2px 10px 12px 1px; }

expanded: در این حالت، خروجی به صورت زیر خواهد بود

ul {
    padding: 3px 3px 2px 1px;
    margin: 3px 3px 2px 1px;
}

section {
    padding: 2px 10px 12px 1px;
    margin: 2px 10px 12px 1px;
}

compact:در این حالت، تمامی کدهای هر انتخابگر به صورت زیر، در یک خط خواهند بود

ul { padding: 3px 3px 2px 1px; margin: 3px 3px 2px 1px; }

section { padding: 2px 10px 12px 1px; margin: 2px 10px 12px 1px; }

compressed:در این حالت، کد بسیار فشرده خواهد بود و برای سایت هایی که از حالت توسعه در آمده است بسیار خوب است زیرا فایل css دارای حجم بسیار کمتری خواهد بود. در نهایت خروجی به صورت زیر خواهد بود:

ul{padding:3px 3px 2px 1px;margin:3px 3px 2px 1px}section{padding:2px 10px 12px 1px;margin:2px 10px 12px 1px}

در نهایت، مثل هر مطلبی، به پایان این مطلب رسیدیم.

امیدوارم از طولانی بودن این مطلب خسته نشده باشید.

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

منتشر شده در:

  • آواتار شکوفه

    شکوفه

    شنبه 16 خرداد 1394

    ارسال پاسخ

    سلام اولن تبریک برای سایت عالی و جالبتون نمونه کارهاتونم عالی بودن یه سوال درباره sass داشتم که اگر راهنمایی کنید ممنون میشم اینکه چرا در زیر از #{}استفاده شده برای دادن fontface است با sass url('../fonts/#{$fileName}.eot'); لینکه مربوطه هم این است https://www.newstringsdesign.com/tutorials/cross-browser-font-face-mixin/ ممنون میشم راهنمایی کنید
  • آواتار شکوفه

    مهدی علی خاصی

    چهارشنبه 20 خرداد 1394

    سلام. در لینکی که معرفی نموده اید، ابتدا با استفاده از mixin یک تابع تعریف شده است که چند تا آرگومان (ورودی) داره. برای استفاده از ورودی ها داخل تابع، همونطور که توی این پست اشاره کردم میشه از علامت $ استفاده کرد. مثلا $fileName. اما نکته ای که قابل توجه هست اینه که ما میخوایم از این متغیر در داخل علامت کوتیشن مارک استفاده کنیم. (بین دو علامت '' ) اگر به صورت معمولی از علامت $ استفاده کنیم، همان متن $fileName عینا چاپ میشود. ولی برای استفاده از مقدار داخلی متغیر بین دو علامت کوتیشن مارک، باید از ساختار #{} استفاده کرد و نام متغیر را بین آکولاد ({}) استفاده کرد...
  • آواتار Guestpeark

    Guestpeark

    یکشنبه 28 آبان 1396

    ارسال پاسخ

    guest test post <a href="http://gdhyuei23kol.com/">bbcode</a> <a href="http://gdhyuei23kol.com/">html</a> http://gdhyuei23kol.com/ simple
ارسال نظر
خوانا نیست؟تعویض کد