alanbsmith/learn-with-canvas-block-2.md

## learn-with-canvas-block-2.md

      
    Raw
  

              learn-with-canvas-block-2.md
            
          
    Learn HTML & CSS with Canvas

Block 1 Outline
Table Of Contents


Learn HTML & CSS with Canvas

Table Of Contents
Block 2 | Sass Basics & Using Canvas CSS

Exercise 1 | Using Sass Variables
Exercise 2 | Nesting Styles
Exercise 3 | Importing Styles from Canvas Kit CSS
Exercise 4 | Using Canvas Kit Variables
Exercise 5 | Using Canvas Kit Class Names


Block 2 | Sass Basics & Using Canvas CSS

Exercise 1 | Using Sass Variables

You can create variables like this:
/* color */
$color-black-pepper-400: #333333;
$color-blueberry-400: #0875e1;
$color-blueberry-500: #005cb9;
$color-french-vanilla-100: #ffffff;

/* type */
$font-family: 'Roboto', 'Helvetica', Arial, sans-serif;

/* space */
$spacing-xs: 12px;
$spacing-l: 32px;
And use them like this:
.text {
  font-family: $font-family;
  font-size: 16px;
  color: $color-black-pepper-400;
}
Exercise 2 | Nesting Styles

Nesting styles can create organization, but note that it also increase specificity, making styles
more difficult to override. It's a good practice to not nest styles too deeply. Staying above three
levels deep is a good rule of thumb.
.card {
  border: solid 2px #cdcdcd;
  border-radius: 10px;
  padding: 20px;
  width: 200px;

  .title {
    font-family: $font-family;
    font-size: 21px;
    color: $color-black-pepper-400;
  }

  .text {
    font-family: $font-family;
    font-size: 16px;
    color: $color-black-pepper-400;
  }
}
You can also nest with &:
Here, we'll nest button's hover pseudo-class (state):
.button {
  background-color: $color-blueberry-400;
  border: none;
  border-radius: 40px;
  color: $color-french-vanilla-100;
  font-family: $font-family;
  font-size: 16px;
  font-weight: bold;
  padding: $spacing-xs $spacing-l;

  &:hover {
    background-color: $color-blueberry-500;
    cursor: pointer;
  }
}
Exercise 3 | Importing Styles from Canvas Kit CSS

You can also use Sass to import styles with @import. Let's import Canvas Kit fonts and styles at
the top of style.scss.
@import '~@workday/canvas-kit-css-fonts/index.scss';
@import '~@workday/canvas-kit-css/index.scss';
Exercise 4 | Using Canvas Kit Variables

We like to namespace all our tokens with $wdc- to prevent name collisions. Let's update all our
variable names and remove our duplicate local variables.
@import '~@workday/canvas-kit-css-fonts/index.scss';
@import '~@workday/canvas-kit-css/index.scss';

/* No more local color or spacing variables */
$font-family: 'Roboto', 'Helvetica', Arial, sans-serif;

.card {
  border: solid 2px #cdcdcd;
  border-radius: 10px;
  padding: 20px;
  width: 200px;

  .title {
    font-family: $font-family;
    font-size: 21px;
    color: $wdc-color-black-pepper-400;
  }

  .text {
    font-family: $font-family;
    font-size: 16px;
    color: $wdc-color-black-pepper-400;
  }

  .button {
    background-color: $wdc-color-blueberry-400;
    border: none;
    border-radius: 40px;
    color: $wdc-color-french-vanilla-100;
    font-family: $font-family;
    font-size: 16px;
    font-weight: bold;
    padding: $wdc-spacing-xs $wdc-spacing-l;

    &:hover {
      background-color: $wdc-color-blueberry-500;
      cursor: pointer;
    }
  }
}
Exercise 5 | Using Canvas Kit Class Names

First, we'll update our class names in the HTML:
<body class="wdc-type">
  <h1 class="wdc-type-h1">Let's Style Our Card</h1>
  <div class="card">
    <h2 class="title">
      Title
    </h2>
    <p class="text">
      This is body text
    </p>
    <button type="button" class="wdc-btn wdc-btn-primary">Click Me</button>
  </div>
</body>
Then we can remove any redundant styles:
@import '~@workday/canvas-kit-css-fonts/index.scss';
@import '~@workday/canvas-kit-css/index.scss';

/* No more local variables */

.card {
  border: solid 2px #cdcdcd;
  border-radius: 10px;
  padding: 20px;
  width: 200px;

  .title {
    color: $wdc-color-black-pepper-400;
    font-size: 21px;
  }

  .text {
    color: $wdc-color-black-pepper-400;
    font-size: 16px;
  }
}