SASS/SCSS

SASS training course is an easy-to-use styling language that helps reduce a lot of the repetition and maintainability challenges of traditional CSS. Learning Sass will not only let you scale styles when working on big web development projects, it will also make it much faster and more efficient to write reusable styles from scratch for smaller projects.

This SASS course will teach you how to use nesting, variables, mixins, placeholders, and functions to write more expressive and reusable styles. At the end of the course, you will be able to transition a CSS codebase to SCSS and style multiple websites.

  • Write professional Sass code and generate CSS code from it.
  • Realize designs much faster with less frustration.
  • Use variables to make designs more flexible and avoid repetitive code.
  • Use mixins to reuse existing solutions and built upon them without re-inventing the wheel
  • Use functions and operators to calculate flexible dimensions, colors and more.
  • Import fonts and existing Sass files into new designs to reuse them.
  • Use Sublime Text 3 confidently to write Sass code swiftly.

  • We will cover all setup required.
  • You need NO previous knowledge with Sass or Bootstrap.
  • You should know basic HTML & CSS.
  • You need basic computer skills to install and run applications.

  • You want to skyrocket your productivity when writing CSS code.
  • You want to keep up with current web design trends.
  • You want to write scaleable CSS code.
  • You want to avoid cluttering your code with repetitive selectors.
  • You want to make your designs much more flexible and easily create different variants of your beautiful designs.
  • You don't want to start from scratch in every project but have a flexible way to reuse existing designs to finish projects fast.
  • You want to build upon your Bootstrap knowledge and complement it with Sass to finish beautiful designs more effectively.

COURSE AGENDA

  • Your First Sass Stylesheet
  • Refactor CSS to SCSS
  • Variables and Nesting
  • Mixins and the & Selector
  • Sassy Parallax Banner
  • Mixins and the & Selector
  • Functions and Operations
  • Sass Bar Chart
  • Functions and Operations
  • Sustainable SCSS
  • Animated Company Logo
  • Sustainable SCSS