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


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