loading...

طراحی سایت اختصاصی

بازدید : 41
سه شنبه 9 آبان 1402 زمان : 9:29


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

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

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

به عنوان مثال در نصیب واکنشگرایی وبسایت ، لهجه css دستورها media را در نصیب screen ارائه نموده است و شما می توانید به راحتی و با آشنایی روش شغل این امرها ، واکنشگرایی تارنما خویش را ایفا نمایید ! البته واقعا به دور از منطق میباشد که خودمان دست به کد گردیده و برای کلیه بخش های وبسایت ، دستورها مدیا بنویسیم ! درین وضعیت به سراغ فریمورک ها خوا‌هیم رفت . از جمله فریمورک بوت استرپ !

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

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

پس پیش از سهولت و سرعت در کدنویسی ، یکپارچگی و ساخت و ساز استاندارد در پروژه ، مقصود اساسی استعمال از فریمورک میباشد . برای لهجه پیاده سازی سی اس اس ، فریمورک های محبوبی همانند بوت استرپ ، یوآی کیت و فاندیشن وجود دارا هستند که بوت استرپ محبوبیت بیشتری داراست .
البته زمینه این نوشته‌علمی در ارتباط با sass میباشد . اینکه sass چیست و در قسمت فرانت اند چه استعمال هایی داراست . بعداز معنا فریمورک ، معنا دیگری به عنوان پیش پردازنده یا این که Preprocessor وجود داراست . پیش پردازنده ها ابزارهایی می باشند که در کنار فریمورک ها ، برای سهولت در کدنویسی بوسیله گویش سی اس اس ارائه شد‌ه‌است ولی دقیقا شغل این پیش پردازنده ها چیست ؟

پیش پردازنده چیست ؟
پیش پردازنده ، ابزاری میباشد که پیش از ساخت و ساز ورژن آخری کد ، اعمال گردیده و بستری متعدد را برای کدنویسی ارائه می نماید . البته این معنی شاید برای شما پاره ای بغرنج باشد پس عالی میباشد آن را بی آلایش خیس کنیم . دو پیش پردازنده دارای شهرت به اسم های sass و less وجود داراست که میتوان از هردو برای سهولت در کدنویسی سی اس اس به کار گرفت . او‌لین نکته که ما یحتاج میباشد بدانید این میباشد که برای همگی پروژه های پیاده سازی ، استعمال از پیش پردازنده ما یحتاج وجود ندارد و عالی میباشد برای پروژه هایی که وسعت کد استایل آنان بسیار زیاد میباشد از sass یا این که less استعمال نمایید .

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

ul {
list-style: none;
}

ul li {
padding: 20px 5px;
display: inline-block;
}

ul li a {
text-decoration: none;
font-size: 1rem;
color: #faf4f4;
}
در حال حاضر همین فرمان را با خواص نستینگ (Nesting) در sass پژوهش می کنیم :

ul {
list-style: none;

li {
padding: 20px 5px;
display: inline-block;

a {
text-decoration: none;
font-size: 1rem;
color: #faf4f4;
}
}
}
هنگامی که از sass استعمال می‌شود ، لزومی به کدنویسی به صورت بدون واسطه درون پوشه style.css وجود ندارد و شما کلیه کدها را طبق اصول کدنویسی sass که تفاوت چندانی با اصول کدنویسی css ندارد ، درون پوشه هایی با فرمت scss کتابت می کنید و نهایتا با دستورها خاصی که در خط دستور انجام خواهید کرد ، این کدها به فایلهای با فرمت css تبدیل می گردند . در آتی برای هرنوع تغییر و تحول نیز مورد نیاز میباشد تا این تغییرات درون پوشه های فرمت scss انجام یافته و نهایتا بر روی پوشه استایل انجام گردد .

وقتی که شما سرگرم به کدنویسی می‌باشید ، فولدر های با فرمت scss باطن پروژه شما نشانی دهی نخواهند شد و در واقعیت این فولدر ها تنها وظیفه دارا‌هستند تا کدنویسی شمارا کاهش داده و طبق اصول کامپایل خویش ، پوشه های css با دستورها css ایجاد نمایند . خب البته چرا بایستی از این نحوه بهره مند شد ؟


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

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

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

