File Structure

Click to copy
WP-Admin-Style/             // Downloaded folder
|
|– dist / / / / /
|   |– wp-admin-style.css
|
|
|–src / / / / /
|   |– 01--core     /
|   |               |– _reset.scss
|   |               |– _colors.scss    // CSC * SCSS Variablel
|   |               |– _size.scss
|   |               |– _utility.scss|                
|   |               |– _mixin.scss
|   |               
|   |               
|   |– 02--elements /
|   |               |– _icon.scss
|   |               
|   |               
|   |– 03--layout   /
|   |               |– _card.scss
|   |               |– _layout-utility.scss
|   |               
|   |               
|   |– 04-components/
|   |               |– _nav-list.scss
|   |               
|   |               
|   |– 05-pages/
|   |               
|   |               
|   |- wp-admin-style.scss      // Main SCSS File

I divide my scss files into main 5 folders at top level: core, elements, components, layout and pages. I will dive into each folders in a minute. Beside these folders, I have wp-admin-style.scss file at the root level of scss folder. This app file imports all other scss files from all other folders. This way, I can point my bundler to this one file and it can import my whole SCSS code easily. Now let’s dive into each folders deeply.

Commnets Area

  1. marko says:

    Looks like @import to me, but inline.

  2. Ho Ho HO says:

    lksdaldajdjak

  3. test@test.com says:

    test

  4. marko says:

    No comments have bee

  5. devusrmk says:

    Of course for a single case like this, inline might be the way to go, but it gets more useful as more declarations are needed.

LEAVE A COMMENT

Please add to the discussion in a constructive way. If you disagree, please be polite.