The As{SASS}ination of CSS

This talks about the advancement of SASS over pure CSS, the advantages of SASS, its features and how it solves the problems of pure CSS.

Transcript

1. The As{SASS}ination of CSS By Ursula Okolie
2. URSULA OKOLIE @Urluchy Budding software developer Aims to write a billion lines of code
3. WHAT IS CSS? - Stands for “Cascading Style Sheets”. - It is a stylesheet language used to describe the presentation of a document written in HTML and XML. - It is used to style markup languages. - CSS describes how elements should be rendered on screen, on paper, in speech or on other media.
4. Why the As{SASS}ination? - Organizing large stylesheets is very tiring. - Lack of variable names. - CSS can be really confusing because of its many levels (CSS 1, CSS 2, CSS 3). - CSS cannot perform logical operations.
5. CSS PREPROCESSORS CSS preprocessors are programs that let you generate CSS from the pre-processor’s own unique syntax. They generally add some features that do not exist in pure CSS, while giving us a very structured way of writing stylesheets.
6. What is SASS? - Stands for “Syntactically Awesome Stylesheets”. - Sass is a stylesheet language that is compiled to CSS. It allows you to use variables, nested rules, mixins, functions and more, with a fully CSS-compatible syntax. - SASS helps keep large stylesheets organized and makes it easy to share design within and across projects.
7. SASS vs SCSS
8. Why SASS? - The ability to define variables - The ability to define mixins - Its operational functions such as “lighten” and “darken” - It uses nested syntaxes
9. VARIABLES Variables in SASS and SCSS always start with a dollar sign ($)
10. MIXINS Creating a mixin is simple and easy! You just have to add a “@mixin” followed by the mixin name before the CSS block.
11. NESTING
12. FUNCTIONS They allow you to define complex operations that are reusable throughout your stylesheet. Examples: - lighten($color, $amount) - darken($color, $amount) - hue($color) - adjust-hue($color, $degree)
13. OTHER FEATURES - Comments: Multiple lines in SCSS are displayed the same way in CSS but inline comments are removed. - SASS comes with “@for” for iteration and control flow. These can be used with mixins and functions.
14. THANK YOU!