Enviar búsqueda
Cargar
Dojo: Sass - Syntactically Awesome Stylesheets
•
0 recomendaciones
•
821 vistas
Guilherme
Seguir
https://github.com/guiocavalcanti/sass-Dev-day
Leer menos
Leer más
Tecnología
Estilo de vida
Denunciar
Compartir
Denunciar
Compartir
1 de 7
Descargar ahora
Descargar para leer sin conexión
Recomendados
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
Guilherme
Roteamento de Perguntas em Redes Sociais
Roteamento de Perguntas em Redes Sociais
Guilherme
FLOSS and Startups
FLOSS and Startups
Guilherme
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos Redu
Guilherme
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript
Guilherme
Ruby 101 && Coding Dojo
Ruby 101 && Coding Dojo
Guilherme
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma Redu
Guilherme
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSS
Guilherme
Recomendados
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
Guilherme
Roteamento de Perguntas em Redes Sociais
Roteamento de Perguntas em Redes Sociais
Guilherme
FLOSS and Startups
FLOSS and Startups
Guilherme
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos Redu
Guilherme
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript
Guilherme
Ruby 101 && Coding Dojo
Ruby 101 && Coding Dojo
Guilherme
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma Redu
Guilherme
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSS
Guilherme
Sass&compass
Sass&compass
Min Jun Kim
Css frameworks
Css frameworks
Dimitar Belchugov
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Sass - Making CSS fun again.
Sass - Making CSS fun again.
Gabriel Neutzling
Theming and Sass
Theming and Sass
James Pearce
Using Sass - Building on CSS
Using Sass - Building on CSS
Sayanee Basu
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Loiane Groner
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
Katsunori Tanaka
FCIP SASS Talk
FCIP SASS Talk
Chris Schneider
CSS Extenders
CSS Extenders
Idan Gazit
Sencha Touch
Sencha Touch
Craig Walker
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Matt Puchlerz
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Adam Darowski
Less css
Less css
Bill Chea
CSS with LESS for #jd13nl
CSS with LESS for #jd13nl
Hans Kuijpers
Sass compass
Sass compass
Nick Cooley
Simple introduction Sass
Simple introduction Sass
Zeeshan Ahmed
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Guilherme
Descobrindo APIs REST
Descobrindo APIs REST
Guilherme
Más contenido relacionado
Similar a Dojo: Sass - Syntactically Awesome Stylesheets
Sass&compass
Sass&compass
Min Jun Kim
Css frameworks
Css frameworks
Dimitar Belchugov
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
James Cryer
Sass - Making CSS fun again.
Sass - Making CSS fun again.
Gabriel Neutzling
Theming and Sass
Theming and Sass
James Pearce
Using Sass - Building on CSS
Using Sass - Building on CSS
Sayanee Basu
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast with Sass
Rob Friesel
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Loiane Groner
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Claudina Sarahe
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Kaelig Deloumeau-Prigent
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
Katsunori Tanaka
FCIP SASS Talk
FCIP SASS Talk
Chris Schneider
CSS Extenders
CSS Extenders
Idan Gazit
Sencha Touch
Sencha Touch
Craig Walker
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Matt Puchlerz
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Adam Darowski
Less css
Less css
Bill Chea
CSS with LESS for #jd13nl
CSS with LESS for #jd13nl
Hans Kuijpers
Sass compass
Sass compass
Nick Cooley
Simple introduction Sass
Simple introduction Sass
Zeeshan Ahmed
Similar a Dojo: Sass - Syntactically Awesome Stylesheets
(20)
Sass&compass
Sass&compass
Css frameworks
Css frameworks
CSS Preprocessors: LESS is more or look SASS-y trying
CSS Preprocessors: LESS is more or look SASS-y trying
Sass - Making CSS fun again.
Sass - Making CSS fun again.
Theming and Sass
Theming and Sass
Using Sass - Building on CSS
Using Sass - Building on CSS
Wrangling the CSS Beast with Sass
Wrangling the CSS Beast with Sass
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Curso CSS3 com Sass e Compass - Aula 01 - Introducão
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Bringing sexy back to CSS: SASS/SCSS, LESS and Compass
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
FCIP SASS Talk
FCIP SASS Talk
CSS Extenders
CSS Extenders
Sencha Touch
Sencha Touch
Organizing & Simplifying CSS [with Sass]
Organizing & Simplifying CSS [with Sass]
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Sassive Aggressive: Using Sass to Make Your Life Easier (Refresh Boston Version)
Less css
Less css
CSS with LESS for #jd13nl
CSS with LESS for #jd13nl
Sass compass
Sass compass
Simple introduction Sass
Simple introduction Sass
Más de Guilherme
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Guilherme
Descobrindo APIs REST
Descobrindo APIs REST
Guilherme
Redu walled garden
Redu walled garden
Guilherme
Desafio de crescer
Desafio de crescer
Guilherme
Consumindo APIs REST com Ruby
Consumindo APIs REST com Ruby
Guilherme
Aplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com Rails
Guilherme
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
Guilherme
Sass
Sass
Guilherme
CSS first steps
CSS first steps
Guilherme
How does the Web work?
How does the Web work?
Guilherme
0 introducao padroes_web
0 introducao padroes_web
Guilherme
Plano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu Respostas
Guilherme
Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX
Guilherme
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
Guilherme
Más de Guilherme
(14)
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código
Descobrindo APIs REST
Descobrindo APIs REST
Redu walled garden
Redu walled garden
Desafio de crescer
Desafio de crescer
Consumindo APIs REST com Ruby
Consumindo APIs REST com Ruby
Aplicações tipo Canvas no Redu com Rails
Aplicações tipo Canvas no Redu com Rails
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
Sass
Sass
CSS first steps
CSS first steps
How does the Web work?
How does the Web work?
0 introducao padroes_web
0 introducao padroes_web
Plano de Pesquisa - Redu Respostas
Plano de Pesquisa - Redu Respostas
Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - AJAX
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
Último
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Wes McKinney
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Mark Simos
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
Yoss Cohen
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
BookNet Canada
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Mydbops
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
panagenda
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Inflectra
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Nikki Chapple
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
marketing932765
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
TopCSSGallery
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
IES VE
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
Bernd Ruecker
Último
(20)
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
The Future Roadmap for the Composable Data Stack - Wes McKinney - Data Counci...
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
Dojo: Sass - Syntactically Awesome Stylesheets
1.
Sass - Syntactically
Awesome Stylesheets Guilherme Cavalcanti
2.
Purpose • Sass makes
CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
3.
Purpose • CSS superset
• Every valid CSS file is a valid SCSS • The other way is not true
4.
Nesting
1 /* line 1, ../sass/corners.scss */ 2 #navbar { 3 width: 80%; 4 height: 23px; 1 #navbar { 5 } 2 width: 80%; 6 /* line 5, ../sass/corners.scss */ 3 height: 23px; 7 #navbar ul { 4 8 list-style-type: none; 5 ul { list-style-type: none; } 9 } 6 li { 10 /* line 6, ../sass/corners.scss */ 7 float: left; 11 #navbar li { 8 a { font-weight: bold; } 12 float: left; 9 } 13 } 10 } 14 /* line 8, ../sass/corners.scss */ 15 #navbar li a { 16 font-weight: bold; 17 }
5.
Mixins 1
/* line 7, ../sass/corners.scss */ 2 #navbar li { 3 border-top-radius: 10px; 1 @mixin rounded($side, $radius: 10px) { 4 -moz-border-radius-top: 10px; 2 border-#{$side}-radius: $radius; 5 -webkit-border-top-radius: 10px; 3 -moz-border-radius-#{$side}: $radius; 6 } 4 -webkit-border-#{$side}-radius: $radius; 7 5 } 8 /* line 8, ../sass/corners.scss */ 6 9 #navbar2 li { 7 #navbar li { @include rounded(top); } 10 border-top-radius: 10px; 11 -moz-border-radius-top: 10px; 12 -webkit-border-top-radius: 10px; 13 }
6.
Variables
1 /* line 7, ../sass/corners.scss */ 1 $main-color: #ce4dd6; 2 #navbar li { 2 3 border-top-radius: 10px; 3 a { 4 -moz-border-radius-top: 10px; 4 color: $main-color; 5 -webkit-border-top-radius: 10px; 5 } 6 } 7 8 /* line 8, ../sass/corners.scss */ 9 #navbar2 li { 10 border-top-radius: 10px; 11 -moz-border-radius-top: 10px; 12 -webkit-border-top-radius: 10px; 13 }
7.
Compass 1 @import "compass/css3/border-radius"; 2 3
.simple { @include border-radius(4px, 4px); } 1 /* line 3, ../sass/corners.scss */ 2 .simple { 3 -webkit-border-radius: 4px 4px; 4 -moz-border-radius: 4px / 4px; 5 -o-border-radius: 4px / 4px; 6 -ms-border-radius: 4px / 4px; 7 -khtml-border-radius: 4px / 4px; 8 border-radius: 4px / 4px; 9 }
Descargar ahora