31. Refactor CSS with SCSS
- Here, we'll do a quick refactor of our CSS.
- Then, we'll utilize SCSS to do an even better refactoring.
###app/assets/stylesheets/application.css.scss
... // Typography Styles h1, h2, h3 { font-family: 'Open Sans', sans-serif; } // Background Gradient .navbar, .home-callout { /* Gradient provided by @_ighosh at uiGradients.com */ background: #00c6ff; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #00c6ff , #0072ff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #00c6ff , #0072ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } // Nav Styles .navbar { border: none; } .navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a { color: white; &:hover { color: white; opacity: 0.75; } } // Home Page Styles .home-callout { color: white; margin-top: -20px; padding-top: 50px; padding-bottom: 100px; }
###Terminal
git add . git commit -m "Refactored with Sass" git push origin pages_and_layout