Nesting and 7-1 Architecture

Okay, so this week wasn’t that in terms of how to simplify code. I think I like putting things in different folders and it is easier to go back to a folder and fix up something rather than searching for code in one CSS code.

031 Sass nesting/7-1 architecture

natours/v5-1-2/index.html

natours/v5-1-2/package.json

natours/v5-1-2/css/style.css

natours/v5-1-2/img/all-image-files

natours/v5-1-2/sass/main.scss

034 grid system

natours/v5-3/index.html

natours/v5-3/sass/layout/_grid.scss

Pick two of these and described how they were used in the tutorials. Give an example piece of code using Enlighter to support your description.

• The :not() pseudo selector selects everything but the last child element.

.row{
    max-width: $grid-width;
    margin:0 auto;
    margin-bottom: $gutter-vertical;
    

    &:not(:last-child){
    margin-bottom: $gutter-vertical;
    

• calc () function is a feature in CSS that is an automatic calculation when the page loads.

.col-1-of-2{
        width:calc((100% - #{$gutter-horizontal}) / 2);
        }