Más contenido relacionado Más de Andrea Verlicchi (7) Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza1. CSS DAY ~ 27.03.2015
www.andreaverlicchi.eu ~ @verlok
Sviluppo CSS agile con
SASS e Compass
2. • Grave dipendenza da
sviluppo front-end
• Front-end Architect
• Speaker occasionale
www.andreaverlicchi.eu ~ @verlok
9. Sass è il più maturo, stabile, potente
linguaggio di estensione CSS nel mondo.
13. Come funziona - CI
FILE .SCSS
COMPILE
FILE .CSS
FILE .JS
MINIFY
FILE .MIN.JS
14. button {
background: #ABCDEF;
}
a {
color: #ABCDEF;
}
header {
border-bottom: 5px;
border-color: #ABCDEF;
}
$mainColor: #ABCDEF;
button {
background: $mainColor;
}
a {
color: $mainColor;
}
header {
border-bottom: 5px;
border-color: $mainColor;
}
Variabili
15. Annidamento
article h1 {
margin-right: 1em;
}
article a {
color: white;
background: red;
display: block;
}
article a:hover {
color: red;
background: white;
}
article {
h1 {
margin-right: 1em;
}
a {
color: white;
background: red;
display: block;
&:hover {
color: red;
background: white;
}
}
}
17. Parziali
@import “_variables”;
@import "_reset";
@import "_fonts";
@import "_headerFooter";
@import "_forms";
@import "_base";
@import "_helpers";
@import “_whatever”;
…
main.scss main.css
// _reset.scss
html, body, div, span, h1,
h2, h3, h4, h5, h6 … {
margin: 0; padding: 0; …
} // …
// _fonts.scss
@font-face {
font-family: myFont; //…
} // …
// …
// _whatever.scss
19. Extend
.message {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
@extend .message;
color: red;
border-color: red;
}
.alert {
@extend .message;
color: orange;
border-color: orange;
}
.message, .error, .alert {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
color: red;
border-color: red;
}
.alert {
color: orange;
border-color: orange;
}
20. Extend
%message {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
@extend %message;
color: red;
border-color: red;
}
.alert {
@extend %message;
color: orange;
border-color: orange;
}
.error, .alert {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
color: red;
border-color: red;
}
.alert {
color: orange;
border-color: orange;
}
21. Mixin
@mixin message {
font-weight: bold;
padding: 1em;
border-width: 2px;
}
.error {
@include message;
color: red;
border-color: red;
}
.alert {
@include message;
color: orange;
border-color: orange;
}
.error {
font-weight: bold;
padding: 1em;
border-width: 2px;
color: red;
border-color: red;
}
.alert {
font-weight: bold;
padding: 1em;
border-width: 2px;
color: orange;
border-color: orange;
}
22. Extend vs Mixin
• Lunghezza CSS
• Utilizzo con media query
• Parametri
EXTEND WINS
MIXIN WINS
MIXIN WINS
24. Stile di output
• nested .widget-social {
text-align: right; }
.widget-social a,
.widget-social a:visited {
padding: 0 3px;
color: #222222; }
.widget-social a:hover {
color: #B00909; }
25. Stile di output
• nested
• expanded
.widget-social {
text-align: right;
}
.widget-social a,
.widget-social a:visited {
padding: 0 3px;
color: #222222;
}
.widget-social a:hover {
color: #B00909;
}
26. Stile di output
• nested
• expanded
• compact
.widget-social { text-align: right; }
.widget-social a, .widget-social a:visited { padding: 0 3px; … }
.widget-social a:hover { color: #B00909; }
27. Stile di output
• nested
• expanded
• compact
• compressed
.widget-social{text-align:right}.widget-social a,.widget-social
a:visited{padding:0 3px;color:#222222}.widget-social a:hover{co
lor:#B00909}
30. Compass è un framework open-source per la scrittura
di CSS. Compass usa SASS.
32. Configurazione soglie
// Dichiarare prima di @import-are compass
$graceful-usage-threshold: 5; // def: 0.1
$critical-usage-threshold: 1; // def: 0.01
@import "compass/css3";
// Tutto il resto a seguire...
34. Background & Gradients
.myBox {
@include background(linear-gradient(to bottom, #F00, #0F0));
}
.myBox {
// ...
background: -moz-linear-gradient(top, #ff0000, #00ff00);
background: -webkit-linear-gradient(top, #ff0000, #00ff00);
background: linear-gradient(to bottom, #ff0000, #00ff00);
}
35. Keyframes
@include keyframes(spin) {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
@-moz-keyframes spin { ... }
@-webkit-keyframes spin { ... }
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
37. Flexbox
.parent {
@include display-flex;
@include flex-wrap(wrap);
}
.child {
@include flex-grow(1);
}
.parent {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.child {
-webkit-flex-grow: 1;
flex-grow: 1;
}
40. Sprite - Tutte
@import “compass/utilities/sprites";
@import "flags/*.png";
@include all-flags-sprites;
.flags-it,
.flags-de,
.flags-fr {
background: url('/images/flags-s34fe0604ab.png') no-repeat;
}
.flags-it { background-position: 0 0; }
.flags-de { background-position: 0 -32px; }
.flags-fr { background-position: 0 -64px; }
// flags
// it.png
// de.png
// fr.png
41. Sprite - Singola
@import "compass/utilities/sprites";
@import "flags/*.png";
// it.png
// de.png
.myBox {
@include flags-sprite(it);
}
.anotherBox {
@include flags-sprite(de);
}
.myBox,
.anotherBox {
background: url('../img/flags-
s69e070e3f8.png') no-repeat;
}
.myBox {
background-position: 0 0;
}
.anotherBox {
background-position: 0 -32px;
}
42. Sprite - Avanzato
• Generazione dimensioni box
• Offset dentro box
• Spaziatura immagini sprite
• Gestione densità display
• Ecco come:
andreaverlicchi.eu/css-day-2015
45. Primi file SASS
• Conversione CSS a SCSS
sass-convert css/main.css --to scss
• Creare cartelle e file iniziali
compass install compass
sass-convert css --to scss --recursive
53. .btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
.btn-large {
padding: 1em;
font-size: 16px;
}
.btn-small {
padding: 0.2em;
font-size: 12px;
}
.btn-grey {
background: darkgrey;
}
CSS
@mixin btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
@mixin btn-large {
padding: 1em;
font-size: 16px;
}
@mixin btn-small {
padding: 0.2em;
font-size: 12px;
}
@mixin btn-grey {
background: darkgrey;
}
SASS
54. .btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
.btn-large {
padding: 1em;
font-size: 16px;
}
.btn-small {
padding: 0.2em;
font-size: 12px;
}
.btn-grey {
background: darkgrey;
}
CSS
@mixin btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
@mixin btn-large {
padding: 1em;
font-size: 16px;
}
@mixin btn-small {
padding: 0.2em;
font-size: 12px;
}
@mixin btn-grey {
background: darkgrey;
}
SASS
55. @mixin btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
@mixin btn-large {
padding: 1em;
font-size: 16px;
}
@mixin btn-small {
padding: 0.2em;
font-size: 12px;
}
@mixin btn-grey {
background: darkgrey;
}
SASSHTML
<button
class=“btn btn-large”
type=“submit”>
<button
class=“btn btn-small”
type=“reset”>
<button
class=“btn btn-grey”
disabled>
56. @mixin btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
@mixin btn-large {
padding: 1em;
font-size: 16px;
}
@mixin btn-small {
padding: 0.2em;
font-size: 12px;
}
@mixin btn-grey {
background: darkgrey;
}
SASSHTML
<button
class=“btn btn-large”
type=“submit”>
<button
class=“btn btn-small”
type=“reset”>
<button
class=“btn btn-grey”
disabled>
<button
class=“btn btn-large”
type=“submit”>
<button
class=“btn btn-small”
type=“reset”>
<button
class=“btn btn-grey”
disabled>
57. @mixin btn {
padding: 0.5em;
border: none;
background: darkred;
color: white;
}
@mixin btn-large {
padding: 1em;
font-size: 16px;
}
@mixin btn-small {
padding: 0.2em;
font-size: 12px;
}
@mixin btn-grey {
background: darkgrey;
}
button {
@include btn;
}
button[type=“submit”] {
@include btn;
@include btn-large;
}
button[type=“reset”] {
@include btn;
@include btn-small;
}
button[disabled] {
@include btn;
@include btn-grey;
}
SASSHTML
<button
class=“btn btn-large”
type=“submit”>
<button
class=“btn btn-small”
type=“reset”>
<button
class=“btn btn-grey”
disabled>
<button
class=“btn btn-large”
type=“submit”>
<button
class=“btn btn-small”
type=“reset”>
<button
class=“btn btn-grey”
disabled>
63. SASS vs LESS
@verlok #cssday
https://css-tricks.com/sass-vs-less/
http://www.zingdesign.com/less-vs-sass-its-time-to-
switch-to-sass/
64. Bootstrap (sostantivo): una libreria applicata ad
un sito quando lo sviluppatore front-end ha perso
la passione per il suo lavoro
@verlok #cssday
“1186 regole CSS (91%) non sono utilizzate
dalla pagina corrente”
65. OOCSS: Obstinate Overuse
of Classes in Style Sheets
@verlok #cssday
“OOCSS is about pure CSS.Agreed.
But it’s about shitty HTML” @g16n