The World of Stylesheet Languages
0 likes481 views
SASS is a CSS preprocessor that provides a more structured language for stylesheet development. It features include variables, nested rules, mixins, and functions that allow developers to write cleaner CSS code. SASS files can be compiled into normal CSS files. Using SASS improves code quality by reducing repetition and making stylesheets easier to maintain as projects increase in complexity. SASS also encourages separating CSS into multiple files based on components, media queries, or other logical structures to better organize the code.
The World of Stylesheet Languages
- 1. An overview of today’s most famous stylesheet languages compiling into CSS. Special focus on SASS THE WORLD OF STYLESHEET LANGUAGES #css #sass #css-preprocessor#stylesheet #cross-platform Andrea Tino Software Development Engineer
- 2. Who is this presentation for? Everyone with a minimal background in programming What topics does it cover? See previous slide :) Oh yeah... But how detailed? I will follow an horizontal approach without many details
- 3. CSS IS AWESOME(?) Let’s talk about CSS... And how much you (dis)like it :) DO YOU LIKE CSS? Question DO YO LIKE CS
- 4. ODI ET AMO The problem is that we hate it... though we still love it! Our first CSS hack Our second CSS hack First attempt to vertically align an element Your life LOVE :) DISLIKE :( HATE :( :(
- 5. THE 2 PROBLEMS Well there are many problems with CSS, but 2 groups can be identified CODE QUALITY Because of its syntax, CSS is prone to being messy and growing uncontrollably BROWSER COMPATIBILITY CSS is rendered on different browsers and results can sometimes be different
- 6. CODE QUALITY CSS takes advantage of merging and overriding to define styles, this can make stylesheets grow very fast as layout configurations increase .top-bar{background-color:#efefef;} display:flex; .group.subgroup>div @media(orientation:portrait) message:hover align-self:center; rgba(123,255,65,0.56) opacity:0.6 url(’/items/image.png’) border:1px solid black flex:1 1 auto; z-index:12000; border-color:#3 padding-to align:left How to make order out of chaos? CSS unfortunately is just growing every day with more features, the syntax will remain the same! But we can create languages that compile into CSS and that can provide a better syntax!
- 7. 4fe; :1px X2CSS Today we use stylesheet languages that compile into CSS and have a better syntax than CSS SASS/SCSS compiler http://sass-lang.com/ LESS CSS compiler http://lesscss.org/ STYLUS compiler https://learnboost.github.io/s tylus/ CSS style.css SASS code style.scss LESS code style.less STYLUS code style.sty
- 8. ABOUT SASS We focus on SASS. We use it in Dynamcs NAV clients and it has improved our productivity... a lot! What is it? SASS Syntactically Awesome StyleSheets is a CSS preprocessor. It provides developers with a more structured language. Sadly, it cannot be installed through NPM :( OPT.CSS OUTPUT VARIABLES SASS Playground http://sassmeister.com/ gem install sass LOOPS & ITERATORS CONDITIONAL EXPR. DEBUG DIRECTIVES SILENT CLASSES
- 9. WHAT WE LIKE ABOUT IT SASS has many features, just a small example can provide a good overview about how different the coding experience can be comparing to CSS CSS .pane { width: 80px; } .pane .group { width: 40px; background-color: #ff9900; } .pane .group:nth-child(2) { margin-left: 10px; } .pane .special-box { border-color: 1px solid #ff9900; padding: 5px; } 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 SASS $brand-color: #ff9900; $size-unit: 40px; .pane { width: 2 * $size-unit; .group { width: $size-unit; background-color: $brand-color; &:nth-child(2) { margin-left: $size-unit / 4; } } .special-box { border: 1px solid $brand-color; padding: $size-unit / 8; } } 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
- 10. A GOOD STRUCTURE SASS and the other preprocessors allow the use of multiple files. Use this functionality wisely as it can provide a good structure for your styling SASSSASS common.scss SASSSASS phone.scss SASSSASS tablet.scss SASSSASS desktop.scss SASSSASS grid.scss SASSSASS column.scss SASSSASS pane.scss SASSSASS grid.scss SASSSASS column.scss SASSSASS pane.scss ./desktop/ SASSSASS grid.scss SASSSASS column.scss SASSSASS pane.scss ./phone/ SASSSASS grid.scss SASSSASS column.scss SASSSASS pane.scss ./tablet/
- 11. THANK YOU Twitter: @_atino This work is distributed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license. Authored by: Andrea Tino This work includes icons and graphics designed by Freepik.com.This presentation has been designed to target university students as part of introduction to UX, development and IT. andry.tino@hotmail.comE-Mail: andrea.tino@microsoft.com The End