khalidmesbah / sass

Learning SASS, SCSS

• Sass partials
• Sass Variables and css custom properties
• Sass and BEM
• Sass mixins
• Sass map
• Sass functions
• Nesting and BEM
• Helper/Utility classes
• px to rem converter function
• px to em converter function

notes

• CSS variables are called custom properties
• CSS custom properties can be put in html, :root, and body selectors for global use
• you can manipulate css custom properties by javascript and you cannot do that with sass variables
• BEM : B => block, E => element, and M => modifier
• BEM helps to make class names unique, and if you change the name of the block you don't have to change the name of all the selectors related to it
• rows and columns are also called tracks
• use border:solid or padding:1px to kill margin collapse # refer to _grid.scss
• Sass maps are built-in sass module
• Sass maps similar to objects and dictionaries

BEM : block access modifier => a methodology use to name classes in a big project

• BEM is a css naming convention
• block: a standalone entity that's meaningful on its own
• access: a part of a block that has no standalone meaning and is semantically tied to its block
• modifier: a flag on a block or element that are used to change appearance or behavior
• class="block block__element block--modifier element--modifier block__element--modifier"
  • block => block block
  • element => element block__element
  • modifier => modifier block--modifier element--modifier

the link of the great tutorial

click me