sass و less و مجموعه افکت برای css

خانه » بلاگ » sass و less و مجموعه افکت برای css

sass css چیست؟

پیش پردازنده های sass و less همچنین چندین افکت برای css در قسمت زیر توضیح داده‌شده‌است. برای درک هر کدام از موارد گفته‌شده ، پیشنهاد می شود تا پایان این مقاله همراه ما باشید.

Lessچیست؟

 

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

در قسمت زیر یک مثال برای تعریف متغییر که css قادر به ساخت آن نبود ،  نوشته شده است برای تعریف متغیرها از @ استفاده می شود و برای مقداردهی علامت : به کار برده می شود.

 


@width: 17px;
@height: @width + 8px;
#header {
width: @width;
height: @height;
}
خروجی این قسمت به صورت زیر است.
#header {
width: 17px;
height: 25px;
}


چگونه باید از less استفاده کنیم؟

ابتدا باید less را نصب کنید برای این کار فایل آن را از سایت lesscss.org دانلود کنید و مراحل نصب آن را طی کنید سپس به دو روش می توان از آن استفاده نمود.

در محیط node.js دستور زیر وارد نمایید.


npm install -g less
> lessc styles.less styles.css


روش دیگری برای انجام این کار وجود دارد می توانید در قسمت head کد زیر را وارد نمایید.


<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

چرا از نود جی اس استفاده می شود؟

زیرا less با زبان جاوا اسکریپت نوشته شده است و نود جی اس محیطی برای اجرا کدهای جاوا می باشد.

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

 

معرفی SASS و LESS و بررسی تفاوت بین آن‌ها

Sass چیست؟

 

Sass هم مانند less یک پیش پردازنده است در sass می توان از فایل های بزرگ به سادگی نگهداری کرد و کدهای قدرتمند و با ظرافت بسیاری را خلق کنید. همچنین برای تعریف متغییرها و نوشتارتو در تو استایل ها از آن استفاده کرد.

سینتکس های sass دو نوع هستند ولی هردو یک خروجی دارند.

1. SASS
2. SCSS

نوع اول با فرمت.sass و نوع دوم با فرمت .scss است هر دوی آنها با css سازگار هستند ولی نوع اول سریع تر نوشته می شود.

در sass برای تعریف یک متغیر باید ابتدا از$ استفاده کرد و برای مقداردهی از : استفاده کنید.


$red: # d52816; (یک متغیر تعریف شد)


در قسمت زیر یک نمونه sass نوشته شده است.


body {
background-color: $background;
}
h1 {
color: $red;
}
p {
color: $blue;
}


بهترین پیش پردازنده موجود sass می باشد که قابلیت های وسیعی دارد. مرورگرها قادر به درک فایل های sass نیستند و نیاز به کامپایل کردن دارند که به css تبدیل شوند. برای انجام این کار می توان از ابزارهای موجود مانند  sass meister استفاده کرد. روش دیگر برای انجام این کار استفاده از محیط cmd است که برای اجرای sass باید کد زیر در cmd نوشته شود.

 


node-sass input.scss output.css


1. image hover
2. Qhover
3. ihover

در قسمت بالا سه نوع hover  نوشته شده است که همه ی آن ها مربوط به افکت های hover برای css است.

Image hover

یک کتابخانه برای اعمال افکت بر روی تصاویر است که 40 افکت برای آن موجود است و شما با دانلود کردن این افکت ها می توانید در scc  از آن ها استفاده کنید.

این افکت از  scss و less پشتیبانی می کنند.

برای دریافت افکت های موجود imagehover می توانید به سایت imagehover.css مراجعه کنید و از افکت ها استفاده نمایید.

ویژگی های ihover

بدون وابستگی، می تواند در هر پروژه ای استفاده شود.

ساخته شده با Scss CSS (فایل شامل)، تغییر آسان با متغیرها.

کد ماژولار، بدون نیاز به گنجاندن کل فایل.

بیش از 30 افکت در یک بسته

با Bootstrap به خوبی کار کنید (بوت استرپ ضروری نیست)

برای دانلود افکت های ذکر شده می توانید به وب سایت gudh.github.io مراجعه کرده و افکت های دلخواه تان را دانلود کنید.

 

Css buttons

عملکرد دکمه ها به این گونه می باشد که با کلیک ، کاربر  به صفحات دیگر هدایت می‌شود پس باید در کدنویسی برای آن ها مسیر درستی نوشته شده‌باشد. برای آنها می توانید ویژگی های مختلفی تعریف کنید. مثلا می توانید برای دکمه ها رنگ سفارشی یا گرد بودن یا مستطیل بودن را مشخص کنید حتی می توانید  افکت دلخواهی را بربا استفاده ازcss روی button ها اعمال کنید.

برای استفاده کردن از افکت های موجود می توانید به سایت getcssscan.com بروید و تنها کافی ست تا بر روی افکت دلخواه تان کلیک کنید تا کد مربوط به آن کپی شود.


cssکدهای
.button{
Border: none ;
background-color: #c77320 ;
color: #000 ;
padding: 25px ;
text-decoration: none ;
display: inline-block ;
cursor: pointer ;
border-radius: 8px ;
}
.button:hover {
background-color: #C8C10D ;
}


htmlکدهای

<h3>با کلیک به سایت وب یار ارجاع داده می شود</h3>

<a href="https://www.webyar.net/feed/" class="button">کلیک کنید</a>

در قطعه کد نوشته شده در قسمت اول کلاس button تعریف شده و ویژگی های button مانند رنگ زمینه شیء ، رنگ متن ، padding و… داده شده‌است. در بخش دوم یک ویژگی برای زمانی که button  در حال انتخاب است تعریف شده‌است. و در انتها در بخش سوم به button حرکتی اعمال شدهاست که با کلیک بر روی آن به سایت وب یار ارجاع داده‌می‌شود.

 سخن پایانی

در این مقاله به less ، sass ، Qhaver ، ihaver ، image hover ، css button به صورت مختصر پرداخت شد. تمامی مطالب ذکره‌شده به منظور افزایش زیبایی در طراحی با استفاده از css می‌باشد. از اینکه تا پایان این مقاله هم همراه تیم وب یار بودید. از شما متشکریم‌جهت سفارش طراحی سایت و یا سئو سایت خود می‌توانید. با مشاورین ما تماس بگیرید.