Enviar pesquisa
Carregar
Sass
•
0 gostou
•
351 visualizações
Guilherme
Seguir
Tecnologia
Estilo de vida
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 7
Baixar agora
Baixar para ler offline
Recomendados
Metasys Solução Educacional
Metasys Solução Educacional
rubensfull
Sabores da india
Sabores da india
manosoft
Aplicativos
Aplicativos
nathalycortez
Misturando tendências e tradição
Misturando tendências e tradição
Fábio Nogueira, PhD
CPLP Modelos de Aprendizagem
CPLP Modelos de Aprendizagem
cplp
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos Redu
Guilherme
Tropeiro velho
Tropeiro velho
Marci Busanello
Sass&compass
Sass&compass
Min Jun Kim
Recomendados
Metasys Solução Educacional
Metasys Solução Educacional
rubensfull
Sabores da india
Sabores da india
manosoft
Aplicativos
Aplicativos
nathalycortez
Misturando tendências e tradição
Misturando tendências e tradição
Fábio Nogueira, PhD
CPLP Modelos de Aprendizagem
CPLP Modelos de Aprendizagem
cplp
Introdução a plataforma de aplicativos Redu
Introdução a plataforma de aplicativos Redu
Guilherme
Tropeiro velho
Tropeiro velho
Marci Busanello
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
Joomla 3 templates and rtl
Joomla 3 templates and rtl
yairl
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
Mais conteúdo relacionado
Semelhante a Sass
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
Joomla 3 templates and rtl
Joomla 3 templates and rtl
yairl
Semelhante a Sass
(20)
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
Joomla 3 templates and rtl
Joomla 3 templates and rtl
Mais 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
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma Redu
Guilherme
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
Guilherme
FLOSS and Startups
FLOSS and Startups
Guilherme
Ruby 101 && Coding Dojo
Ruby 101 && Coding Dojo
Guilherme
Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome Stylesheets
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 - jQuery
Desevolvimento Web Client-side - jQuery
Guilherme
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript
Guilherme
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSS
Guilherme
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
Guilherme
Mais de Guilherme
(20)
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
Aplicações sociais usando a plataforma Redu
Aplicações sociais usando a plataforma Redu
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
FLOSS and Startups
FLOSS and Startups
Ruby 101 && Coding Dojo
Ruby 101 && Coding Dojo
Dojo: Sass - Syntactically Awesome Stylesheets
Dojo: Sass - Syntactically Awesome Stylesheets
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 - jQuery
Desevolvimento Web Client-side - jQuery
3 padroes-web-intro-javascript
3 padroes-web-intro-javascript
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - CSS
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
Último
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
carlostorres15106
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
AndikSusilo4
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
ThousandEyes
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Último
(20)
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Sass
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 }
Baixar agora