the world of stylesheet languages
TRANSCRIPT
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 TinoSoftware Development Engineer
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
CSS IS AWESOME(?)Let’s talk about CSS... And how
much you (dis)like it :)
DO YOU LIKE CSS?
Question
DO YO LIKE CS
ODI ET AMOThe 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 :( :(
THE 2 PROBLEMSWell 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
CODE QUALITYCSS 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:hoveralign-self:center; rgba(123,255,65,0.56)
opacity:0.6url(’/items/image.png’)
border:1px solid black
flex:1 1 auto;
z-index:12000;
border-color:#3454fe;padding-top:1px
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!
border-color:#3454fe;padding-top:1px
align:left
X2CSSToday 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/stylus/
CSS
style.css
SASS code
style.scss
LESS code
style.less
STYLUS code
style.sty
ABOUT SASSWe 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
WHAT WE LIKE ABOUT ITSASS 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;}
0102030405060708091011121314151617 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; }}
0102030405060708091011121314151617181920
A GOOD STRUCTURESASS 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/
THANK YOUTwitter: @_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.
[email protected]: [email protected]
The End