SlideShare a Scribd company logo

Agile css development with Compass/SASS

A

1 of 44
Download to read offline
JS DAY -VERONA - May 14th 2014
AndreaVerlicchi @verlok www.andreaverlicchi.eu
Agile CSS Development with
/ SASS
About me
• AndreaVerlicchi!
• Front-end architect

(also PHP developer)!
• www.andreaverlicchi.eu

twitter: @verlok
Let's talk about CSS
CSS can become messy
• Many site sections

home, landings, products, etc.!
• Many page sections

header, footer, main, etc.!
• Many devices

desktop, tablet, smartphone, etc.!
• Many screen resolutions!
• Many colors, fonts, helpers, etc.
CSS can become messy
• Not a unique author!
• Not a unique coding style
CSS can become looong
• long CSS file vs split CSS file

we could split the code into more CSS files,

but it would result in less performing websites

(more HTTP requests)!
• long CSS file vs code readability

code is less readable if files are very long, especially
when you first look to someone else's code

Recommended

Agile CSS development with Compass and Sass
Agile CSS development with Compass and SassAgile CSS development with Compass and Sass
Agile CSS development with Compass and SassAndrea Verlicchi
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layoutsdjesse
 
Drupal & CSS Preprocessors
Drupal & CSS PreprocessorsDrupal & CSS Preprocessors
Drupal & CSS Preprocessorskdmarks
 
PechaKucha Less VS Sass
PechaKucha Less VS SassPechaKucha Less VS Sass
PechaKucha Less VS SassHoang Huynh
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Cedric Spillebeen
 

More Related Content

More from Andrea Verlicchi

How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfAndrea Verlicchi
 
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfAndrea Verlicchi
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0Andrea Verlicchi
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standardAndrea Verlicchi
 
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaSviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaAndrea Verlicchi
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryAndrea Verlicchi
 

More from Andrea Verlicchi (7)

How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
 
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
 
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.02022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
 
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standardResponsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
 
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 FaenzaSviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 

Recently uploaded

"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringMassimo Talia
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch TuesdayIvanti
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!KivenRaySarsaba
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education pptsafnarafeek2002
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor FesenkoFwdays
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 

Recently uploaded (20)

"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
Dynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineeringDynamical systems simulation in Python for science and engineering
Dynamical systems simulation in Python for science and engineering
 
2024 February Patch Tuesday
2024 February Patch Tuesday2024 February Patch Tuesday
2024 February Patch Tuesday
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 
My sample product research idea for you!
My sample product research idea for you!My sample product research idea for you!
My sample product research idea for you!
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education ppt
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 

