Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Learn Sass (Advanced CSS3) From Scratch
Rating: 4.7 out of 5(8 ratings)
1,011 students

Learn Sass (Advanced CSS3) From Scratch

Take your CSS to the next level & Speed up your web development process with Sass
Created bySolly Gody
Last updated 12/2020
English
English [Auto],

What you'll learn

  • Use Sass in Real World Projects
  • Use VS code editor that works best for your environment and workflow
  • Write professional Sass code and generate CSS code from it.
  • Use variables to make designs more flexible and avoid repetitive code.
  • Use and understand Variables and Imports to make your stylesheets incredibly flexible and easy to navigate
  • Style websites using Sass with confidence and ease
  • Use mixins to reuse existing solutions and built upon them without re-inventing the wheel
  • Understand best practices for styling scalable websites
  • Code Mixins in order to save keystrokes and recycle CSS styles

Course content

2 sections • 18 lectures • 55m total length

  • Install our Code Editor VS Code9:49

    Install VS Code, create a project folder, configure the editor with extensions like Material Icon Theme and Live Server, and launch your first web page in a browser with auto-reload.

  • How To Use SASS in VS Code.5:11

    Learn how to use sass in VS Code by creating a project folder, installing a sass compiler extension, and enabling live server with Chrome for testing.

  • SASS in Action1:24

    Explore sass in action by using variables and nesting to style a lemonade stand website, and edit the provided project to compare scss and css outputs.

  • How to use Nesting Selectors3:30

    Learn nesting in Sass to organize selectors by placing children inside a parent, reducing repetition and clarifying dom relationships while previewing results in the browser.

  • How to use Nesting Properties1:41

    Learn how to use nesting properties in Sass selectors to apply border and color styles inside the banner class, and see live changes in the browser.

  • How to use Variables3:28

    Learn how Sass variables store reusable values like fonts, colors, and sizes, so updating one value reflects across selectors; grasp local scope and the global option for global accessibility.

  • Sass Data Types1:56

    Explore Sass data types, including numbers with units, strings in quotes, booleans, and null, then declare a variable and assign it to width and height in the icon class.

  • How to use Maps and Lists4:37

    Learn to work with Sass lists and maps, define and access color themes using variables like primary and accent, and apply map-get to retrieve values for styling components.

  • Conclusion1:00

    Explore Sass concepts like nesting with child and parent selectors to avoid repetition, and use variables and data types such as numbers, strings, booleans, null, lists, and maps.

  • Quiz 1

Requirements

  • The course covers all required setup & installation
  • No previous knowledge or experience necessary with Sass or Frameworks
  • You should know basic HTML & CSS.
  • You need basic computer skills to install and run applications.

Description

Sass (Syntactically awesome stylesheets) is a CSS preprocessor.

  • Sass allows to write more maintainable and more concised CSS

  • Sass allows to use great CSS features with superpowers.

  • Some features include:

    • Writing and defining Variables

    • Clear inheritance with Nested Rules

    • Using Mixins as re-usable objects

    • Doing maths with the operators (+, -, *, /) and functions

  • And, it is actively supported by a large community of developers to stay ahead.

Why use SASS ?

While CSS is a great language, it has some limitations.

For example, if you have a color code used multiple times in your stylesheet, you need to edit this one multiple times to update your design. Very tedious process!

Sass is the most reliable, stable, and powerful professional grade CSS extension language. It has been chosen as the premier CSS extension language.

Sass is great for the following reasons. :

  • Less code and repetition - allows to cut down one code and save time

  • The stylesheet are formatted nicely with a more dynamic code

  • It makes logical sense to break out CSS into multiple files with the feature

Every web developer or front-end UI engineer should use a pre-processor language over traditional CSS


In SASS (Advanced CSS3) Course, you will discover the power of Sass and learn to take your CSS to the next level. With several demonstrations and examples. you will see the power of the pre-processor language.


=> The objectives of this course is to help you

  • create smarter and cleaner stylesheets,

  • cut down on code,

  • keep your code DRY (Don’t Repeat Yourself) and organized.

Who this course is for:

  • CSS developers who want to update their CSS skills to the most modern level
  • CSS developers who want to expand their toolset to Sass
  • Front-end developers who want to finally understand how CSS works behind the scenes
  • Fron-end developers who want to write scaleable CSS code.
  • Fron-end developers who want to avoid cluttering your code with repetitive selectors.
  • Fron-end developers who want to make your designs much more flexible and easily create different variants of your beautiful designs.
  • In general: anyone who wants to truly master CSS!

Report abuse