Animated effect and styles for navigation bar with Sass scss

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to use sass to convert scss to css
You will learn how to work with variables
You will learn funtion of list-style and how to add border-right
You will learn different transform functions translateX and translateY
You will learn how to style a simple list to a navigation bar

Requirements

Any text editor. (Brackets, Atom, Notepad++)
Basic HTML knowledge
Basic SCSS code knowledge
SASS
Local server (Wampserver)
Any browser

Difficulty

Intermediate

Description

In this tutorial you will learn how to use Sass on your computer. You need ruby instalation for it and once you installed you will be able to translate sass scss files to css. With the help of variables you will see the power of Sass scss and we will style a navigation bar with using this variables on Sass scss. There for you need index.html file with navigaton bar codes in it. With before/after examples you will be able to see what codes are doing. After this tutorial you will be able to use variables in your Sass sytlesheets. With this easy codes you can make different navigation bars for your websites. To follow this tutorial you can use this html codes in your index.html file.

font-awesome css https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<body>
   <ul>
       
    <li>
       <a href="#">
        <div class="icon">
           <i class="fa fa-home" aria-hidden="true"></i>
           </div>
            <div class="name"><span data-text="Home">Home</span></div>
        </a>
       </li>
       <li>
       <a href="#">
        <div class="icon">
           <i class="fa fa-download" aria-hidden="true"></i>
           </div>
            <div class="name"><span data-text="Download">Download</span></div>
        </a>
       </li>
       <li>
       <a href="#">
        <div class="icon">
           <i class="fa fa-cogs" aria-hidden="true"></i>
           </div>
            <div class="name"><span data-text="Services">Services</span></div>
        </a>
       </li>
       <li>
       <a href="#">
        <div class="icon">
           <i class="fa fa-file-text-o" aria-hidden="true"></i>
           </div>
           <div class="name"><span data-text="About">About</span></div>
        </a>
       </li>
       <li>
       <a href="#">
        <div class="icon">
           <i class="fa fa-envelope" aria-hidden="true"></i>
           </div>
            <div class="name"><span data-text="Contact">Contact</span></div>
        </a>
       </li>
        
    </ul>
    
</body>



Video Tutorial

Curriculum

Image zoom effect with Sass

Proof of Work Done
https://github.com/omersurer