How can I get my sass landing page working on codepen? - css

Question

there are three files in three pens here, I've tried linking them all together but it still doesn't work. I'd appreciate the help thanks.
#import "reset";
#import "variables";
#import "mixins";
#main-nav{
background: $deepBlue;
ul{
width: 100%;
}
li{
float: left;
width: (100% / 6);
#include mQ(600px){
width: 100%;
}
}
a{
color: $offWhite;
text-decoration: none;
padding: 16px;
display: block;
text-align: center;
&:hover{
background: lighten($deepBlue, 6);
}
}
#include clearFix;
}
section h1{
margin: 40px 0;
text-align: center;
text-transform: uppercase;
color: $deepBlue;
font-size: $sectionHeading;
}
#services{
li{
float: left;
width: 33.33%;
box-sizing: border-box;
text-align: center;
}
img{
width: 60%;
margin: 20px 20%;
}
a{
text-decoration: none;
color: $deepBlue;
font-weight: bold;
&:hover{
color: complement($deepBlue);
}
}
#include clearFix;
margin-bottom: 60px;
}
.lead-banner{
#include banner;
text-align: right;
}
.lessons-banner{
#include banner;
text-align: left;
li{
text-transform: uppercase;
font-size: 20px;
max-width: 500px;
margin: 60px 0;
}
}
#projects li{
#include grid(6, 2%);
img{
width: 100%;
}
}
Here is the variables.sccs file
$deepBlue: #032f3e;
$sectionHeading: 28px;
$offWhite: #f8f9fb;
$bannerHeading: 46px;
here is the
reset.scss file
body {font-family: arial; background: #f8f9fb}
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
li { list-style: none; }
.wrapper{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
here is the compiled code
#mixin banner{
width: 100%;
position: relative;
color: white;
.banner-content{
position: absolute;
top: 50px;
width: 100%;
}
img{
width: 100%;
}
span{
font-size: $bannerHeading;
display: block;
text-transform: uppercase;
font-weight: bold;
#include mQ(3000px, 1200px){
font-size: 68px;
}
}
span.sub-title{
font-weight: normal;
margin-bottom: 30px;
}
#include mQ(1200px){
max-height: 640px;
overflow: hidden;
}
}
#mixin clearFix{
&:after{
content: "";
display: block;
clear: both;
}
}
#mixin grid($cols, $mgn){
float: left;
width: ((100% - (($cols - 1) * $mgn)) / $cols );
margin-right: $mgn;
margin-bottom: $mgn;
&:nth-child(#{$cols}n){
margin-right: 0;
}
}
#mixin mQ($args...){
#if length($args) == 1{
#media screen and (max-width: nth($args, 1)){
#content;
}
}
#if length($args) == 2{
#media screen and (max-width: nth($args, 1)) and (min-width: nth($args, 2)){
#content;
}
}
}
Here is the link to my pen
https://codepen.io/nezmustafa123/pen/OpEBov

Answer 1

you have to import your files in the settings of codepen and then the codepen import it