Skip to content

Sass

Basics

Set Up

Create folder "scss" Create file "main.scss" The extension automatically creates "css" folder and "main.css" file

body {
    background: blue;
}
# will be auto-compiled to css
# never modify the css file, only modify the scss file

Variables

$primary-color: #272727;
$accent-color: #ff652f;
$text-color: #fff;

body {
    background: $primary-color;
}

Maps

$font-weights: (
    "regular": 400,
    "medium": 500,
    "bold": 700
);

body {
    font-weight: map-get($font-weight,bold);
}

Nesting

.main {
    width: 80%;
    margin: 0 auto;

    #{&}_paragraph {
        font-weight: map-get($font-weight,bold);

        &:hover {
            color: pink;
        }
    } 
}
# & = the parent
# #{&} = everything before

Partial

In the "scss" folder, create a new file and name it "_resets.scss" (_means it is a partial) Also create a file called "_variable.scss" and copy all the variables to this file

# In _resets.scss
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
# The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page.

# In main.scss
@import './reset';
@import './variables';

Function

@function weight($weight-name) {
    @return map-get($font-weights, $weight-name);
}

.main {
    width: 80%;
    margin: 0 auto;

    #{&}_paragraph {
        font-weight: weight(regular);
    } 
}

Mixin

@mixin flexCenter($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

.main {
    @include flexCenter(row);
    width: 80%;
    margin: 0 auto;
}

Functions should be used to compute values and return values. Mixin should define styles.

# Light and Dark Themes
@mixin theme($light-theme: true) {
    @if $light-theme {
        background: lighten($primary-color, 100%);
        color: darken($text-color, 100%);
    }
}

.light {
    @included them($light-theme: true);
}
# if it's true, it will add the theme to css; if it's false, nothing will be added to css

$mobile: 800px;

@mixin mobile {
    @media (max-width: $mobile) {
        @content;
    }
}

.main {
    @include flexCenter(row);
    width: 80%;
    margin: 0 auto;

    @include mobile {
        flex-direction: column;
    }
}

Extension

.main {
    @include flexCenter(row);
    width: 80%;
    margin: 0 auto;

    #{&}_paragraph1 {
        font-weight: map-get($font-weight,bold);

        &:hover {
            color: pink;
        }
    } 

    #{&}_paragraph2 {
        @extend .main_paragraph1;

        &:hover {
            color: $accent-color;
        }
    }
}

Math Operations

.main {
    width: 80% - 40%;
}
# either both pixels or both percentages

An Example

create "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">
    <link rel="stylesheet" href="css/main.css">
    <title>Mike Smith Portfolio</title>
</head>
<body>
    <header>
        <div class="menu-btn">
            <span class="menu-btn_burger"></span>
        </div>

        <nav class="nav">
            <ul class="menue-nav">
                <li class="menu-nav_item active">
                    <a href="index.html" class="menue-nav_link">
                        Home
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="about.html" class="menue-nav_link">
                        About Me
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="projects.html" class="menue-nav_link">
                        My Projects
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="contact.html" class="menue-nav_link">
                        Contact Me
                    </a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="home">
            <h2>Hi! My Name In</h2>
            <h1 class="home_name">
                Mike <span class="home_name--last">Smith</span>
            </h1>
            <h2>
                Web Developer, Designer & Programmer
            </h2>

            <div class="social-icons">
                <a href="#!">
                    <i class="fab fa-twitter fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-facebook fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-instagram fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-github fa-2x"></i>
                </a>
            </div>

            <footer>&copy; Copyright 2019</footer>
        </section>
    </main>

    <script src="http://kit.fontawesome.com/6d2ea823d0.js"></script>
    <script src="js/main.js"></script>
</body>
</html>>

create "about.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">
    <link rel="stylesheet" href="css/main.css">
    <title>About Mike Smith</title>
