SASS framework

SASS GUIDE

In order to make the most of the features of my framework, you have to keep in mind some simple rules and some steps

---

Naming files

IF your file is a framework module: _mymodule.scss or _my.module.scss IF your file is a custom page stylesheet: PageName.scss

--

Directory

main path: ROOT/src/styles/scss/

IF your file is a custom page stylesheet: Pages/ IF your file is a framework module

1. and it reset default styles: custom_generics/
2. and it define global settings (like color, fonts, etc): custom_settings/
3. and it has only mixin declarations: custom_tools/
4. and it styles a real recursive ui component (like btn, layout, etc): custom_object/
5. and it has helper class (like .clear, .bold, etc): custom_utils/

---

Module & page registrations

IF your file is a custom page stylesheet, you must import it on react component as a dependencies

IF your file is a framework module, you must import it on ROOT/src/styles/scss/custom.scss.

Remeber, in this case the of import declaration position can provoke different behaviors, because this framework is inpared on BEM and ITCSS rules.

---

Main structure (yourstyle.scss)

1. import dependecies
2. put your custom placeholder
3. render class and id

---

!! Recommended process !! It is the most important documentation part. !!

1. Open your file
2. Put your structure:

.parent-class{
    .parent-class__first-child{}
    .parent-class__second-child{
        .second-child__btn{}
        .second-child__text{}
    }
 }

3. Use @include extend-array() for each element:

 .parent-class{
    @include extend-array()
    .parent-class__first-child{
        @include extend-array()
    }
    .parent-class__second-child{
        .second-child__btn{
           @include extend-array()
        }
        .second-child__text{
           @include extend-array()
        }
    }
 }

4. In order to use this tool, extend-array() require 2 or more params (:string):

@include extend-array('placeholder-root-name-', 'suffix-1', 'suffix-2', 'suffix-3')

5. Use correct suffix: Think about what the class represents and use these four suffixes: layout, skin, child and child-skin.

If the element you want to format requires width, height, positioning, margins and padding (anything that does not refer to graphic effects), use 'layout' suffix. Otherwise use 'skin' suffix.

If your element has a child that doesn't require many styles use 'child'. If in that child it makes sense to separate the graphic aspect from the other declarations, use 'child-skin' too.

 .parent-class{
    @include extend-array('parent-class--', 'layout')
    .parent-class__first-child{
        @include extend-array('first-child--', 'layout', 'skin', 'child')
    }
    .parent-class__second-child{
        .second-child__btn{
           @include extend-array('btn--', 'layout', 'skin')
        }
        .second-child__text{
           @include extend-array('first-child--', 'layout', 'skin', 'child', 'child-skin')
        }
    }
 }

6. Write placeholder:

// parent class
%parent-class--layout{}

// first-child
%first-child--layout{}
%first-child--skin{}
%first-child--child{}

// btn
%btn--layout{}
%btn--skin{}

// text
%text--layout{}
%text--skin{}
%text--child{}
%text--child-skin{}


//render
 .parent-class{
    @include extend-array('parent-class--', 'layout')
    .parent-class__first-child{
        @include extend-array('first-child--', 'layout', 'skin', 'child')
    }
    .parent-class__second-child{
        .second-child__btn{
           @include extend-array('btn--', 'layout', 'skin')
        }
        .second-child__text{
           @include extend-array('text--', 'layout', 'skin', 'child', 'child-skin')
        }
    }
 }

7. Put your styles:

// parent class
%parent-class--layout{
     display: flex;
}

// first-child
%first-child--layout{
     width: 200px;
}
%first-child--skin{
     color: red;
}
%first-child--child{
  a {
     width: 200px;
     color: red;
  }
}

// btn
%btn--layout{
     width: 200px;
}
%btn--skin{
     color: red;
}

// text
%text--layout{
     width: 200px;
}
%text--skin{
     color: red;
}
%text--child{
a {
     width: 200px;
  }
}
%text--child-skin{
a {
     color: red;
  }
}


//render
 .parent-class{
    @include extend-array('parent-class--', 'layout')
    .parent-class__first-child{
        @include extend-array('first-child--', 'layout', 'skin', 'child')
    }
    .parent-class__second-child{
        .second-child__btn{
           @include extend-array('btn--', 'layout', 'skin')
        }
        .second-child__text{
           @include extend-array('text--', 'layout', 'skin', 'child', 'child-skin')
        }
    }
 }