Enviar búsqueda
Cargar
Agile CSS development with Compass and Sass
•
3 recomendaciones
•
1,229 vistas
Andrea Verlicchi
Seguir
Agile CSS development with Compass and Sass - YOOXlabs Tech Event in Zola Predosa
Leer menos
Leer más
Internet
Denunciar
Compartir
Denunciar
Compartir
1 de 50
Descargar ahora
Descargar para leer sin conexión
Recomendados
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Write LESS. DO more.
Write LESS. DO more.
Eugene Nor
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
Less css
Less css
Bill Chea
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
Eric Sembrat
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
Sass
Sass
Bram Verdyck
Recomendados
An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Write LESS. DO more.
Write LESS. DO more.
Eugene Nor
Syntactically awesome stylesheets (Sass)
Syntactically awesome stylesheets (Sass)
Tahmina Khatoon
Less css
Less css
Bill Chea
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
Eric Sembrat
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
Sass
Sass
Bram Verdyck
Sass presentation
Sass presentation
Davin Abraham
CSS3
CSS3
Chathuranga Jayanath
The Future of CSS
The Future of CSS
elliando dias
Intro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
Doing More With Less
Doing More With Less
David Engel
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
Ppt ch05
Ppt ch05
niruttisai
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
LESS, the CSS Preprocessor
LESS, the CSS Preprocessor
Andrea Tarr
CSS3 3D Workshop
CSS3 3D Workshop
Christopher Schmitt
Intro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
How to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Suzette Franck
Sass and compass workshop
Sass and compass workshop
Shaho Toofani
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
Andrea Tarr
Quality Development with CSS3
Quality Development with CSS3
Shay Howe
The Future Of CSS
The Future Of CSS
Andy Budd
Sass presentation
Sass presentation
Марко Ковачевић
LESS is More
LESS is More
jsmith92
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
Sass and Compass - Getting Started
Sass and Compass - Getting Started
edgincvg
Más contenido relacionado
La actualidad más candente
Sass presentation
Sass presentation
Davin Abraham
CSS3
CSS3
Chathuranga Jayanath
The Future of CSS
The Future of CSS
elliando dias
Intro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
Doing More With Less
Doing More With Less
David Engel
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Knoldus Inc.
Ppt ch05
Ppt ch05
niruttisai
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
LESS, the CSS Preprocessor
LESS, the CSS Preprocessor
Andrea Tarr
CSS3 3D Workshop
CSS3 3D Workshop
Christopher Schmitt
Intro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
ucbdrupal
How to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Suzette Franck
Sass and compass workshop
Sass and compass workshop
Shaho Toofani
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
Andrea Tarr
Quality Development with CSS3
Quality Development with CSS3
Shay Howe
The Future Of CSS
The Future Of CSS
Andy Budd
Sass presentation
Sass presentation
Марко Ковачевић
LESS is More
LESS is More
jsmith92
La actualidad más candente
(20)
Sass presentation
Sass presentation
CSS3
CSS3
The Future of CSS
The Future of CSS
Intro to SASS CSS
Intro to SASS CSS
Doing More With Less
Doing More With Less
HTML5, CSS, JavaScript Style guide and coding conventions
HTML5, CSS, JavaScript Style guide and coding conventions
Ppt ch05
Ppt ch05
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
LESS, the CSS Preprocessor
LESS, the CSS Preprocessor
CSS3 3D Workshop
CSS3 3D Workshop
Intro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
How to use CSS3 in WordPress
How to use CSS3 in WordPress
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Sass and compass workshop
Sass and compass workshop
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
Quality Development with CSS3
Quality Development with CSS3
The Future Of CSS
The Future Of CSS
Sass presentation
Sass presentation
LESS is More
LESS is More
Similar a Agile CSS development with Compass and Sass
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
Sass and Compass - Getting Started
Sass and Compass - Getting Started
edgincvg
Keep calm and let's play CSS3
Keep calm and let's play CSS3
A2 Comunicação
Preprocessor presentation
Preprocessor presentation
Mario Noble
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
Katsunori Tanaka
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
Getting Started with Sass & Compass
Getting Started with Sass & Compass
Rob Davarnia
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
Marco Pinheiro
CSS Extenders
CSS Extenders
Idan Gazit
Workshop 6: Designer tools
Workshop 6: Designer tools
Visual Engineering
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
emrox
Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Robert Nyman
Advanced sass/compass
Advanced sass/compass
Nick Cooley
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
Daniel Yuschick
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
Inayaili León
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
jdramaix
Similar a Agile CSS development with Compass and Sass
(20)
Accelerated Stylesheets
Accelerated Stylesheets
Sass and Compass - Getting Started
Sass and Compass - Getting Started
Keep calm and let's play CSS3
Keep calm and let's play CSS3
Preprocessor presentation
Preprocessor presentation
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Getting Started with Sass & Compass
Getting Started with Sass & Compass
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
CSS Extenders
CSS Extenders
Workshop 6: Designer tools
Workshop 6: Designer tools
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
Big Design Conference: CSS3
Big Design Conference: CSS3
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Advanced sass/compass
Advanced sass/compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Raleigh Web Design Meetup Group - Sass Presentation
Raleigh Web Design Meetup Group - Sass Presentation
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Más de Andrea Verlicchi
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
Andrea Verlicchi
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf
Andrea Verlicchi
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Andrea Verlicchi
2022.04 - CSS Day IT - Images Optimisation 4.0
2022.04 - CSS Day IT - Images Optimisation 4.0
Andrea Verlicchi
Responsive images, an html 5.1 standard
Responsive images, an html 5.1 standard
Andrea Verlicchi
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Sviluppo CSS agile con SASS e Compass - CSS Day 2015 Faenza
Andrea Verlicchi
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi
Más de Andrea Verlicchi
(7)
How 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.pdf
Come 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.0
Responsive 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 Faenza
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Último
Call girls Service in Ajman 0505086370 Ajman call girls
Call girls Service in Ajman 0505086370 Ajman call girls
Monica Sydney
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
HenryBriggs2
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Priya Reddy
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
gajnagarg
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Monica Sydney
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
growthgrids
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
ayvbos
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
rahman018755
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Monica Sydney
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
kajalverma014
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
EleniIlkou
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
meghakumariji156
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
JOHNBEBONYAP1
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
meghakumariji156
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Monica Sydney
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Monica Sydney
一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理
F
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
F
Último
(20)
Call girls Service in Ajman 0505086370 Ajman call girls
Call girls Service in Ajman 0505086370 Ajman call girls
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Mira Road Housewife Call Girls 07506202331, Nalasopara Call Girls
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Call girls in Abu Dhabi 0508644382 Abu Dhabi Call girls
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
一比一原版奥兹学院毕业证如何办理
一比一原版奥兹学院毕业证如何办理
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
Agile CSS development with Compass and Sass
1.
YOOXlabs ~ 22.09.2015 andreaverlicchi.eu
~ @verlok ~ #YOOXlabsTechEvent Agile CSS Development with Compass / SASS
2.
• Strong addiction
to front-end development • Front-end Architect • Occasional speaker andreaverlicchi.eu ~ @verlok ~ #YOOXlabsTechEvent
3.
YOOXlabs Tech Event Front-End
Development October 2015
4.
5.
Language
6.
Repetitive
7.
Length
8.
Mess?
9.
Maintenance
10.
Sass is the
most mature, stable, and powerful professional grade CSS extension language in the world.
11.
How it works:
locally FILE .SCSS FILE .CSS WATCHGRUNT
12.
How it works:
CI FILE .SCSS COMPILE FILE .CSS
13.
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; } Variables
14.
Nesting 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; } } }
15.
Math aside { width: 23.95833%; } $width:
960px; $asideWidth: 230px; aside { width: $asideWidth / $width * 100%; }
16.
Partials @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
17.
Helpers button:hover { background-color: #A6CDF4; } button.disabled { background-color: #C4CDD6; } $buttonColor:
#ABCDEF; button:hover { background-color: adjust-saturation($buttonColor, 10%); } button.disabled { background-color: adjust-saturation($buttonColor, -10%); }
18.
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; }
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; } .error, .alert { font-weight: bold; padding: 1em; border-width: 2px; } .error { color: red; border-color: red; } .alert { color: orange; border-color: orange; }
20.
Mixins @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; }
21.
Extend vs Mixins •
CSS length • Usage with media queries • Parameters EXTEND WINS MIXIN WINS MIXIN WINS
22.
Mixins @mixin opacity($opacity) { opacity:
$opacity; filter: alpha(opacity=$opacity*100); } .faded-text { @include opacity(0.8); } .faded-text { opacity: 0.8; filter: alpha(opacity=80); }
23.
Output style • nested
.widget-social { text-align: right; } .widget-social a, .widget-social a:visited { padding: 0 3px; color: #222222; } .widget-social a:hover { color: #B00909; }
24.
Output style • 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; }
25.
Output style • nested •
expanded • compact .widget-social { text-align: right; } .widget-social a, .widget-social a:visited { padding: 0 3px; … } .widget-social a:hover { color: #B00909; }
26.
Output style • 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}
27.
Debug • source maps •
line comments
28.
SASS • Variables • Nesting •
Math • Partials • Extend • Mixins
29.
Compass is an
open-source CSS Authoring Framework. Compass uses SASS.
30.
Browser thresholds
31.
Thresholds configuration // 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...
32.
251 included mixing
33.
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); }
34.
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); } }
35.
Animation .myBox { @include animation(spin
1s); } .myBox { -moz-animation: spin 1s; -webkit-animation: spin 1s; animation: spin 1s; }
36.
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; }
37.
http://compass-style.org/index/mixins
38.
Sprites
39.
Sprites - All @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
40.
Sprite - Single @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; }
41.
Sprite - Advanced •
Box size generation • Offset inside the box • Sprite images spacing • Display density management • Here’s how: andreaverlicchi.eu/yooxlabs-2015-09/
42.
Installation • Download Ruby rubyinstaller.org •
Install Compass • Download Ruby ruby-lang.com • Install Compass gem install compasssudo
43.
Configuration • Activate the
project folder • Create the configuration file cd path/to/project compass config --css-dir css
44.
Primi file SASS •
Convert CSS to SCSS sass-convert css/main.css --to scss • Create initial folders and files compass install compass sass-convert css --to scss --recursive
45.
Usage • Compile compass compile •
Start the watcher compass watch
46.
Compass • Sprite • Browser
thresholds • Included mixins
47.
• Project organization •
Development speed • Maintain with ease
48.
49.
Q&A @verlok ~ #YOOXlabsTechEvent
50.
SASS vs LESS @verlok
~ #YOOXlabsTechEvent https://css-tricks.com/sass-vs-less/ http://www.zingdesign.com/less-vs-sass-its-time-to- switch-to-sass/
Descargar ahora