</head>
<body>
    <header>
        <div class="menu-btn">
            <span class="menu-btn_burger"></span>
        </div>

        <nav class="nav">
            <ul class="menue-nav">
                <li class="menu-nav_item">
                    <a href="index.html" class="menue-nav_link">
                        Home
                    </a>
                </li>
                <li class="menu-nav_item active">
                    <a href="about.html" class="menue-nav_link">
                        About Me
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="projects.html" class="menue-nav_link">
                        My Projects
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="contact.html" class="menue-nav_link">
                        Contact Me
                    </a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="about">
            <div class="about_bio-image">
                <div class="about_bio">
                    <h2 class="text-secondary">BIO</h2>
                    <p>lorem</p>
                </div>
            </div>

            <div class="jobs">
                <div class="jobs_job">
                    <h2 class="text-secondary">2017 - Current</h2>
                    <h3>Google</h3>
                    <h6>Full Stack Developer</h6>
                    <p>Lorem</p>
                </div>
                <div class="jobs_job">
                    <h2 class="text-secondary">2015 - 2017</h2>
                    <h3>Miscrosoft</h3>
                    <h6>Front Developer</h6>
                    <p>Lorem</p>
                </div>
                <div class="jobs_job">
                    <h2 class="text-secondary">2012 - 2015</h2>
                    <h3>Web Design Co.</h3>
                    <h6>Graphic Designer</h6>
                    <p>Lorem</p>
                </div>
            </div>

            <div class="social-icons">
                <a href="#!">
                    <i class="fab fa-twitter fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-facebook fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-instagram fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-github fa-2x"></i>
                </a>
            </div>

            <footer>&copy; Copyright 2019</footer>
        </section>
    </main>

    <script src="http://kit.fontawesome.com/6d2ea823d0.js"></script>
    <script src="js/main.js"></script>
</body>
</html>>
create "projects.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">
    <link rel="stylesheet" href="css/main.css">
    <title>Mike Smith Projects</title>
</head>
<body>
    <header>
        <div class="menu-btn">
            <span class="menu-btn_burger"></span>
        </div>

        <nav class="nav">
            <ul class="menue-nav">
                <li class="menu-nav_item">
                    <a href="index.html" class="menue-nav_link">
                        Home
                    </a>
                </li>
                <li class="menu-nav_item active">
                    <a href="about.html" class="menue-nav_link">
                        About Me
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="projects.html" class="menue-nav_link">
                        My Projects
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="contact.html" class="menue-nav_link">
                        Contact Me
                    </a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="projects">
            <div class="projects_bio-image">
                <h1 class="text-secondary">My Projects</h1>
            </div>

            <div class="projects_items">
                <div class="projects_item">
                    <img src="img/project-1.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
                <div class="projects_item">
                    <img src="img/project-2.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
                <div class="projects_item">
                    <img src="img/project-3.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
                <div class="projects_item">
                    <img src="img/project-4.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
                <div class="projects_item">
                    <img src="img/project-5.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
                <div class="projects_item">
                    <img src="img/project-6.jpg" alt="My Project">
                    <div class="projects_btns">
                        <a href="#!" class="projects_btn">
                        <i class="fas fa-eye"></i>Preview</a>
                        <a href="#!" class="projects_btn">
                        <i class="fab fa-github"></i>Github</a>
                    </div>
                </div>
            </div>

            <div class="social-icons">
                <a href="#!">
                    <i class="fab fa-twitter fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-facebook fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-instagram fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-github fa-2x"></i>
                </a>
            </div>

            <footer>&copy; Copyright 2019</footer>
        </section>
    </main>

    <script src="http://kit.fontawesome.com/6d2ea823d0.js"></script>
    <script src="js/main.js"></script>
</body>
</html>>

create "projects.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">
    <link rel="stylesheet" href="css/main.css">
    <title>Mike Smith Projects</title>
</head>
<body>
    <header>
        <div class="menu-btn">
            <span class="menu-btn_burger"></span>
        </div>

        <nav class="nav">
            <ul class="menue-nav">
                <li class="menu-nav_item">
                    <a href="index.html" class="menue-nav_link">
                        Home
                    </a>
                </li>
                <li class="menu-nav_item active">
                    <a href="about.html" class="menue-nav_link">
                        About Me
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="projects.html" class="menue-nav_link">
                        My Projects
                    </a>
                </li>
                <li class="menu-nav_item">
                    <a href="contact.html" class="menue-nav_link">
                        Contact Me
                    </a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="contact">
            <h2>Contact Me..</h2>

            <div class="contact_list">
                <div class="contact_email">
                    <i class="fas fa-envelop"></i>Email
                    <div class="text-secondary">email@email.com</div>
                </div>

                <div class="contact_phone">
                    <i class="fas fa-mobile-alt"></i>Email
                    <div class="text-secondary">+1 (555) 555-5555</div>
                </div>

                <div class="contact_address">
                    <i class="fas fa-marker-alt"></i>Email
                    <div class="text-secondary">123 First St. Houston, TX</div>
                </div>

            <div class="social-icons">
                <a href="#!">
                    <i class="fab fa-twitter fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-facebook fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-instagram fa-2x"></i>
                </a>
                <a href="#!">
                    <i class="fab fa-github fa-2x"></i>
                </a>
            </div>

            <footer>&copy; Copyright 2019</footer>
        </section>
    </main>

    <script src="http://kit.fontawesome.com/6d2ea823d0.js"></script>
    <script src="js/main.js"></script>
