What is-sass-by-lucas-castro
0 likes536 views
The document discusses the benefits of using Sass, a CSS extension language that enhances web development through features like variables, nesting, mixins, and functions to reduce code complexity and improve efficiency. It highlights the challenges of CSS, such as repetition and selector issues, and explains how Sass addresses these problems. The author encourages developers to adopt Sass for cleaner, more manageable code and suggests starting with its basic features before progressing to more advanced functionalities.
![• Definition:
• @mixin name ($variables: value) {
[mixin output]
}
• Call:
• @include name ($values);
Mixins — Syntax](https://image.slidesharecdn.com/what-is-sass-by-lucas-castro-150605004234-lva1-app6891/85/What-is-sass-by-lucas-castro-24-320.jpg)
![• Definition:
• @function name ($variables: value) {
[operations on $variables]
@return $variables;
}
• Call:
• name ($values)
Functions — Syntax](https://image.slidesharecdn.com/what-is-sass-by-lucas-castro-150605004234-lva1-app6891/85/What-is-sass-by-lucas-castro-28-320.jpg)
![• Selector:
• [selector] { }
• Placeholder — use percentage symbol (%) prefix:
• %placeholder { }
• Call:
• @extend [selector or placeholder];
Inheritance — Syntax](https://image.slidesharecdn.com/what-is-sass-by-lucas-castro-150605004234-lva1-app6891/85/What-is-sass-by-lucas-castro-31-320.jpg)
What is-sass-by-lucas-castro
- 1. What is ? And Why You Should Be SASSy by Lucas Castro
- 4. Laziness is Good! • Cultural notion that designers and devs think differently (right VS left). • Thinking adapts to the activities we do. • Design lends itself to uniqueness. • Coding lends itself to "laziness."
- 5. Laziness leads to Innovation • Smart laziness = drive to be efficient. • Developers are always finding ways to be more efficient. • When the tools are inadequate, we build new tools. • This notion powers the open-source community.
- 6. HTML is Repetitive • HTML + CSS form the basis for web development. • By itself, HTML is static. • Forces manual repetition, because it cannot be setup as modules or templates. • We quickly learn this in practice, when a client asks for a change to repetitive sections, like headers and footers. • Problem can be solved with templating languages and server-side languages.
- 7. CSS is Repetitive • Properties are often repeated (e.g., border radius and shadows). • Values are often repeated throughout a site (e.g., colours and font properties). • Selector hell…
- 9. Don’t Repeat Yourself The “DRY” Principle
- 10. –Chris Peters “A basic strategy for reducing complexity to manageable units is to divide a system into pieces.”
- 11. Keeping Your Styles DRY • Not repeating property: value pairs. • Not repeating values. • Not repeating selectors. • Making your code modular. • Making code more legible and manageable.
- 12. What is ?
- 13. What is SASS? • Official site calls it "CSS with superpowers." • SASS is a CSS extension language. • Has many powerful features beyond what static CSS can provide. • SASS is a preprocessing language that compiles into CSS
- 14. Reasons to Use SASS • Reduces development time. • Follows the DRY principle. • Makes code cleaner and more legible.
- 15. Features Focusing on High Impact for New Users
- 16. • Fixes selector hell. • Specific context » generic children » interaction states Nesting –Mario Ricalde “The Inception Rule: don’t go more than four levels deep.”
- 17. • Children go inside a parent’s { } brackets. • Ampersand (&) refers to current chain of selectors. • Useful for adding selectors before the current chain. • Useful for adding classes and pseudo-classes. Nesting — Syntax
- 20. • E.g., colour palette, box padding, border radius, font sizes, font families, etc. • Keep values DRY. • Organize repeatable values in one place. • Can be used with operators, mixins, and functions. Variables
- 21. • Dollar symbol ($) prefix. • Follows the same rule as CSS properties. • $name: value; Variables — Syntax
- 23. Mixins • Output lines of SASS. • Contents can be the same as SASS in general. • E.g., selectors, properties, values. • Can call functions and other mixins. • AVOID using mixins when all you need is a value (see section on Functions).
- 24. • Definition: • @mixin name ($variables: value) { [mixin output] } • Call: • @include name ($values); Mixins — Syntax
- 27. Functions • Return a value. • Can be used anywhere that calls for a value. • Typically used for performing operations and running values through other functions. • SASS has dozens of built-in functions for manipulating colours, opacity, strings, numbers, lists, and arrays. • Power some of the best SASS libraries.
- 28. • Definition: • @function name ($variables: value) { [operations on $variables] @return $variables; } • Call: • name ($values) Functions — Syntax
- 30. Selector Inheritance • Used to extend styles of one element to others. • Powerful way to avoid repetition. • Placeholders can be used to minimize CSS footprint.
- 31. • Selector: • [selector] { } • Placeholder — use percentage symbol (%) prefix: • %placeholder { } • Call: • @extend [selector or placeholder]; Inheritance — Syntax
- 33. Selector Inheritance • CAUTION: Child styles from the source element will be passed on to the target of the @extend directive.
- 35. Partials • Allow for modularity with SASS code. • Unlike CSS @import, SASS @import is compiled. • No additional HTTP request is made.
- 36. • Underscore (_) prefix. • Will not compile individually. • Call: • @import “partial”; Partials — Syntax
- 38. Putting It All Together A Sample Project
- 40. Getting Started –Zig Ziglar “You don't have to be great to start, but you have to start to be great.”
- 41. Getting Started • SCSS syntax is a superset of, and fully compatible with, CSS! • Simplest, and most high impact, way to start is using variables and nesting. • Work your way up to using selector inheritance, mixins, and functions.
- 42. Getting Started — Tools • Can use Compass to compile via the command line. • Free apps include Scout and Koala. • Excellent paid app: Prepros. • Less featured-rich free version available. • http://prepros.io
- 43. Getting Started — Tools • Explore using an on-demand grid system, such as Neat or Susy. • Powered by SASS variables, mixins, and functions. • Lightweight CSS output, compared to frameworks such as Bootstrap and Foundation. • Neat pairs nicely with Bourbon, which is a lightweight mixin library.
- 44. Time to Get S SSy
- 45. Any Questions?