SASS syntax and features explained
•
6 likes•1,287 views
SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows for nesting, variables, mixins and other powerful features to help write cleaner, more maintainable CSS. It helps achieve the DRY principle by eliminating repeated code and allowing logical structuring. Some key SASS features include nesting, variables and scopes, mixins, extends and interpolation. SASS files are compiled to normal CSS files for use in browsers. Using SASS can help large development teams work on CSS in a more organized and efficient way.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (14)
Similar to SASS syntax and features explained
Similar to SASS syntax and features explained (20)
Recently uploaded
Recently uploaded (20)
SASS syntax and features explained
- 1. SASS BY - Neha Sharma (nehha255@gmail.com) Syntactically Awesome Style Sheets
- 2. AGENDA Part One – Introduction • What is SASS • Why we need SASS • SASS vs SCSS • Let’s meet the SASS Part Two – Syntax • Nesting • Variables and Scope • !default • !global • Data Types • @extend and @extend only • Mixins • & • Interpolation #{} • @at-root
- 3. We love CSS It’s a question not a statement.
- 4. CSS and Issues • Lot of CSS3 Vendor Prefixes • Repeated code • Changing value in single file is nightmare • Big team working on same and big css file is issue • No logic base styling
- 5. What you want to change? Cleaner code, Logical Code, non-repeated code, less pain to write and maintain and much more…
- 6. Why SASS?
- 7. What is SASS? • Scripting language • Syntactically Awesome stylesheet • CSS Pre- Processor – Compile the SASS/SCSS files to CSS • Developed in 2007 • Full css3 compatible • Helps in writing clean, DRY-approach CSS
- 8. Advantages of SASS • DRY – Don’t Repeat Yourself • Modules • Lots of features • Mathematical calculations • Conditional statements • Functions and much more
- 9. SASS and Ruby • Ruby is required ONLY to install SASS.
- 10. SASS on Production? • You need SASS only for your local development. • SASS is not required to be configured on the SERVER
- 11. SASS and IE/Error handling It works on IE and code will only lead to broken css on your page
- 12. .sass vs .scss .sass o came first o different from the CSS syntax o Forget the semicolons and parenthesis .scss o superset of CSS o Syntax is same but with new features of SASS o Semicolons and Parenthesis are required
- 13. Let’s Meet the SASS
- 14. Nesting {} • SASS use the nested code. • Nested code helps in making the code cleaner and easier to read and maintain • It helps in achieving DRY
- 15. Variables • Container of the value
- 16. Scopes in Variables • As any other language SASS also comes with the scopes. • Global and Local
- 18. !global
- 19. !default • You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.
- 20. Data types • Numbers • Strings • Colors • Boolean • Null • List • Maps
- 22. @extend • @extend helps in the inheritance of styling and helps us in the repeating the code.
- 23. @extend Only (%) • When you don’t want to repeat the css.
- 24. mixin • Mixin are the most useful and powerful feature of the SASS [Define, Include , arguments] • It helps in making the repeated code declared once and use it n number of times. • You can have the mixin with arguments too, Defaults, Varibales, maps, content, to mixin
- 25. mixin
- 26. Pros and Cons of Mixin Pros: o DRY approach o Maintains the quality and consistency of the code o Lot of complexity can be handle through the mixin CONS: o With each include of mixin new css is generated which leads to the lot of duplicity of the code o Could become little hard to maintain
- 27. & Operator & in SASS refers to the current parent selector
- 28. #{} Interpolation You can use variables in selectors & property names using #{}
- 29. @at-root The @at-root directive causes one or more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors
- 30. Best Practice o Make a single file to create your variables o Make a single file to create your mixin o Make a single file to create Overloading of the libraries and 3rd party plugin o Make a single file to handle the structure of the website/Application o Break the files into modules, pages etc
- 31. Other Frameworks • LESS • Stylus