# Create the SCSS

Let's begin by taking a look at our current `lower-third.1.scss` file in the `scss` folder.

```css
/* SCSS File - lower-third.1.scss */

body {
    background-color: transparent;
    display: flex;
    margin: 0;
}
```

Now that we have some SCSS, we can start up the `sass` package with the command defined in the [Using SCSS](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/development-setup#using-scss) portion of this guide. Setting up SCSS is covered in the [Development Setup](https://chrisryanouellette.gitbook.io/casparcg-html-template-guide/development-setup#scss-installation) section.  Now let's add our first bit of code to our SCSS file.

The first thing we will add to the file is some additional properties to the body declaration.

```css
body {
    background-color: transparent;
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    height: 100vh;
    width: 100vw;
}
```

The `font-family` property will set all the fonts for each child element of the body. In this case, our `h1` and `p` elements. Then the `width` and `height` properties are set to `100vw` and `100vh` so our body element will always cover the entire screen, regardless of the CasparCG's resolution. 

Next we will style the `main` element that has the class `.lt-style-one`. 

```css
.lt-style-one {
    align-self: flex-end;
    display: inherit;
    padding: 4vh 4vw;
}
```

Since this is a lower third graphic, we will align the `main` element to the `flex-end`, or more simply the bottom, of the parent ( `body` ) element. We want the graphic to be on the bottom portion of the screen, not the absolute bottom so, we will add some `padding` and give it a value of `4vh 4vw`. This states that the top and bottom with have a padding of `4vh` while the left and right have a padding of `4vw`. Feel free to play around with the values till you find a distance you like. 

Next we will style the container for the graphics's contents. That is the `div` with the class of `.graphic`.

```css
.lt-style-one {
/* main style definitions */

    .graphic {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr min-content;
        max-width: 33vw;
        position: relative;
        text-align: center;
        overflow: hidden;
    }
}
```

This `div` element will have a  `grid` display with only 1 column and 2 rows. The `overflow` property is `hidden` so we can animate the child elements from below this element. Let's style the `svg` next.

```css
.lt-style-one {
/* main style definitions */
    .graphic { /* div container style definitions */ }

    svg {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 5;
    }
}
```

Our `svg` element has a `position` of `absolute` so it may cover the entire size of the `.graphic` container. This is also why we set the `.graphic`'s position to `relative`. Then the `z-index` insures it will be above all the other elements.

```css
svg {
/* svg element style definitions */

    path {
        fill: none;
        stroke: lightblue;
        stroke-linecap: round;
        stroke-width: .5vw;
    }
}
```

Then we give the SVG's `path` some default values so it appears correctly. Increase the `stroke-width` if you want a thicker border.

```css
.lt-style-one {
/* main style definitions */
    .graphic { /* div container style definitions */ }

    svg { /* svg container style definitions */ }
    
    h1 {
        margin: 0;
        font-size: 2.5vw;
        padding: 1vh 3vw;
    }
    p {
        font-size: 1.5vw;
        margin: 0;
    }
    .subtitle {
        background-color: lightblue;
        padding: .25vw 0;
    }
}
```

Finally, we will style the `h1` and `p` elements. The `.subtitle` class is the `div` that contains our `p` element. Our graphic should now look something like this.

![Graphic after being styled with SASS](https://785596790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M-yhxqAIIIT9WAKqNzK%2F-M1qAjHZ2-ESsZyNFMSr%2F-M1qB3L-2PvK4FLkEKFg%2FLower%20Third%201%20-%20Chromium%203_7_2020%201_09_03%20PM%20\(2\).png?alt=media\&token=5b72c385-c23c-4df6-bbbf-7697148aa8f9)

We will be settings the colors for the graphic in the JavaScript file so don't worry if they do not match the style you are looking for. That is all we have to do with our SCSS file, time to write some JavaScript!

#### Resources

* [Stroke Line Cap](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap) on MDN's website.
* [Z Index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) on MDN's website.