تعداد بازدید این مطلب: ۰

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

Preprocessor چیست؟

 

Preprocessor چیست | بی لرن

 

پیش پردازنده ها یا preprocessors ابزارها یا برنامه هایی هستند که یک مدل کد را دریافت می کنند و آن را به کد دیگری تبدیل می کنند. می توانیم پیش پردازنده های محبوب زبان HTML و CSS را Haml و Sass نام ببریم. پیش پردازنده Haml برای HTML و پیش پردازنده sass برای CSS طراحی شده اند. Preprocessor ها به غیر از رفع مشکلات کدنویسی، روش هایی را برای بالا بردن کدنویسی به طراحان ارائه می دهند.

 

پیش پردازنده های css

پیش پردازنده های CSS یا css preprocessors ابزارهایی هستند که قابلیت هایی را به فایل های CSS اضافه می کنند. علاوه بر این باعث صرفه جویی در وقت و میزان کار یک توسعه دهنده وب می شوند. این پیش پردازنده ها با کمک قابلیت هایی همچون متغیرها، اپراتورها، interpolation ها، توابع و mixins عملکرد CSS را افزایش می دهند.

 

 SASS چیست؟

 

 SASS چیست؟ | بی لرن

 

Sass مخفف عبارت Syntactically Awesome Stylesheets می باشد که به عنوان یک افزونه یا پیش ‌پردازنده (Preproccesor) زبان css به حساب می آید. شما با استفاده از Sass می توانید، به راحتی از استایل ها آسان کنید، حتی در زمان هایی که فایل های css شما بسیار بزرگ و پیچیده هستند. sass علاوه بر آسان کردن کار با استایل ها، وظیفه نگهداری استایل ها را هم بر عهده دارد. به دلیل وجود متغیر ها، mixins ها، nesting ها و وراثت در Sass، به راحتی کدهای نوشته شده، سازماندهی می شوند.

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

 

نرم افزار‌ های کامپایل کدهای Sass

شما با نرم افزار های کامپایل زیر می توانید، کدهای‌sass را به CSS اضافه نمایید.

  • CodeKit (Paid) Mac
  • Compass.app (Paid, Open Source) Mac Windows Linux
  • Ghostlab (Paid) Mac Windows
  • Hammer (Paid) Mac
  • Koala (Open Source) Mac Windows Linux
  • LiveReload (Paid, Open Source) Mac Windows
  • Prepros (Paid) Mac Windows Linux
  • Scout-App (Free, Open Source) Windows Linux Mac

 

بنر آموزش رایگان html و css | بی لرن

 

نصب نرم افزار Scout-App

نرم افزار Scout-App یکی از محبوب ترین، جذاب ترین نرم افزار های کامپایل sass می باشد که به صورت رایگان در اختیار کاربران قرار می گیرد. این نرم افزار به صورت Open Source می باشد و برای سیستم‌ عامل ‌های Mac، Windows و Linux تولید شده است.

مراحل نصب نرم افزار Scout-App

مرحله اول

نرم افزار Scout-App را دانلود و آن را نصب نمایید تا صفحه زیر برای شما باز شود.

مرحله دوم

در این مرحله باید پروژه خود را وارد نمایید یا پروژه جدید ایجاد نمایید. برای وارد کردن پروژه خود، پوشه پروژه خود را انتخاب نمایید و در قسمت مشخص شده در تصویر زیر بکشید (Drag and Drop). در صورتی که بخواهید پروژه جدید ایجاد نمایید، بر روی گزینه Add a Project کلیک نمایید و از صفحه باز شده بر روی دکمه Make New Folder کلیک نمایید. برای اتمام کار بر روی OK کلیک نمایید.

 

مراحل نصب نرم افزار Scout-App | بی لرن

 

مرحله سوم

زمانی که پوشه جدید ایجاد کردید، نام آن را Sass-Project بگذارید. فراموش نکنید که در این مرحله فایل‌ های‌sass و پوشه فایل‌ های css را به فایل پروژه خود اضافه نمایید. برای اضافه کردن اطلاعات خود، همانند تصویر زیر در قسمت Input Folder پوشه مربوط به فایل‌ های Sass و در قسمت Output Folder پوشه مربوط به فایل‌ های CSS خود را اضافه نمایید. 

