---
# System prepended metadata

title: SCSS Rules and Tricks
tags: [CSS]

---

---
title: SCSS Rules and Tricks
tags: CSS
---
# SCSS Rules and Tricks

## CSS (SCSS) Rules

### import local font file in scss

https://stackoverflow.com/questions/40503039/scss-import-local-ttf-font

Put your font file in
 **src/assets/font/FrancoisOne-Regular.ttf**

> src/assets/scss/_font.scss

    @font-face {
      font-family: "Francois One";
      src: url("../font/FrancoisOne-Regular.ttf");
    }

> src/assets/scss/main.scss

    @import "./font";
    

---
   
    
### Calaculate 

        height: calc(100% - 45px);

---



## CSS Tricks

### Center Elements Vertically

![](https://i.imgur.com/mOCwjl6m.png =200x)


    .arrow-big {
      display: inline-block;
      height: 20rem;
      width: 40rem;
      background-color: $color-secondary;
      color: $color-white;
      text-align: center;
      clip-path: polygon(
        0% 20%,
        70% 20%,
        70% 0%,
        100% 50%,
        70% 100%,
        70% 80%,
        0% 80%
      );
      
      position: relative;

      &__title {
        display: inline-block;
        color: $color-white;
        z-index: 5;
        font-size: 5.5rem;
        vertical-align: middle;

        position: absolute;
        top: 50%;
        left: 45%;
        transform: translate(-50%, -50%);
      }
    }


---

### :after behind button


![](https://i.imgur.com/Yn0ht4Km.png =200x)



    .btn-primary {
      &,
      &:link,
      &:visited {
        display: inline-block;
        font-weight: bold;
        background-color: $color-secondary;
        color: $color-white;
        font-size: 5rem;
        text-decoration: none;
        text-align: center;
        padding: 0.5rem;
        border-radius: 50%;
        cursor: pointer;

        height: 70%;
        width: 15%;

        position: relative;
        left: 10%;
        top: 10%;
      }

      &:hover {
        &::after {
          height: 110%;
          width: 110%;
        }
      }

      &::after {
        content: '';
        background-color: $color-black;
        border-radius: 50%;
        height: 122%;
        width: 115%;
        display: inline-block;
        top: -0.7rem;
        left: -5.5%;
        transition: all 0.2s;
        
        position: absolute;
        z-index: -1;
      }

      &--2 {
        &,
        &:link,
        &:visited {
          left: 20%;
        }
    }
    

---

### CSS word-break Property
      word-break: break-all;
