مقالات طراحی سایت

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

مطالعه بیشتر: آموزش Sass

چگونه ساختار پروژه Sass را ایجاد کنیم؟

برای شروع لازم است تا فایل استایل رو به چندین فایل پارشیال تقسیم کنید. هر کدام از این فایل های پارشیال یک کامپوننت محسوب میشوند. سپس این فایل ها را با استفاده از دیرکتیو @import داخل یک فایل اصلی می آوریم که عموما نام آن main.scss است.

ساختار ساده

اگر پروژه شما کوچک است (مثلا بر روی سایت تک صفحه ای کار میکنید)، میتوانید ساختار مینیمال زیر را استفاده کنید:

 
_base.scss
_layout.scss
_components.scss
 
main.scss
 

در مثال بالا سه فایل پارشیال داریم که درون فایل main.scss آورده شده است.

base: در این فایل reset، متغیرها، میکسین ها، و کلاس های کلی (مثل کلاس .clearifx، .float-right و ...) قرار دارند.

layout: در این فایل کلاس هایی که چیدمان لی اوت سایت را برعهده دارند (مانند container و سیستم گریدبندی) قرار دارند.

component: هر بخشی که میتواند مجدد قابل استفاده باشد (دکمه ها، منو، کاردها، و ...).

main: در این فایل تنها لینک import فایل های بالا قرار دارد.

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

الگوی 7-1

ساختار 7-1 ساختاری است که برای پروژه های بزرگ مناسب است. شما تمام فایل های پارشیال خود را در هفت فولدر مختلف دارید. یک فایل (معمولا با نام main.scss) در کنار این فولدرها قرار دارد و فایل های پارشیال داخل این فایل import میشوند. فایلی که قرار است به CSS کامپایل شود همین فایل است.

 
sass/
|
|– abstracts/ (or utilities/)
| |– _variables.scss // Sass Variables
| |– _functions.scss // Sass Functions
| |– _mixins.scss // Sass Mixins
|
|– base/
| |– _reset.scss // Reset/normalize
| |– _typography.scss // Typography rules
|
|– components/ (or modules/)
| |– _buttons.scss // Buttons
| |– _carousel.scss // Carousel
| |– _slider.scss // Slider
|
|– layout/
| |– _navigation.scss // Navigation
| |– _grid.scss // Grid system
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |– _forms.scss // Forms
|
|– pages/
| |– _home.scss // Home specific styles
| |– _about.scss // About specific styles
| |– _contact.scss // Contact specific styles
|
|– themes/
| |– _theme.scss // Default theme
| |– _admin.scss // Admin theme
|
|– vendors/
| |– _bootstrap.scss // Bootstrap
| |– _jquery-ui.scss // jQuery UI
|
`– main.scss // Main Sass file
 

Abastacts (utilities): ابزار های Sass نظیر فایل های کمکی، متغییرها، فانکشن ها، میکسین ها، و دیگر کانفیگ فایل ها در این پوشه قرار دارند. این فایل ها ابزارهای کمکی هستند و هنگام کامپایل هیچ خروجی CSS ندارند.

base: استایل های اصلی (استایل های استاندارد) پروژه در این پوشه قرار میگیرد. استایل هایی نظیر resetها، قوانین فونت ها، که بصورت کلی در پروژه استفاده میشود.

components (modules): شامل تمامی استایل ها مثل دکمه ها، کاروسل ها، اسلایدرها، و ویجت ها می باشد. عوما پروژه ها شامل تعداد زیادی کامپوننت هستند. در واقع کلیت یک وب سایت یا اپلیکیشن از تعداد زیادی کامپوننت کوچک تشکلیل شده است.

layout: شامل استایل هایی است که لی اوت پروژه را تشکیل میدهد. مانند استایل های header، footer، navigation، و سیستم گریدبندی.

pages: استایل هایی که برای صفحات خاص طراحی شده است در این پوشه قرار میگیرند. برای مثال شما یک استایل خاص برای صفحه home page دارید و صفحات دیگر آنرا ندارند.

themes: این پوشه ممکن است در خیلی از پروژه ها نباشد. در این پوشه فایل های مربوط به تم های مختلف سایت قرار دارند.

vendors: این پوشه شامل CSS فریم وورک های دیگر است – مانند بوت استرپ، JQuerryUI، و ... .

اگر لازم است تا کدهای vendor را تغییر دهید بهتر است فولدری با نام vendors-extensions/ ایجاد کنید (هشتمین فولدر) و فایل هایی که می خواهید override کنید را داخل این پوشه قرار دهید زیرا دستکاری فایل اصلی vendor کار خوبی نیست. برای مثال فایل های override مربوط به فریم وورک بوت استرپ را در vendors-extensions/_bootstrap.scss قرار دهید.

مطالعه بیشتر: بوت استرپ4

مطالعه بیشتر: آشنایی با فریم ورک بوت استرپ

مطالعه بیشتر: طراحی متریال گوگل برای بوت استرپ

main.scss: در این فایل تنها لینک import فایل های قرار دارد. برای مثال:

@import 'abstracts/variables';
 @import 'abstracts/functions';
 @import 'abstracts/mixins';

 @import 'vendors/bootstrap';
 @import 'vendors/jquery-ui';

 @import 'base/reset';
 @import 'base/typography';

 @import 'layout/navigation';
 @import 'layout/grid';
 @import 'layout/header';
 @import 'layout/footer';
 @import 'layout/sidebar';
 @import 'layout/forms';

 @import 'components/buttons';
 @import 'components/carousel';
 @import 'components/slider';

 @import 'pages/home';
 @import 'pages/about';
 @import 'pages/contact';

 @import 'themes/theme';
 @import 'themes/admin';

در زمان import فایل های پارشیال به main.scss لازم نیست _ یا .scss را بنویسید.

مطالعه بیشتر: Sass - Importe - Partials

به نقل از: ITNEXT