Sass in 100 Seconds

syntactically awesome stylesheets or sass is a language that can extend your css with super powers modern uis are extremely complex and if you attempt to build one with plain css you'll find yourself repeating yourself often sas comes to the rescue by providing a compiler that allows us to write style sheets in a completely different language well two different languages to be exact the original indented syntax that you find in dot sass files removes the syntactic salt of semicolons and curly braces [Applause] [Music] but the more popular version is the superset syntax that you find in scss files here you can write regular css then extend it with additional bonus features as needed sas has been around for nearly 15 years and one of its original killer features was variables use a dollar sign to name a variable then reference it somewhere else in your code now if that value ever changes you only have to update one line of code css introduced its own native variables a few years ago but the advantages don't stop there killer feature number two is nesting in many cases classes are used as name spaces which means they're often duplicated over and over again we can avoid this duplication by nesting styles inside the parent by default these classes will apply to descendant elements or they can be applied to a direct sibling by using the ampersand which itself is a tool that tells sas to combine the parent selector with the nested child selector now one other issue with css is that you'll often find yourself including a similar group of styles on multiple classes mix-ins allow you to encapsulate a group of styles then apply those styles anywhere in your code using the include keyword mixons can also take arguments to create a large number of similar classes programmatically like a bunch of different colored buttons for example in addition sas provides a whole suite of tools to help you write more programmatic code use if or else in a mixin for conditional logic or create an array of values with a variable then loop over them with each and you might even extract all this logic into a reusable function or sas might already have a built-in function for you ready to go if you need to adjust a color you can use the lighten or darken functions to adjust a color by a predictable value when you're finished building a beautiful ui the compiler will take your code and convert it into valid css that can run in the browser this has been sas in 100 seconds but before you go here's one more bonus pro tip when working with nested code it can sometimes be hard to figure out exactly which set of braces you're inside of in vs code enable the bracket pair colorizer extension to give each set of braces their own unique color make sure to hit the like button if you want to see more short videos like this thanks for watching and i will see you in the next one

Channel: Fireship

Views: 147,944

Rating: 4.9946761 out of 5

Keywords: webdev, app development, lesson, tutorial, scss, sass, css, sass tutorial, 100 seconds of code, web design, css tips

Id: akDIJa0AP5c

Length: 2min 31sec (151 seconds)

Published: Tue Apr 27 2021