Agile css development with Compass/SASS

  • 1. JS DAY -VERONA - May 14th 2014 AndreaVerlicchi @verlok www.andreaverlicchi.eu Agile CSS Development with / SASS
  • 2. About me • AndreaVerlicchi! • Front-end architect
 (also PHP developer)! • www.andreaverlicchi.eu
 twitter: @verlok
  • 4. CSS can become messy • Many site sections
 home, landings, products, etc.! • Many page sections
 header, footer, main, etc.! • Many devices
 desktop, tablet, smartphone, etc.! • Many screen resolutions! • Many colors, fonts, helpers, etc.
  • 5. CSS can become messy • Not a unique author! • Not a unique coding style
  • 6. CSS can become looong • long CSS file vs split CSS file
 we could split the code into more CSS files,
 but it would result in less performing websites
 (more HTTP requests)! • long CSS file vs code readability
 code is less readable if files are very long, especially when you first look to someone else's code
  • 7. CSS can be repetitive • Sandboxed rules! article header {...}
 article h1 {...}
 article p {...}
 article footer {...}
 article .author {...}! • Rules that share styles! button { background-color: #BADA55 }
 a { color: #BADA55 }
 body { border-bottom: 5px solid #BADA55 }
  • 8. CSS is not a complete language • No variables (yet)! • No extensibility! • No math (yet)! • Just a few functions (rgb, rgba, ...)
  • 9. What if all this could CHANGE?
  • 10. What if we could use...
  • 11. What if we could use... Variables?Nesting? Functions? Math?
  • 13. SASS Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.! http://sass-lang.com
  • 14. HOW IT WORKS - DEV YOU WRITE SASS / SCSS IT CREATES CSS IT WATCHES! FOR CHANGES
  • 15. HOW IT WORKS - PROD YOU WRITE SASS / SCSS COMPILE IT CREATES CSS
  • 16. NESTING ! ! article li { margin-right: 1em; } ! article a { color: white; background: red; display: block; } ! article a:hover { color: red; background: white; } article { ! li { margin-right: 1em; } ! a { color: white; background: red; display: block; ! &:hover { color: red; background: white; } } }
  • 17. ! ! button { background: #CE4DD6; } ! a { color: #CE4DD6; } ! header { border-bottom: 3px; border-color: #CE4DD6; } $mainColor: #CE4DD6; ! button { background: $mainColor; } ! a { color: $mainColor; } ! header { border-bottom: 3px; border-color: $mainColor; } VARIABLES
  • 18. FUNCTIONS button { color: #CE4DD6; } ! button:hover { color: #D76DDE; } button { color: $mainColor; } ! button:hover { color: saturate($mainColor, 10%); }
  • 19. MATH ! ! #side { width: 23.95833%; margin: 2.08333%; } ! #main { width: 47.91667%; margin: 2.08333%; } ! #more { width: 23.95833%; } $width: 960px; ! #side { width: percentage(230px / $width); margin: percentage(10px / $width); } ! #main { width: percentage(460px / $width); margin: percentage(10px / $width); } ! #more { width: percentage(230px / $width); }
  • 20. PARTIALS // === site.scss === ! @import "normalize"; @import "fonts"; @import "mixins"; @import "headerFooter"; @import "helpers"; @import "forms"; … … … @import "whatever"; (very long CSS file)
 !html { line-height:1; } !ol,ul { list-style:none; } !table { border-collapse:collapse; border-spacing:0; } !caption,th,td { text-align:left; font-weight:400; vertical-align:middle; } !q,blockquote { quotes:none; } !q:before,q:after,blockquote:before,blockquote:after { content:none; } !a img { border:none; } !body { font-family:Tahoma, sans-serif; font-size:87.5%; -webkit-text-size-adjust:none; } !h1,h2,h3,h4,h5,h6,#payoff { line-height:1.5em; } !p { margin-bottom:6px; line-height:1.5em; } !abbr,acronym { border-bottom:1px dotted #690; cursor:help; } !#language,#loginMessage { position:absolute; } !#content { position:relative; } !#accountZone { display:none; float:right; border-radius:10px; } !#accountZone li { display:block; float:left; } !#accountZone a { display:block; padding:8px 10px; } !#accountZone form,#accountZone #regeneratePwd { float:left; } !#loginForm form { padding:6px 10px 5px; } !#loginForm button { font-size:91.66667%; border:0; background:#eee; height:18px; text-align:center; width:auto; box-shadow:inset 0 -2px 5px rgba(0,0,0,0.3); margin:0; } !#loginForm input { width:76px; height:18px; border:none; font-size:100%; outline:none; box-shadow:inset 0 2px 5px rgba(0,0,0,0.3); padding:0 2px; } !… … … … …
  • 21. SASS 3 does all this (and lots more)
  • 22. It allows you to do powerful operations! using Mixins
  • 23. It allows to choose the output CSS style, including Compressed
  • 24. It can remove comments you don't want to publish // this is a shameful hack
  • 25. However, some developers still don't like it...
  • 27. COMPASS Compass is an open-source CSS Authoring Framework. Compass uses SASS.! http://compass-style.org
  • 28. COMPASS extends SASS + it gives you some interesting features
  • 29. Click on the file name:line to view the CSS file inspector
 to get the original SASS/SCSS file name and line 1. IT'S EASY TO DEBUG! Inspect the element you want to debug 
 to get the CSS rules in the inspector
  • 30. 2. IT'S LOADED WITH LOTS OF HELPERS & PATTERNS CSS3,Typography, Utilities (Reset, Clearfix), Sticky Footer, and more
  • 31. You just add the images, it generates the sprite + gives you a helper to use your images 3. IT MAKES CSS SPRITES
  • 32. 3. IT MAKES CSS SPRITES @import "compass/utilities/sprites"; ! @import “sponsors/*.png”; // windowsAzure.png, appDynamics.png … ! #sponsor_section { .sponsor1 { @include sponsors-sprite(windowsAzure, true); } ! .sponsor2 { @include sponsors-sprite(appDynamics, true); } }
  • 33. #sponsor_section .sponsor1, #sponsor_section .sponsor2, #sponsor_section .sponsor3 { background: url('../img/sponsors-s69e070e3f8.png') no-repeat; } ! #sponsor_section .sponsor1 { background-position: 0 0; height: 171px; width: 457px; } ! #sponsor_section .sponsor2 { background-position: 0 -356px; height: 95px; width: 373px; } 3. IT MAKES CSS SPRITES
  • 35. SASS • Nesting! • Variables! • Functions! • Math! • Partials
  • 36. • Easy debugging! • Easy spriting! • Lots of helpers COMPASS
  • 37. ORGANIZATION • Better code organization! • No code repetition (DRY)! • Shorter files to manage! • Much speeder coding
  • 38. HOW TO INSTALL • Download Ruby
 rubyinstaller.org! • Command prompt:
 gem install compass • Download Ruby
 ruby-lang.com! • Terminal:
 sudo gem install compass
  • 39. HOW TO SETUP • in terminal / command prompt
 go to your project folder
 cd {your/project/path}! • create the scaffolding 
 compass install compass! • start watching changes / creating CSS
 compass watch
  • 40. HOW TO START • SCSS format is CSS compliant! • You can start writing SCSS as if you were writing CSS / Rename your CSS files in SCSS! • Start using variables and nesting! • Organize your CSS code in partials! • Do more complex things using mixins, etc.
  • 41. SOME ADVICE • Keep in mind that you’re still writing CSS, always figure how your CSS will become! • Avoid unnecessary nesting 
 (a maximum of 3 levels is often enough)! • In continuous integration environments, always run compass clean before compass compile (especially if you use branches)
  • 42. GIVE IT A TRY ! • It takes no more than 30 minutes to be installed and learned! • It's used by more and more front-end developers and companies! • It would improve your technical skills

Editor's Notes

  1. \n
  2. for Cavalli, D&G, Armani, StellaMC\n\n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. WITH SASS, WE CAN\n
  30. WITH SASS, WE CAN\n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n