style.scss
@import "placeholder";
div {
font-size: $size * 1;
font-family: "Agency FB", sans-serif;
color: automaticContrast($link-color, $color); -> SASS predefined lighten function
top: 10px;
bottom: 30px;
margin: 100px;
padding: $deger;
line-break: strict;
line-height: 20%;
border: 1px dashed $color;
ul{
li{
text-align: center;
font-family: Andalus, cursive;
font-size: nameOfFunction(30px);
color: lighten($color, 85%); -> SASS predefined lighten function
margin: 3px;
padding-left: 3px;
padding-right: 20px;
bottom: 30px;
top:2px;
}
}
}
_functions.scss
@function nameOfFunction($variable){
@return $variable + 30;
}
@function automaticContrast($backgroundColor,$textColor){
@if lightness($backgroundColor) < 50%{
@return lighten($textColor, 30%);
}
@else {
@return lighten($textColor, 50%);
}
}