</body>
</html>>

create "scss" folder create "main.scss" create "_config.scss" create "_menu.scss" create "_about.scss" create "_projects.scss" create "_contact.scss" create "_responsive.scss"

# In _config.scss
$primary-color: #272727;
$secondary-color: #ff652f;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@mixin transition-ease {
    transition: all 0.5s ease-in-out;
}

@function set-text-color($color) {
    @if (lightness($color) > 40%) {
        @return #000;
    } @else {
        @return #fff;
    }
}

@mixin media-md {
    @media screen and (min-width: 768px) {
        @content; 
    }
}

@mixin media-lg {
    @media screen and (min-width: 1024px) {
        @content; 
    }
}

@mixin media-xl {
    @media screen and (min-width: 1600px) {
        @content; 
    }
}


# In main.scss
@import 'config';
@import 'home';
@import 'menu';
@import 'about';
@import 'projects';
@import 'contact';
@import 'responsive'


body {
    background: $primary-color;
    color: set-text-color($primary-color);
    height: 100vh;
    # vh = viewport height
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1;
}

h1, h2, h3 {
    font-weight: 400;
}

a {
    color: #fff;
    text-decoration: none;
}

.text-secondary {
    color: $secondary-color;
}

header {
    position: fixed;
    z-idex: 2;
    width: 100%;
    padding: 1rem;
}

main {
    height: 100%;
    width: 100%;

    .social-icon {
        position: fixed;
        bottom: 1rem;
        left: 1rem;

        a {
            padding: 0.4rem;
            @include transition-ease;

            &:hover {
                color: $secondary-color;
            }
        }
    }
}

footer {
    font-size: 1rem;
    position: fixed;
    bottom: 0.4rem;
    right: 1rem;
    text-align: right;
    padding: 1rem;
    color: set-text-color($primary-color);
}

# In home.scss
.home {
    height: 100%;
    padding-top: 40vh;
    overflow: hidden;
    align-items: center;
    text-align: center;
    background: 
        linear-gradient(
            to right,
            rgba($primary-color, 0.9),
            rgba($primary-color, 0.3)
        ),
        url('.../img/model-1.jpg') center top;
    background-size: cover;

    &_name {
        font-size: 5 rem;
        padding-bottom: 1rem;
        margin-bottom: 1 rem;
        border-bottom: 2px solid set-text-color($primary-color);

    &--last {
        color: $secondary-color;
        font-weight: 700;
    }
    }
}

# In _menu.scss
.menue-btn {
    position: absolute;
    z-index: 1;
    right: 1rem;
    top: 1rem;
    height: 20px;
    width: 28px;
    cursor: pointer;
    @include transition-ease;

    &_burger {
        position: absolute;
        right: 0;
        top: 0.5rem;
        width: 28px;
        height: 3px;
        background: set-text-color($primary-color);
        @include transition-ease;

        &::before {
            content: '';
            position: absolute;
            top: -8px
            width: 28px;
            height: 3px;
            background: set-text-color($primary-color);
            @include transition-ease;
        }
        &::after {
            content: '';
            position: absolute;
            top: 8px
            width: 20px;
            height: 3px;
            background: set-text-color($primary-color);
            @include transition-ease;
        }

        &.open {
            transform: rotate(720deg);
            background: transparent;

            &::before {
                transform: rotate(45deg) transalte(5px, 8px);
            }

            &::after {
                width: 28px;
                transform: rotate(-45deg) translate(3px, -7px);
            }
        }

    }
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    opacity: 0.98;
    visibility: hidden;

    &.open {
        visibility: visible;
    }

    .menu-nav {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        background: $primary-color;
        list-style-type: none;
        padding-right: 1rem;
        transform: translateY(-100%);
        @include transition-ease;

        &.open {
            transform: translateY(0);
        }

        &_item {
            transform: translateX(100vw);
            @include transition-ease;

            &.open {
                transform: translateX(0)
            }

            &.active > a {
                color: $secondary-color;
            } 
        }

        &_link {
            display: inline-block;
            font-size: 2rem;
            text-transform: uppercase;
            padding: 2rem 0;
            font-weight: 300;
            @include transition-ease;

            &:hover {
                color: $secondary-color;
            }
        }
    }
}

@for $i from 1 through 4 {
    .menu-name_item: nth-child(#{$i}) {
        transition-delay: ($i * 0.1s) +0.15s;
    }
}

