Sass:-Syntactically Awesome Stylesheet by Shafeeq
- 1. Sass • Syntactically Awesome Stylesheet • Sass is a CSS pre-processor • Look like CSS • Sass is completely compatible with all versions of CSS • Sass reduces repetition of CSS and therefore saves time • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
- 2. Why Use Sass? • Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. • Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
- 3. CodeKit (Paid) Mac Compass.app (Paid, Open Source) Mac Windows Linux Ghostlab (Paid) Mac Windows Hammer (Paid) Mac Koala (Open Source) Mac Windows Linux LiveReload (Paid, Open Source) Mac Windows Prepros (Paid) Mac Windows Linux Scout-App (Free, Open Source) Windows Linux Mac When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. For example: Applications Command Line How to Use/install Sass?
- 4. How Does Sass Work? A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.
- 5. A Simple Example Let's say we have a website with three main colors: So, many times we type those HEX values. Instead of typing the above values a lot of times, we can use Sass and write this:
- 6. So, when using Sass, and the primary color changes, you only need to change it in one place.
- 7. Variables Variables as a way to store information that you want to reuse throughout your stylesheet.
- 8. Nesting When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
- 9. Partials You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.
- 10. Modules You don't have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a moduleUsing a file will also include the CSS it generates in your compiled output! Notice we're using @use 'base'; in the styles.scss file. When you use a file you don't need to include the file extension. Sass is smart and will figure it out.
- 11. Mixins Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.
- 12. Extend/Inheritance This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another.
- 13. Operators Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.
- 14. SASS AND MEDIA QUERIES SASS section.main { float: left; width: 65%; font-size: 16px; Line-height: 1.4; @media screen and (max-width: 800px) { float: none; width: auto; } @media screen and (max-width: 500px) { font-size: 12px; line-height: 1.4; } } CSS section.main { float: left; width: 65%; font-size: 16px; line-height: 1.4; } @media screen and (max-width: 800px) { section.main { float: none; width: auto; } } @media screen and (max-width: 500px) { section.main { font-size: 12px; line-height: 1.4; } }
- 15. THANK YOU!