HTML Code (index.html)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Basic SCSS Folder Structure</title> <!-- using google font --> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet"> <!-- importing custom css --> <link rel="stylesheet" href="css/main.css"> </head> <body> <h1>Heading 1</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, eum possimus fugiat magnam, delectus libero iusto laudantium quibusdam, totam repudiandae molestias ipsam adipisci facere corporis exercitationem quam voluptatum qui ducimus!</p> <div class="box"></div> </body> </html>
SCSS Code (scss/base/_reset.scss)
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
* {
max-height: 1000000px;
margin: 0;
padding: 0;
}
body {
color: $default-text-color;
background: $default-background-color;
font: 400 #{$default-font-size}/#{$default-line-height} $default-font-family;
min-width: $default-min-width;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
.gm-style img {
max-width: none
}
@media only screen and (min-width:1025px) {
a[href^=tel],
a[href^=skype],
a[href^=sms] {
cursor: default;
pointer-events: none;
}
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
SCSS Code (scss/base/_typography.scss)
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $headings-font-family;
font-weight: 500;
margin: 0 0 10px;
color: $headings-color;
}
h1 {
font-size: $h1-font-size;
}
h2 {
font-size: $h2-font-size;
}
h3 {
font-size: $h3-font-size;
}
h4 {
font-size: $h4-font-size;
}
h5 {
font-size: $h5-font-size;
}
h6 {
font-size: $h6-font-size;
}
p {
margin: 0 0 20px;
}
a {
color: $default-link-color;
text-decoration: none;
transition: color 0.3s linear;
&:hover,
&:focus {
text-decoration: none;
color: darken($default-link-color, 15%);
}
}
SCSS Code (scss/base/_mixins.scss)
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
@mixin hide-text {
overflow: hidden;
text-indent: 101%;
white-space: nowrap;
}
%listreset {
margin: 0;
padding: 0;
list-style: none;
}
@mixin transform ($value) {
-moz-transform: $value;
-ms-transform: $value;
-webkit-transform: $value;
transform: $value;
}
@mixin transition ($value) {
-moz-transition: $value;
-ms-transition: $value;
-webkit-transition: $value;
transition: $value;
}
@mixin placeholder {
&::-webkit-input-placeholder {
@content
}
&::-moz-placeholder {
opacity: 1;
@content
}
&:-moz-placeholder {
@content
}
&:-ms-input-placeholder {
@content
}
&.placeholder {
@content
}
}
SCSS Code (scss/base/_variables.scss)
// colors $black: #333; $white: #fff; $primary-color: #f00; // font family $primary-font: 'Montserrat', sans-serif; // body $default-text-color: $black; $default-background-color: $white; $default-font-size: 20px; $default-line-height: 1.7; $default-font-family: $primary-font; $default-min-width: 320px; // link $default-link-color: $primary-color; // headers $h1-font-size: 50px; $h2-font-size: 24px; $h3-font-size: 22px; $h4-font-size: 18px; $h5-font-size: 17px; $h6-font-size: 15px; $headings-font-family: $primary-font; $headings-color: $black;
SCSS Code (scss/main.scss)
@import 'base/variable';
@import 'base/mixins';
@import 'base/reset';
@import 'base/typography';
p {
color: $primary-color;
}
.box {
@include size(500px, 300px);
background: $primary-color;
}