Friday, April 5, 2019

Some notes from some coaching on CSS and Sass today.

  1. Another difference between Sass and LESS beyond Sass having supposedly better mixins at a complexity level few ever visit is that LESS will lazy load imported files as it needs them while Sass will grab them all at once upfront. Before the LESS way sounds better to you, consider that it comes with more HTTP calls and could ultimately be "heavier" all around.
  2. Two things connected by a dot as suggested here basically means that both things are required for the effect.
  3. When styling say the table rows of a table in Sass you should likely have a nesting effect, but be wary of having a nesting effect too deep leading to Sass that is too indented to a point of unreadability. Nesting a style inside of a style in Sass will make CSS in which the nested style comes after the outer style suggesting that elements matching that criteria within the greater thing being styled should have that cascaded effect.
  4. Any subeffect (not the technical term) starting out with a colon like :first-child should be nested in Sass like so:
    .startingpoint button {
       padding: 0;
       margin: 0 0 10px 0;
       background-color: $genericbackground;
       border: none;
       font-size: 20px;
       cursor: pointer;
       outline: none;
       &:link {
          font-weight: normal;
          color: $black;
       }
       &:visited {
          font-weight: normal;
          color: $black;
       }
       &:hover {
          font-weight: bold;
          color: $green;
       }
       &:focus {
          font-weight: bold;
          color: $green;
       }
       &:active {
          font-weight: normal;
          color: $black;
       }
    }

No comments:

Post a Comment