To know more about sass Visit http://sass-lang.com/

How to make grouping for an project?

Meathod of creating block

     frame-work (Folder)

  • Set the variable. (Color, Font, Screen Size, etc.. ) in variable.scss.
  • Intialize all the font used in the project in font.scss.
  • If using any mixin create in mixin.scss. (For example PX to VW calculation, Keyframes, Animations)
  • Create the layout like container size, font-size and family for tags etc.. in global.scss.

 

     common-element (Folder)

  • Find the Commonly used block are repetadly used section full project and write the code in common-element.scss.
  • The file should has the wrapper class in the name .common-element-{block-name} and use the same name in HTML.

     template-specific (Folder)

  • For each page template create a new scss file in template specific folder.
  • The file must have a wrapper class in the name template-specific-{template-name}.

       block.scss

  • Include all the file in block.css

Grouping the Scss into Block Module (Structure)

SCSS 

   Style (Folder)

  • frame-work (Folder)
    • variable.scss
    • font.scss
    • mixin.scss
    • layout.scss
  • common-element (Folder)
    • header.scss
    • menu.scss
    • footer.scss
    • slider.scss
  • template-specific (Folder)
    • page-home.scss
    • page-contact.scss
  • block.scss – { Include all the scss File in order wise }

   Vendor (Folder)

  • bootstrap
    • bootstrap.scss
  • font-awesome
    • fontawesome.min.scss
  • block.scss – { Include all the scss File in order wise }

CSS

  • vendor.scss (Include the block.scss from vendor folder)
  • style.scss (Include the block.scss from style folder)

what is the Benefits of Grouping into Block?

  • If you need to change the color for the project you does not need to find all the stylesheet and replace the color. you just need to change the color in variable.scss in frame-work folder. It replace all the color declared for the variable.
  • If a project has some common structure for all page for example image slider it looks same like in all pages you just create under common elemnts it is simple to make changes if you need any changes in that you just change that one block it will apply to all the pages where the common element class applied.
  • It’s easy to find and update the corrections or implement a new feature without affecting any other part of design