~The Code for Functions and Mixins~
6/3/2024
The Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href=".\css\main.css">
<title>Sass</title>
</head>
<body>
<div class="main">
<p class ="main__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus rem voluptatum accusantium itaque atque eum rerum velit veniam, ratione architecto, officiis ab impedit ut assumenda quisquam. Ipsum autem laboriosam illum nobis facere, unde ea, aut nesciunt eius, a voluptas non iste consequatur soluta molestiae doloribus quae esse iusto? Vel, id!</p>
<p class ="main__p">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus rem voluptatum accusantium itaque atque eum rerum velit veniam, ratione architecto, officiis ab impedit ut assumenda quisquam. Ipsum autem laboriosam illum nobis facere, unde ea, aut nesciunt eius, a voluptas non iste consequatur soluta molestiae doloribus quae esse iusto? Vel, id!</p>
</div>
</body>
</html>
main.scss
@import'./resets';
@import'./variables';
@function weight($weight-name) {
@return map-get($font-weights, $weight-name);
}
$font-weights:(
"regular": 400,
"medium": 500,
"bold": 700
);
$font-colors: (
"light": #f2e8d4,
"middle": #9b8559,
"dark": #1e1401
);
@mixin flexCenter($direction) {
display:flex;
justify-content: center;
align-items: center;
gap: 35px;
flex-direction: $direction;
}
body {
background: $primary-color;
font-weight: map-get($font-weights, regular);
color: map-get($font-colors, light);
}
.main {
@include flexCenter(row);
padding-top: 5%;
width: 75%;
margin: 0 auto;
#{&}__p {
font-weight:weight(medium);
&:hover {
color:chocolate;
}
}
}
_variables.scss
$primary-color: #09191F;
$secondary-color: #153B47;
$accent-color: #3D606E;
$text-color: #fff;
_resets.scss
* {
box-sizing: border-box;
margin:0;
padding:0;
}