مرحله چهارم

در این مرحله به قسمت Environment بروید و در بین گزینه های آن، گزینه Development را انتخاب نمایید تا کدهای شما قابل ویرایش باشند. برای فشرده شدن کدها بد از کامپایل، گزینه Compressed را انتخاب نمایید.

مرحله 3 نصب نرم افزار Scout-App  | بی لرن

مرحله پنجم

این مرحله آخرین مرحله نرم افزار Scout-App می باشد. در نوار سمت چپ صفحه رو به رو خود که همانند تصویر زیر می باشد، بر روی گزینه مشخص شده کلیک نمایید. فراموش نکنید که قبل از کلیک بر روی آن، کدهای خود را در برنامه بنویسید یا وارد نمایید. 

 

مرحله 5  | بی لرن

 

آموزش مقدماتی Sass

 

آموزش مقدماتی Sass | بی لرن

 

در این قسمت می خواهیم به شما نحوه استفاده از Sass را آموزش دهیم.

Syntax (سینتکس)

sass به طور کلی دارای ۲ Syntax می باشد که به طور کامل به آن ها می پردازیم.

(SCSS (Sassy CSS

نوشتن کدها در scss به سادگی sass نمی باشد و این سینتکس به خوبی از فرمت scss. و CSS پشتیبانی می کند.

دندانه‌ دار (همان Sass)

نوشتن کدها در sass خلاصه ‌تر و راحت ‌تر می باشد و به خوبی از CSS پشتیبانی می کند. این مدل Syntax دارای از فرمت sass. می باشد و از آن استفاده می کند.

استفاده از هر کدام از Syntax های sass به راحتی و سلیقه شما بستگی دارد.

کامنت گذاری

شما برای اینکه بتوانید در sass کامنت گذاری کنید، می توانید همانند زبان سی شارپ عمل کنید.

  •  از علامت //  برای کامنت گذاری خطوط تک خطی استفاده می شود.

  •  از علامت /**/  برای کامنت گذاری خطوط چند خطی استفاده نمایید.

ایجاد متغیر (Variables)

زمانی که طراح در در زمان کدنویسی بخواهد مقداری را ذخیره نماید، از متغییر ها استفاده می کند. با این روش می تواند به راحتی بارها و بارها از آن مقدار استفاده نماید. به مثال زیر توجه نمایید.

Sass code

$fontstack: Helvetica, sansserif
$primarycolor: #۳۳۳
 
body
  font: ۱۰۰% $fontstack
 
  color: $primarycolor

CSS compiled code

} body 

;font: 100% Helvetica, sans-serif

;color: #333

{

در مثالی که برای شما زده ایم، یک متغییر برای نام فونت ها و دیگری را برای رنگ ایجاد کرده ایم. 

شما با داشتن متغییر به راحتی می توانید به جای تغییر کد رنگ یا فونت و …، تنها مقدار متغییر مورد نظر خود را تغییر دهید. 

تو در تو (Nesting)

همانطور که در جریان هستید، قابلیت تو در تو تنها در زبان HTML وجود دارد و css از این قابلیت پشتیبانی نمی کند. اما CSS با افزونه Sass می تواند از قابلیت تو در تو پشتیبانی کند. به مثال زیر توجه نمایید.

Sass code

       nav

         ul

margin: 0

padding: 0

list-style: none

            li

display: inline-block

            a

display: block

padding: 6px 12pxtext-decoration: none

CSS compiled code

} nav ul 

;margin: 0

;padding: 0

;list-style: none

{

} nav li 

;display: inline-block

{

} nav a 

;display: block

;padding: 6px 12px

;text-decoration: none

{

ایجاد توابع (Mixins)

شاید برای شما هم پیش آمده باشد که در زمان کدنویسی CSS، کدهایی به دفعات بسیار تکرار می شوند. برای برطرف کردن این موضوع می توانید از افزونه Sass استفاده نمایید. Sass به وسیله ویژگی Mixins خود که همان function زبان های برنامه نویسی می باشد، یک الگو ایجاد می کند و آن الگو را به تعداد دفعات مورد نیاز تکرار می کند. همانند مثال زیر.

Sass code

                    (transform($property=

webkit-transform: $property-   

        ms-transform: $property-      

       transform: $property   

                                           box.

       ((transform(rotate(30deg+        

CSS compiled code

} box.

;(webkit-transform: rotate(30deg)-

;(ms-transform: rotate(30deg)-

;(transform: rotate(30deg)

{

Partial ها

Partial ها به فایل های کوچک درون Sass گفته می شود که امکان import شدن به درون دیگر فایل ‌های Sass را برای طراح ایجاد می کنند. شما با استفاده از قابلیت Partial می توانید، فایل های ماژولاری css خود را درون sass وارد نمایید و از آن ها نگهداری کنید. به صورت زیر نام گذاری می شوند.

_partial.scss

Import

import دارای دستور import@ می باشد که به وسیله این دستور می توانید Partial ها را به خود های خود اضافه نمایید. فراموش نکنید که این کار به وسیله Http Request انجام می شود. به مثال زیر توجه نمایید.

Sass code

 reset.scss_ //

,html

,body

,ul

} ol 

;margin: 0

;padding: 0

{

 basefile.scss //

;’import ‘reset@

} body 

;font: 100% Helvetica, sans-serif

;background-color: #efefef

{

CSS compiled code

} html, body, ul, ol 

;margin: 0

;padding: 0

{

} body

;font: 100% Helvetica, sans-serif

;background-color: #efefef

{

توسعه / ارث ‌بری

ارث بری این امکان را برای شما فراهم می کند تا بتوانید استایل های مربوط به سلکتورها را دریافت نمایید و در صورت نیاز آن ها را ارث بری نمایید. شما برای اجرای این قابلیت می توانید از دستورالعمل @extend استفاده کنید.

عملگر

یکی از ویژگی های جذاب Sass، قابلیت عملگر می باشد. شما با این قابلیت می توانید مقادیر پیکسل را به درصد تبدیل نمایید و علاوه بر درصد دارای توابعی همچون جمع، تفریق، ضرب و تقسیم می باشد. تمام این توابع می توانند با هم ترکیب شوند و محاسبات پیچیده تری را ایجاد کنند.

نگهدارنده placeholder

نگهدارنده ها همانند متغیر ها می باشند که با علامت % مشخص می شوند. تفاوت نگهدارنده ها با متغیر ها این است که نگهدارنده ها توانایی بیشتری در نگهداری یک بلاک کد را دارند.

} %shared-font-size
 ;font-size: 14px
 {

دستور مخلوط @mixin

دستور مخلوط @mixin مانند %placeholder عمل می کند ولی به نسبت %placeholder امکانات بیشتری را در اختیار شما قرار می دهد.

} (mixin img-responsive($display: block @

;display: $display

max-width: 100%; // Part 1: Set a maximum relative to the parent

height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching

{

دستورات شرطی

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

  • @if(شرط){} 
  • @else{}
  • @else if{}

آرایه Array

آرایه ها با علامت $ نمایش داده می شوند و در زمان کدنویسی با علامت ( ( ) ) باز و بسته می شوند.

) :colors$

,(grey: ( dark: #444, base: #666, light: #999 )

(brand: ( pink: #ff69b4, blue: #0000ff 

(

حلقه های تکرار

حلقه های تکرار شامل ۳ حلقه زیر می باشند.

for@

} for $i from 1 through 3@
$i // is value
{

while@ 

}(شرط) while@

{

each@ 

} each $i in array @

{

 

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

در این قسمت می خواهیم روش های مختلف استفاده از SASS در پروژه را به شما معرفی نماییم.

به صورت یک ماژول مستقل Ruby

اگر می خواهید، توسعه پروژه خود را در بستر ویندوز انجام دهید، باید Ruby را نصب نمایید یا به صورت ماژول مستقل از Ruby است کنید.

به صورت یک ابزار خط فرمان (Command line tool)

در این قسمت به چند نمونه از دستورات خط فرمان می پردازیم.

دستور sass input.scss output.css

این دستور به شما این امکان را می دهد تا بتوانید کد های SASS را از خط فرمان (Command line) اجرا کنید.

دستور sass –watch input.scss:output.css

این دستور به SASS این دستور را می دهد که در صورت تغییر محتوای فایل sass، مقادیر css را نیز بروز رسانی نماید.

sass –watch app/sass:public/stylesheets

این کد به sass کمک می کند تا بتواند بر روی تمام محتوای پوشه/directory نظارت داشته باشد.

افزونه ی Rack/Rails/Merb

افزونه ی Rack

افزونه Rack به عنوان یک رابط وب سرور (web server interface) معرفی شده است که توسعه دهنده به وسیله آن می تواند اپلیکیشن های تحت وب به زبان Ruby طراحی نماید. برای استفاده و فعال سازی از SASS در اپلیکیشن های مبتنی بر Rack، کد زیر را به فایل config.ru موجود در پوشه ی root اضافه نمایید.

‘require   ‘sass/plugin/rack

use  Sass::Plugin::Rack

افزونه ی Rails

افزونه Rails یک فریم ورک توسعه ی اپلیکیشن های تحت وب (Web framework) می باشد که به صورت متن باز و رایگان (open-source) در اختیار کاربران قرار می گیرد. این افزونه از استاندار هایی همچون JSON ،HTML ،CSS و JavaScript برای طراحی ظاهر سایت و … استفاده می کند. شما برای استفاده از افزونه Rails باید کد اول را به فایل environment.rb موجود در پوشه ی config اضافه نمایید. کد دوم نیز وارد فایل Gemfile نمایید.

“config.gem “sass

 

“gem “sass

افزونه ی Merb

افزونه Merb همانند افزونه های Rails و Rack، یک فریم ورک توسعه ی اپلیکیشن های تحت وب می باشد. این افزونه ویژگی هایی همچون سرعت و ماژولار بودن را درون افزونه Rails قرار می دهد. برای اینکه بتوانید SASS را در فریم ورک Merb فراخوانی و از آن استفاده نمایید، باید کد زیر را در فایل config/dependencies.rb اضافه کنید.

“dependency “merb-haml

قابلیت ذخیره ی موقت فایل ها در  Caching

یکی از قابلیت های بی نظیر sass، ذخیره فایل هایی همچون template ها و partial ها بر روی حافظه cache می باشد. در صورتی که محتوای این فایل ها ویرایش یا بروز رسانی نشده باشند می توانید بدون استفاده از parse (بررسی نحوی و تبدیل)، بارها از این فایل ها استفاده نمایید. فراموش نکنید اگر فایل های کش شده را پاک نمایید، در زمان کامپایل تولید خواهند شد.

تنظیمات و مقدار دهی آن ها (Options)

می توانید برای انجام تنظیمات لازم options که در فایل environment.rb یا config.ru اپلیکیشن مبتنی بر Rack وجود دارند، از دستورات زیر استفاده نمایید.

Sass::Plugin.options[:style] = :compact

برای تنظیم کردن مقادیر فایل init.rb موجود در اپلیکیشن مبتنی بر Merb، از کد زیر استفاده نمایید.

Merb::Plugin.config[:sass][:style] = :compact

تنظیماتی که می توانید در SASS و SCSS استفاده و مقدار دهی نمایید، شامل موارد زیر می باشند.

  • style
  • syntax
  • property_syntax
  • cache
  • read_cache
  • cache_store
  • never_update
  • always_update
  • always_check
  • poll
  • template_location
  • css_location
  • unix_newlines
  • filename
  • line
  • load_paths
  • filesystem_importer
  • line_numbers
  • trace_selectors
  • debug_info
  • custom
  • quiet

کد گذاری

SASS برای کد گذاری کاراکتر های stylesheets، از روش مشخص سازی مشخصات CSS استفاده می کند. مشخصات css شامل موارد زیر می باشند.

  • برای مشخص سازی مشخصات، در ابتدا موضوع Unicode مورد بررسی قرار گرفته می شود و پس از آن موضوع charset@ اعلام می شود. در نهایت کد گذاری رشته روبی Ruby انجام می شود.
  • در مرحله دوم که مربوط به کد گذاری charset می باشد، در صورت که تنظیمات آن انجام نشود، عنوان آن را UTF-8 در نظر می گیرند.
  • با استفاده از اعلام charset@، باید موضوع کد گذاری کاراکتر ها را مشخص نمایید.

 

چرا بهتر است از Sass استفاده کنیم؟

همانطور که می دانید زبان های html و css دارای نقطه ضعف های بسیاری هستند، که مهم ترین این نقطه ضعف ها تکرار بیش از حد کدها در زمان کدنویسی می باشد. در زبان های پیشرفته تر، برای سازماندهی کدها از تعریف متغیر ها، توابع و … استفاده می کنند که باعث از بین رفتن تکرار شدن کدها در کدنویسی می شوند. دلیل استفاده از Sass همین موضوع می باشد. Sass مکمل زبان css می باشد که باعث برطرف شدن مشکلات و نقطه ضعف های css و  سازماندهی شدن کدها می شود. 

 

مزایای استفاده از SASS

 

مزایای استفاده از SASS | بی لرن

 

  • کاملا سازگار با CSS
  • استفاده از متغیر ها و بلاک‌ های تو در تو و MIXINها
  • بسیاری از توابع مفید برای دستکاری رنگ و مقادیر دیگر
  • ویژگی‌ های پیشرفته مانند دستورالعمل ‌های کنترل برای کتابخانه‌ ها
  • خروجی قابل تنظیم با فرمت قابل تنظیم

 

LESS چیست؟

 

LESS چیست؟ | بی لرن

 

Less نیز فریمورک‌ و پلتفرم زبان CSS می باشد که به وسیله آن می توانید کدنویسی و استایل دهی صفحات را با ساده ترین روش انجام دهید. Less مثل زبان های برنامه نویسی، دارای امکانات بسیاری همچون تعریف متغیر، ترکیب متغیر ها و … می باشد. کامپایلر اصلی LESS را برای زبان جاوا اسکریپت تولید کرده اند و وظیفه این پلتفرم، تبدیل کدهای نگارش یافته به فرمت استاندارد CSS می باشد.

چگونه LESS را نصب کنیم؟

مرحله اول

فایل های مورد نیاز خود را از سایت lesscss.org دانلود نمایید.

مرحله دوم

از فایل less.js یک کپی تهیه کنید و آن را داخل پوشه وب سایت خود قرار دهید.

مرحله سوم

یک فایل ایجاد نمایید و تمام استایل هایی که با پلتفرم less می باشند را تایپ نمایید (مانند:style.less).

مرحله چهارم

کد زیر را در قسمت کدهای HTML خود وارد نمایید.

<head>

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>

<script src=”less.js” type=”text/javascript”></script>

<head/>

 

شباهت های LESS و SASS 

 

شباهت های LESS و SASS  | بی لرن

 

شباهت های LESS و SASS به صورت زیر می باشد.

  • کلاس ها (Class)
  • پارامتر ها 
  • کلاس های تو در تو 
  • توابع
  • فراخوانی استایل ها
  • scope (مدیریت استایل ها به صورت local)

 

تفاوت های LESS و SASS

 

تفاوت های LESS و SASS | بی لرن

 

 LESS و sass دارای تفاوت های زیر می باشند.

 

SASS LESS
مختص زبان CSS می باشد یک library از جاوااسکریپت است
روی Ruby اجرا می شود یک زبان کلاینت – ساید (client-side)
زبان سمت سرور یا (Server-side)  

 

مزایای استفاده از LESS

 

مزایای LESS | بی لرن

 

 مزایای LESS که باعث می شود طراحان از آن استفاده کنند به صورت زیر می باشند.

  • استفاده از برنامه نویسی برای ایجاد استایل ‌ها
  • بهبود نگارش CSS و استفاده بهینه از CSS3
  • افزایش سرعت کد ‎نویسی به کمک mixin
  • خوانایی و پیمایش بهتر دستورات تو در تو
  • استفاده از MIXIN که همانند توابع در برنامه نویسی عمل می ‌کنند
  • نگارش کدهای شبیه به زبان های برنامه نویسی می باشد
  • قابلیت پیاده سازی سمت کاربر و سمت سرور

 

Scss چیست؟

 

Scss چیست؟ | بی لرن

 

Scss مخفف عبارت Sassy CSS می باشد که به عنوان نسخه سوم SASS معرفی شده است اما sass و scss از نظر قواعد با هم متفاوت هستند. SCSS به نسبت SASS گویا تر، خوانا تر می باشد و به راحتی می توانید آن را یاد بگیرید. سینتکس SCSS با پسوند scss. ذخیره می شود و می تواند از تمام کد های CSS پشتیبانی کند. فراموش نکنید که به خاطر شباهت های موجود در بین SCSS و CSS، یادگیری scss راحت تر می باشد. در صورتی که نمی توانید Ruby را نصب کنید، می توانید از گزینه های زیر استفاده نمایید.

تبدیل SASS به SCSS 

$sass-convert style.sass style.scss

برای تبدیل کد های scss به sass و برعکس، می توانید علاوه بر کد بالا از سایت bet1x00208.com نیز استفاده نمایید.

تبدیل scss به sass 

$sass-convert style.scss style.sass

علاوه بر کد بالا، راه حل دیگری نیز برای تبدیل Scss به Sass و برعکس وجود دارد، می توان این راه حل را استفاده از سایت sassmeister.com بیان کرد.

اسکریپت SASS – پوسته های تعاملی

برای اینکه بتوانید SASS Script راه اندازی کنید، دستور زیر را در Command prompt که با Ruby باز کرده اید، اجرا نمایید.

sass -i

۱px + 10px  <<

۱۱px

 #۷۷۷ + #۷۷۷  <<

eeeeee #

۱۰px/5px <<

۲

نصب sass با Gem

برای استفاده از گزینه SASS باید آن را به کمک Gem و به وسیله Command زیر نصب نمایید.

gem install sass

در صورت بروز هر خطا از Command زیر استفاده نمایید.

sudo gem install sass

تبدیل فایل های scss به فایل CSS

sass <sourcesassfilenamewithpath>.scss : <destinationcssfilenamewithpath>.css

sass sassfiles /style.scss : stylesheets/style.css

 

 استایل دادن به صفحات وب با استفاده از Gulp و Sass در SCSS

برای اینکه بتوانید با استفاده از Scss به صفحات وب خود استایل بدهید، باید از gulp و sass استفاده نمایید. برای این کار موارد زیر را به ترتیب انجام دهید.

نصب Gulp و  Sass

می توانید برای نصب gulp و sass از npm استفاده نمایید و دستورات زیر را اجراء نمایید.

npm install gulp –save-dev

 

npm install gulp-sass –save-dev

آماده سازی gulpfile.js

برای استفاده از SASS و GULP باید gulpfile.js را ایجاد و آماده سازی نمایید.

 

تفاوت css و scss

می توانید تفاوت های css و scss را در جدول زیر مشاهده نمایید.

CSS SCSS
 صرفه جویی سینتکس CSS می باشد
تغیییرات مجدد تگ های HTML به راحتی به سادگی قابل نوشتن می باشد
  اصلاح کننده مشکلات css

 

تفاوت sass و scss

 

تفاوت sass و scss | بی لرن

 

در جدول زیر تفاوت های بین sass و scss بیان شده است.

sass scss
از هر پلتفرمی پشتیبانی می کند از کراس پلتفرم ها پشتیبانی می نماید
محدودیت در سینتکس بسیار کم است دارای محدودیت هایی مثل semicolon
به سادگی قابل نوشتن می باشد جامعه محدودی را پشتیبانی می کند
پشتیبانی از مجموعه وسیعی از طراحان و توسعه دهندگان  

 

 

سخن پایانی

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

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