Soumettre la recherche
Mettre en ligne
Dojo: Sass - Syntactically Awesome Stylesheets
•
0 j'aime
•
821 vues
Guilherme
Suivre
https://github.com/guiocavalcanti/sass-Dev-day
Lire moins
Lire la suite
Technologie
Mode de vie
Signaler
Partager
Signaler
Partager
1 sur 7
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Similaire à 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
Similaire à 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
Plus 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
Plus 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
Dernier
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
hans926745
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Dernier
(20)
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
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 }
Télécharger maintenant