[WEEK #4] – 05 Natours Project with Sass Part 1 + Problem Sets + Blog Question

Hey everyone. This weeks work a good amount. I find it pretty interesting how you can have multiple files with different codes and just link everything in a main.scss file and everything compiles. I am still trying to find a good 7-1 architecture boilerplate so I can just use that always. The current 7-1 architecture is based off the tutorials. Some of the files listed below have nothing inside it, but I feel its not that bad to keep them there. The problem set was not that bad. The only issue I had with it was where to put the @each thats under the .btn class. I eventually just left it in the .btn class because the code broke without it. I used the code provided because my code was missing some functions. My previous code from last week works perfectly though.


Problem Set

Blog Question

There is a ton of CSS architecture covered in these three videos and how to use Sass to implement your 7-1 architecture. But hidden in there are a few bits of interesting CSS to mull:

  • :not() pseudo selector
  • calc() function
  • [] attribute selector with the ^ operator used.
  • ::after pseudo selector to write a clearfix hack

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.

Essentially the :not() pseudo selector, selects everything except the last child. In the example below, the vertical gutter will be placed on all the rows except the last child. In a regular case, .row:last-child() would select the last child. Since we are using :not(), the last child is NOT selected.


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


The calc() function is a powerful function that allows you to do mathematical operations and mix units in there. To use units, such as SASS variables, you have to wrap them around the syntax #{}. Inside of the calc, make sure to put the correct parenthesis, because calc() follows order of operations (PEMDAS type beat).

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

The [] attribute selector is a shortcut. Instead of adding a new class to all elements in the HTML, we can use the attribute selector. This starts with a bracket [ ]. Inside of the bracket we can specifiy an attribute like src or alt. if you put [alt=”Logo”] this will select all elements with the alt=”Logo” attribute. To select a class you should use [class^=”col-“]. This will select all the elements where the class attributes start with “col”. This only selects class attributes that start with “col” because of the ^ that is attached. There are different variations such as [class$=”col-“] (which means all class that end with col-)….(this was hard to explain)

[class^="col-"] {
    background-color: orangered;
    float: left;

The ::after pseudo selector element is used to insert some content after the content of an element. The ::after pseudo selector is used in the clearfix to put some content after the element which will clear the floats (I didn’t understand this question but gave it my best guess).

@mixin clearfix {
    &::after {
        content: "";
        display: table;
        clear: both;

Leave a comment

Your email address will not be published. Required fields are marked *