آشنایی عمیق با sass

کدنویسی بهینه css

در این مقاله قصد دارم به صورت مختصر آشنایی عمیقی از sass داشته باشیم .

برای کدنویسی css به صورت بهینه در حال حاضر بهترین روش استفاده از پیش پردانده sass است .

در حقیقت انتخاب روش بهینه یکی از اصول اساسی هر کاری است.

همچنین برای کدنویسی اصولی و بهینه css میتوانیم از پیش پردازنده sass استفاده کنید .

انگیزه 

اگر میخواهید با css برنامه نویسی کنید .
اگر میخواهید کد کمتر بزنید بیشتر استفاده کنید.
اگر میخواهید زمان کمی از دست بدهید بیشتر نتیجه بگیرید.
در آخر
اگر میخواهید از کدنویسی css لذت ببرید با ادامه این مقاله با من همراه باشید.

پیش پردانده Sass چیست ؟

آشنایی با sass

به صورت خلاصه باید بگویم Sass یک پیش پردازنده برای زبان css است.

پیش پردازنده ها به ما کمک می کنند از ویژگی های منحصر به فردی در css استفاده کنیم.

ویژگی‌هایی مانند متغیرها ، قواعد تو در تو و موارد مختلف دیگر.

هدف استفاده از این موارد این است که بتوانیم روند کدنویسی را ساده‌تر و مؤثرتر کنیم.

به زبان ساده تر sassیک مکمل برای زبان CSS هست ولی هرگز در کارآیی CSS تغییری ایجاد نمیکند.

اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید. 

برای به کار گیری sass  باید درک کاملی از موارد پایه ای css داشته باشید.

Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.

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

alt-img-737

 

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

در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.

پیش پردازنده چیست ؟

در علوم رایانه، پیش‌پردازنده، برنامه‌ای را گویند که با پردازش داده‌های ورودی، دادهٔ خروجی‌ای تولید می‌کند.

پروسه پردازش Sass

آشنایی با sass

فرض کنید در یک کارخانه  کفش مراحلی که طی میشود تا  یک کفش در انتهای خط تولید داشته باشیم .
ورودی = مواد اولیه کفش
پردازش = مواد اولیه کفش + متدهای طراحی
خروجی = محصول کفش

 

آشنایی با sass

 

دقیقا پیش پردازنده sass به این صورت کار میکند که ما یک سری دستورات که این دستورات همان کدهای css هست طبق سینتکس sass کدنویسی میکنیم و در نهایت در خروجی به ما کدهای Css تحویل میده .
ورودی = کدهای css طبق سینکس sass + ویژگی های sass
پردازش = تبدیل فایل Sass به css
خروجی = کد css

قاعده نوشتاری sass

دو قاعده نوشتاری برای Sass وجود دارد که هر دو در نهایت خروجی یکسانی را برای ما تولید می‌کنند.
SCSS : استفاده از فایلی که دارای فرمت .scss است و با css هم بسیار سازگار است.
SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.

مقایسه SASS و SCSS :

در واقع SCSS نسخه سوم از SASS می باشد.که از نظر قواعدی باهم متفاوت هستند.
کد SASS فشرده شده است، که به ساختارهای کلیدی کمتری نیاز دارد.ما به پرانتز و سیمی کالن (نقطه ویرگول) نیازی نداریم.
فرورفتگی ها نقش مهمی را ایفا می کنند. از این رو، آن ها برنامه نویسی را استاندارد می کنند .

 

آموزش ویدیوی روش اول نصب و راه اندازی sass