به عنوان مثال در نصیب واکنشگرایی وبسایت ، لهجه css دستورها media را در نصیب screen ارائه نموده است و شما می توانید به راحتی و با آشنایی روش شغل این امرها ، واکنشگرایی تارنما خویش را ایفا نمایید ! البته واقعا به دور از منطق میباشد که خودمان دست به کد گردیده و برای کلیه بخش های وبسایت ، دستورها مدیا بنویسیم ! درین وضعیت به سراغ فریمورک ها خوا‌هیم رفت . از جمله فریمورک بوت استرپ !

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

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

پس پیش از سهولت و سرعت در کدنویسی ، یکپارچگی و ساخت و ساز استاندارد در پروژه ، مقصود اساسی استعمال از فریمورک میباشد . برای لهجه پیاده سازی سی اس اس ، فریمورک های محبوبی همانند بوت استرپ ، یوآی کیت و فاندیشن وجود دارا هستند که بوت استرپ محبوبیت بیشتری داراست .
البته زمینه این نوشته‌علمی در ارتباط با sass میباشد . اینکه sass چیست و در قسمت فرانت اند چه استعمال هایی داراست . بعداز معنا فریمورک ، معنا دیگری به عنوان پیش پردازنده یا این که Preprocessor وجود داراست . پیش پردازنده ها ابزارهایی می باشند که در کنار فریمورک ها ، برای سهولت در کدنویسی بوسیله گویش سی اس اس ارائه شد‌ه‌است ولی دقیقا شغل این پیش پردازنده ها چیست ؟

پیش پردازنده چیست ؟
پیش پردازنده ، ابزاری میباشد که پیش از ساخت و ساز ورژن آخری کد ، اعمال گردیده و بستری متعدد را برای کدنویسی ارائه می نماید . البته این معنی شاید برای شما پاره ای بغرنج باشد پس عالی میباشد آن را بی آلایش خیس کنیم . دو پیش پردازنده دارای شهرت به اسم های sass و less وجود داراست که میتوان از هردو برای سهولت در کدنویسی سی اس اس به کار گرفت . او‌لین نکته که ما یحتاج میباشد بدانید این میباشد که برای همگی پروژه های پیاده سازی ، استعمال از پیش پردازنده ما یحتاج وجود ندارد و عالی میباشد برای پروژه هایی که وسعت کد استایل آنان بسیار زیاد میباشد از sass یا این که less استعمال نمایید .

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

ul {
list-style: none;
}

ul li {
padding: 20px 5px;
display: inline-block;
}

ul li a {
text-decoration: none;
font-size: 1rem;
color: #faf4f4;
}
در حال حاضر همین فرمان را با خواص نستینگ (Nesting) در sass پژوهش می کنیم :

ul {
list-style: none;

li {
padding: 20px 5px;
display: inline-block;

a {
text-decoration: none;
font-size: 1rem;
color: #faf4f4;
}
}
}
هنگامی که از sass استعمال می‌شود ، لزومی به کدنویسی به صورت بدون واسطه درون پوشه style.css وجود ندارد و شما کلیه کدها را طبق اصول کدنویسی sass که تفاوت چندانی با اصول کدنویسی css ندارد ، درون پوشه هایی با فرمت scss کتابت می کنید و نهایتا با دستورها خاصی که در خط دستور انجام خواهید کرد ، این کدها به فایلهای با فرمت css تبدیل می گردند . در آتی برای هرنوع تغییر و تحول نیز مورد نیاز میباشد تا این تغییرات درون پوشه های فرمت scss انجام یافته و نهایتا بر روی پوشه استایل انجام گردد .

وقتی که شما سرگرم به کدنویسی می‌باشید ، فولدر های با فرمت scss باطن پروژه شما نشانی دهی نخواهند شد و در واقعیت این فولدر ها تنها وظیفه دارا‌هستند تا کدنویسی شمارا کاهش داده و طبق اصول کامپایل خویش ، پوشه های css با دستورها css ایجاد نمایند . خب البته چرا بایستی از این نحوه بهره مند شد ؟

نظرات این مطلب

تعداد صفحات : 0

درباره ما
موضوعات
لینک دوستان
آمار سایت
  • کل مطالب : 159
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • بازدید امروز : 33
  • بازدید کننده امروز : 1
  • باردید دیروز : 32
  • بازدید کننده دیروز : 0
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 88
  • بازدید ماه : 312
  • بازدید سال : 1980
  • بازدید کلی : 2927
  • <
    آرشیو
    اطلاعات کاربری
    نام کاربری :
    رمز عبور :
  • فراموشی رمز عبور؟
  • خبر نامه


    معرفی وبلاگ به یک دوست


    ایمیل شما :

    ایمیل دوست شما :



    کدهای اختصاصی