Previous Lecture Complete and continue  

  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