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