Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Sass - Dont Repeat Your CSS
Rating: 4.5 out of 5(28 ratings)
1,991 students
Created byArbaoui Mehdi
Last updated 6/2019
English

What you'll learn

  • Using the Sass Preprocessor to create a more organized and structured CSS code
  • Being more productive by creating a Maintainable CSS code
  • Avoid Repeating the same code

Explore related topics

Course content

6 sections • 32 lectures • 2h 3m total length

  • Introduction1:01

    Discover how Sass helps you avoid repetition by addressing pitfalls like redundancy and repetitive code, and explore the two forms of Sass syntax and the basics of its rules.

  • What's Wrong with CSS?2:42

    avoid splitting styles into many imports, as each extra request slows site performance. keep colors and shared styles in one place to reduce repetition and maintenance effort.

  • What are CSS Preprocessors, and why you should one of them?3:34

    Explore css preprocessors like sass, less, and stylus, using variables, functions, and mixins to avoid repetition, import modular files, and generate a single css file with vendor prefixes.

  • What is Sass, and Should I use Sass or SCSS syntax?2:17

    Explore what sass is and compare sass and scss syntax, including sass script extensions, css compatibility, and the indented dot syntax versus braces for blocks.

  • Quiz
  • Things to Remember1:23

Requirements

  • Be able to write basic HTML and CSS
  • Windows, macOS or Linux
  • The text editor you already have works just fine - Preferably the free IDE VSCode

Description

Course Goal

The goal of this course is not just teaching you how to write Sass code, but the goal is as the title of this course present is Don’t Repeat Your CSS, the concept of this course is teaching you the fundamentals of this wonderful Sass language which will take your productivity to the next level.


Sass or CSS?

We’ll start first by understanding why we should really move from CSS to a preprocessor like Sass, and we’ll go through the main goal of preprocessing CSS.


Set up the environment

We’ll set up an environment that allows us to use Sass in our machine.


Sass fundamentals

Then we’ll go to each Sass fundamentals including nesting selectors, variables, comments, import and partials, mixins and inheritance, these features are considered as the backbone of the Sass language.


Control Flow directives

We’ll also learn how to include conditions and loops into our Code which will add more power to the mixin Sass features, where we’ll generate specific code depending on a specific situation.


Custom Functions

And at the end we’ll use some built-in Sass functions which they are used by most of the popular frameworks like Bootstrap, we’ll use some of them, then we’ll finish creating our custom Sass function.

We start from the basics and we end up creating a custom Sass function, this how this course will help beginners and even advanced front-end developers to understand how every feature of Sass really works.


Conclusion

So I look forward to spending this time with you during the course to learn every aspect of Sass, and by finishing this course you’ll create a more organized and maintainable Sass code.


Who this course is for:

  • You want to Improve your CSS productivity
  • You want to have better code organization and structure
  • You want to understand what's a pre-processor
  • You want to write more maintainable CSS
  • You want to write a more natural syntax and easy to read

Report abuse