# In about.scss
.about {
    padding-bottom: 2rem;

    &_bio-image {
        height: 50vh;
        width: 100%;
        background: 
        linear-gradient(
            to right,
            rgba($primary-color, 0.9),
            rgba($primary-color, 0.3)
        ),
        url('.../img/model-1.jpg') center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    p {
    margin-bottom: 2rem;
    }

    &_bio {
        width: 80%;
        text0align: center;

        .text-secondary {
            padding-bottom: 1rem;
        }

        .jobs {
            width: 60vw;
            margin: 2rem auto 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 2rem;

            &_job {
                background: lighten($primary-color, 10%);
                padding: 0.5rem;
                border-bottom: 5px solid $secondary-color;

                h2, h3 {
                    margin: 0.5rem 0;
                }
                h6 {
                    margin: 0.3rem 0;
                }
            }
        }

        .social-icon {
            display: flex;
            flex-direction: column;
        }
        footer {
            transform:
                rotate(90deg)
                translate(-3rem, -5rem);
        }
    }
}

# In projects.scss

.projects {
    padding-bottom: 2rem;

    &_bio-image {
        height: 30vh;
        width: 100%;
        background: 
        linear-gradient(
            to right,
            rgba($primary-color, 0.9),
            rgba($primary-color, 0.3)
        ),
        url('.../img/model-1.jpg') center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    .text-secondary {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}


&_items {
    width: 60vw;
    margin: 2rem auto 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
}

&_item {
    position: relative;
    border-bottom: 5px solid $secondary-color;
    overflow: hidden;
    cursor: pointer;

    img {
        width: 100%;
    }

    &::after {
        content: '';
        postion: absolute;
        top: 100%;
        left: 0;
        height: 100%;
        width: 100%;
        background: $secondary-color;
        opacity: 0;
        @include transition-ease;
    }

    &:hover {
        &::after {
            top: 0;
            opacity: 0.9;
        }
        .projects_btn {
            opacity: 
        }
    }
}

&_btn {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    text-align: center;
}

&_btn {
    opacity: 0;
    column-rule: set-text-color($secondary);
    @include transition-ease;

    &:hover {
        color: set-text-color(secondary-color($secondary-color));
    }

}
            &_job {
                background: lighten($primary-color, 10%);
                padding: 0.5rem;
                border-bottom: 5px solid $secondary-color;

                h2, h3 {
                    margin: 0.5rem 0;
                }
                h6 {
                    margin: 0.3rem 0;
                }
            }
        }

        .social-icon {
            display: flex;
            flex-direction: column;
        }
        footer {
            transform:
                rotate(90deg)
                translate(-3rem, -5rem);
        }
    }
}

# In contact.scss
.contact {
    height: 100%;
    padding-top: 40vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: 
        linear-gradient(
            to right,
            rgba($primary-color, 0.9),
            rgba($primary-color, 0.3)
        ),
        url('.../img/model-1.jpg') center top;
    background-size: cover;

    h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    &_list {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
        font-size: 1.5rem;
    }

    .social-icons {
        position: initial;
        margin-top: 2rem;
    }
}

# In _responsive.scss
@include media-md {
    .menu-btn {
        visibility: hidden;
    }

    .nav {
        visibility: visible;

        .menu-nav {
            display: block;
            transform: translateY(0);
            height: 100%;
            background: transparent;
            text-align: right;

            &_item {
                display: inline;
                padding-right: 1.5rem;
            }

            &_link {
                font-size: 1.5rem;
            }
        }
    }

    .about_bio {
        font-size: 1.5rem;
    }

    .projects {
        &_bio-image {
            height: 40vh;
        }
        &_items {
            grid-template-columns: repeat(2, 1fr);
        }
        .text-secondary {
            font-size: 3rem;
        }
    }

    .contact_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@include media-lg {
        .projects {
        &_items {
            grid-template-columns: repeat(3, 1fr);
        }
    }
        .contact_list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@include media-xl {
    .project_bio-image {
        height: 50vh;
    }
}

const menuBtn = document.querySelector('.menu-btn');
const hamburger = document.querySelector('.menu-btn_burger');
const nav = document.querySelector('.nav');
const menueNav = document.querySelector('menue-nav')
const navItem = document.querySelectorAll('.menu-nav_item');

let showMenu = false;

menuBtn.addEventListener('click', toggleMenu);

function toggleMenu() {
    if(!showMenu) {
        hamurger.classList.add('open');
        nav.classList.add('open');
        menu.classList.add('open');
        navItems.forEach(item => item.classList.add('open'));

        showMenu = true;
    } else {
        hamburger.classList.remove('open');
        nav.classList.remove('open');
        menu.classList.remove('open');
        navItems.forEach(item => item.classList.remove('open'));

        showMenu = false;
    }
}