Basic SCSS Folder Structure

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

Share this

Related Posts