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

​​​​.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

​​​​.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;