Movatterモバイル変換

[0]ホーム
URL:

Loiane Groner, profile picture
Uploaded byLoiane Groner
PDF, PPTX739 views

Curso CSS3 com Sass e Compass - Aula 01 - Introducão

The document is an introduction to using SASS and Compass for CSS development, highlighting common problems in CSS such as code repetition and unclear relationships. It discusses the benefits of using SASS, including avoiding repetition, improving maintenance, and making design decisions more transparent using variables. Various SASS features and syntax, such as nesting, mixins, and color manipulation, are also covered.

Embed presentation

Download as PDF, PPTX
Curso CSS com Sass e Compass: IntroduçãoLoiane Gronerhttp://loiane.com
.msg { padding: 24px; }.msg h3 { padding: 24px; }
.msg { padding: 24px; }.msg h3 { padding: 24px; }
.msg { padding: 24px; }.msg h3 { padding: 24px; }
.msg { padding: 24px; }.msg h3 { padding: 24px; }Problemas• Repetição gera problemas para manter codigo• Relacionamentos não estão claros• Razões para tais valores estão na cabeça de quem fez odesign
Sass é uma extensão doCSS3 que permite que vocêcrie folhas de estilo melhorescom um esforço menor
De Sa ssPa ra C SS
SCSS - Sassy CSS (.scss)h1 { color: #000; background: #fff;}
Indented Sass (.sass)h1 color: #000 background: #fff
P ense ic am enteDin am
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
D RY
Don’tRepeatYourself
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
Var iáv eis
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
.scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
Com Sass...• Não tem repetição -> custo de manuntenção é baixo• Variáveis deixam os relacionamentos claros• Razões para tais valores ficam evidentes
Ne sting
.scss .csstable.hl { /* CSS */ margin: 2em 0; td.ln { table.hl { text-align: right; margin: 2em 0; } }} table.hl td.ln { text-align: right;li { } font: { family: serif; li { weight: bold; font-family: serif; size: 1.2em; font-weight: bold; } font-size: 1.2em;} }
H er an ça
.scss .css.error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError {} border: 1px #f00;.error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold;} .error.intrusion, .badError.intrusion {.badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; }} .badError { border-width: 3px; }
.scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
.scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
.scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
M ix ins
.scss .css@mixin table-base { th { /* CSS */ text-align: center; font-weight: bold; #data { } float: left; td, th {padding: 2px} margin-left: 10px;} } #data th {@mixin left($dist) { text-align: center; float: left; font-weight: bold; margin-left: $dist; }} #data td, #data th { padding: 2px;#data { } @include left(10px); @include table-base;}
Im ports
/* projeto.scss */@import "core";@import "header", "footer"; sc ss _ core. .sc ss _ footer sc ss _h eader. projeto.css projeto.scss
Opera çõ es tem á tic asMa
Operadores MatemáticosOperadores Matemáticos (+, -, *, /, %) funcionam comnúmeros2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1
Divisãofont: 2px / 2px; //1pxfont: 25px / 4+1; //5pxfont: $base / 2;
Funções Numéricaspercentage(13/25); //52%round(4.4); //4ceil(4.2); //5floor(4.6); //4abs(-5); //5
Loo pe dic ion aisC on es Cond i ci o n a i s < > <= = > == !=›O perador else, @ e l se i f› @if, @ , @ e a ch , @w h i l e › @for › and, or
Operadores Relacionais (<, >, <=, >=) comparamnúmeros1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // trueOperacores de Comparação (==, !=) comparamqualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true
red == #f00red == #ff0000red == rgb(255, 0, 0)red == rgba(255, 0, 0, 1.0)red == hsl(0deg, 100%, 100%)red == hsla(0deg, 100%, 100%, 1)
@if, @else, @else if$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
Loop @for.scss@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; }}.css.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }
Loop @while.scss$i: 6;@while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}.css.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }
Loop @each.scss@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}.css.puma-icon { background-image: url('/images/puma.png'); }.sea-slug-icon { background-image: url('/images/sea-slug.png'); }.egret-icon { background-image: url('/images/egret.png'); }.salamander-icon { background-image: url('/images/salamander.png'); }
C ore s!
Função RGBA.scssa { color: rgba(blue, .75) }p { background: rgba(#ffa, .25) }.cssa { color: rgba(255, 255, 170, 0.25) }p { background: rgba(255, 255, 170, 0.25) }
Inspecionando Cores$color: red;hue($color); //0degsaturation($color); // 100%lightness($color); // 50%red($color); //100green($color); //0blue($color); //0alpha($color); //100
Manipulando Cores invert(blue) invert(blue) invert(blue)invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) invert(blue)invert(blue) invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) co coinvert(blue) complement(#6cf620) mix(red, yellow) mix(red,yellow) mix(red,yellow, 30%) 30%) mix(red,yellow) yellow) mix(red, yellow, 30%)mix(red, yellow)mix(red, yellow) mix(red, yellow, 30%) mix(red, yellow, 30%) mix(red, yellow, mix(red,mix(red, yellow) yellow) mix(red, yellow) 30%) mi mix(red, yellow) yellow, mix(red, yellow, 30%) yellow, 30%) mimix(red, mix(red, grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow)grayscale(yellow) grayscale(yellow)grayscale(yellow)
Manipulando HSLAadjust-hue(#77a7f9,90) adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90)adjust-hue(#77a7f9,90 adjust-hue(#77a7f9,- adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) saturate(#9b8a60,50%) desaturate(#d9a621,50%) adjust-hue(#77 adjust-hue(#77a7f9,90) adjustsaturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) saturate(#9b8a60,50%) desaturate(#d9a621,5 saturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) darken(#6cf620,30%) desaturate(#d9a621,50%) lighten(#2e7805,50%) saturate(#9b8a saturate(#9b8a60,50%) desatu darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) lighten(#2e7805,50%) lighten(#2e7805,50%) lighten(#2e7805,50%)
saturate(#9b8a saturate(#9b8a60,50%) desatur saturate(#9b8a60,50%) desaturate(#d9a621,50%)darken(#6cf620,30%) lighten(#2e7805,50%) darken(#6cf620,30%) darken(#6cf620 darken(#6cf620,30%) lighten lighten(#2e7805,50%)fade-out(#fab, .5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgb fade-out(#fab, .
Mudar a CorPode setar qualquer propriedade de corchange-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); #19f65d #19f65d #19f65d $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, #19f65d #19f65d #19f65d #19f65d change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100);change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); #4288ff $saturation:100); #4288ff$saturation:100); change-color(#8e9cb3, change-color(#8e9cb3, #4288ff #4288ff #4288ff #4288ff #4288ff change-color(#6cf620, $green: 60, $blue: 100); change-color(#6cf620, $green: 60, $blue: 100);change-color(#6cf620,$green: 60,60, $blue: change-color(#6cf620, $green: 60,$blue: 100); change-color(#6cf620, $green: $blue: 100);100); #6C3C64 $green: 60, $blue: 100); #6C3C64$green: 60, $blue: 100); change-color(#6cf620, change-color(#6cf620, #6C3C64 #6C3C64 #6C3C64 #6C3C64 #6C3C64
Ajustar a CorPode incrementar qualquer propriedade de coradjust-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
adjust-color(#d3fa7b, $hue:60, $lightness:-20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); #19f65d #19f65d #19f65d adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); #19f65d #19f65dadjust-color(#5f8fe3, $green:100, $alpha: rgba(95, 255, 227, 0.75); -0.25); rgba(95, 255, 227, 0.75); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); rgba(95, 255, 227, 0.75); 0.75); rgba(95, 255, 255, 0.75); rgba(95, 227, 227,
Escalar a CorPode escalar em qualqer porcentagem qualquer propriedadede corscale-color($color, [$red], [$green], [$blue],[$saturation], [$lightness], [$alpha]);
scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); #d6fa84 #d6fa84 #d6fa84 #d6fa84 adjust-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%);adjust-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%); white white white white #d6fa84 scale-color adjust-color scale-color adjust-c adjust-color(#adf609, $lightness:50%); scale-color adjust-c white
Funções
.scss@function pxem($px, $context: 16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }.cssarticle h2 { font-size: 2.813em; }
Compass is an open-source CSS Authoring Framework.
Coleção de MixinsFunções SassAmbienteExtensões
http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed
Funções Helperadjust-lightness, scale-lightnessadjust-saturation, scale-saturationimage-urlimage-heightimage-widthinline-imagefont-urlinline-font-filespisincostan e mais...
.scssheader { background: image-url('hbg.png'); h1 { width: image-width('logo.png'); height: image-height('logo.png'); background: inline-image('logo.png') }}.cssheader { background: url('/images/hbg.png?1351...');}header h1 { width: 220px; height: 100px; background: url('data:image/png;base64...');}
MixinsUtilidadesBrowser Hacks, Clear!xes, ResetsEstilos para ElementosLinks, Lists, Float, Tables, TextDesign patternsTag Cloud, Sticky footer, Vertical rhythmCSS3appearance, background, gradients, background-clip background-origin, background-size, border-radius box, box-shadow,box-sizing,CSS3 PIE, columns, font-face, opacity, transform, transition, more...
.scss.msg {@include background(linear-gradient(#fff, #eee)); @include border-radius(5px);} .css.msg {background: -webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%, #ffffff), color-stop(100%, #eeeeee));background: -webkit-linear-gradient(#ffffff, #eeeeee);background: -moz-linear-gradient(#ffffff, #eeeeee);background: -ms-linear-gradient(#ffffff, #eeeeee);background: linear-gradient(#ffffff, #eeeeee);-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px; }
Plugins e ExtensõesFancy Buttons, Sassy Buttons - botões CSS3Animate - lib para animação em CSS3RGBApng - Gerar alpha pngs a partir do SassCompass Magick - Renderiza gradientes CSS3Gradients para png
Qu emusa?
Referências Sasshttp://sass-lang.com/http://sass-lang.com/docs/yardoc/ file.SASS_REFERENCE.htmlhttp://thesassway.com/
Referências Compasshttp://compass-style.org/http://compass-style.org/reference/ compass/
http://groups.google.com/ group/sass-lang
.contato { email: ‘curso@extjs4.com’; blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’; }
Obrigada!

Recommended

PDF
Preprocessor presentation
KEY
Finding a Better Way to CSS: Navigating Sass with Compass
PDF
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
PDF
CSS Extenders
PDF
Pacific Northwest Drupal Summit: Basic & SASS
PDF
Landing Pages 101
KEY
Demystifying CSS & WordPress
KEY
前端开发理论热点面对面：从怎么看，到怎么做？
KEY
Stylesheets of the future with Sass and Compass
PDF
Theming and Sass
KEY
Wrangling the CSS Beast with Sass
KEY
Sass&compass
PPTX
Css frameworks
KEY
FCIP SASS Talk
PDF
Work and play with SASS & Compass
PDF
Sass - Making CSS fun again.
PDF
Doing more with LESS
PDF
Sass & Compass (Barcamp Stuttgart 2012)
 
KEY
Using Sass - Building on CSS
PDF
Sass and Compass - Getting Started
KEY
Sass, Compass
PDF
Ext js saas&compass
PDF
Theming Ext JS 4
 
PDF
Save time by using SASS/SCSS
PDF
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
KEY
Simplifying CSS With Sass
PDF
SASS Preprocessor
PDF
Introdução a CSS
PDF
Security Forum Sessions from Houston 2025 Event
DOCX
iRobot Post‑Mortem and Alternative Paths - Discussion Document for Boards and...

More Related Content

PDF
Preprocessor presentation
KEY
Finding a Better Way to CSS: Navigating Sass with Compass
PDF
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
PDF
CSS Extenders
PDF
Pacific Northwest Drupal Summit: Basic & SASS
PDF
Landing Pages 101
KEY
Demystifying CSS & WordPress
KEY
前端开发理论热点面对面：从怎么看，到怎么做？
Preprocessor presentation
Finding a Better Way to CSS: Navigating Sass with Compass
Mobile-first OOCSS, Sass & Compass at BBC Responsive News
CSS Extenders
Pacific Northwest Drupal Summit: Basic & SASS
Landing Pages 101
Demystifying CSS & WordPress
前端开发理论热点面对面：从怎么看，到怎么做？

Similar to Curso CSS3 com Sass e Compass - Aula 01 - Introducão

KEY
Stylesheets of the future with Sass and Compass
PDF
Theming and Sass
KEY
Wrangling the CSS Beast with Sass
KEY
Sass&compass
PPTX
Css frameworks
KEY
FCIP SASS Talk
PDF
Work and play with SASS & Compass
PDF
Sass - Making CSS fun again.
PDF
Doing more with LESS
PDF
Sass & Compass (Barcamp Stuttgart 2012)
 
KEY
Using Sass - Building on CSS
PDF
Sass and Compass - Getting Started
KEY
Sass, Compass
PDF
Ext js saas&compass
PDF
Theming Ext JS 4
 
PDF
Save time by using SASS/SCSS
PDF
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
KEY
Simplifying CSS With Sass
PDF
SASS Preprocessor
PDF
Introdução a CSS
Stylesheets of the future with Sass and Compass
Theming and Sass
Wrangling the CSS Beast with Sass
Sass&compass
Css frameworks
FCIP SASS Talk
Work and play with SASS & Compass
Sass - Making CSS fun again.
Doing more with LESS
Sass & Compass (Barcamp Stuttgart 2012)
 
Using Sass - Building on CSS
Sass and Compass - Getting Started
Sass, Compass
Ext js saas&compass
Theming Ext JS 4
 
Save time by using SASS/SCSS
Sassive Aggressive: Using Sass to Make Your Life Easier (NSWG Version)
Simplifying CSS With Sass
SASS Preprocessor
Introdução a CSS

Recently uploaded

PDF
Security Forum Sessions from Houston 2025 Event
DOCX
iRobot Post‑Mortem and Alternative Paths - Discussion Document for Boards and...
PDF
GPUS and How to Program Them by Manya Bansal
PDF
Unser Jahresrückblick – MarvelClient in 2025
PDF
Our Digital Tribe_ Cultivating Connection and Growth in Our Slack Community 🌿...
PPTX
Software Analysis &Design ethiopia chap-2.pptx
PDF
Digit Expo 2025 - EICC Edinburgh 27th November
PPTX
Cloud-and-AI-Platform-FY26-Partner-Playbook.pptx
PDF
Is It Possible to Have Wi-Fi Without an Internet Provider
PPTX
wob-report.pptxwob-report.pptxwob-report.pptx
PDF
Vibe Coding vs. Spec-Driven Development [Free Meetup]
PDF
Internet_of_Things_IoT_for_Next_Generation_Smart_Systems_Utilizing.pdf
PPT
software-security-intro in information security.ppt
PDF
API-First Architecture in Financial Systems
PPTX
cybercrime in Information security .pptx
PPTX
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
PDF
Dev Dives: AI that builds with you - UiPath Autopilot for effortless RPA & AP...
PPTX
Cybercrime in the Digital Age: Risks, Impact & Protection
PDF
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
PPTX
From Backup to Resilience: How MSPs Are Preparing for 2026
 
Security Forum Sessions from Houston 2025 Event
iRobot Post‑Mortem and Alternative Paths - Discussion Document for Boards and...
GPUS and How to Program Them by Manya Bansal
Unser Jahresrückblick – MarvelClient in 2025
Our Digital Tribe_ Cultivating Connection and Growth in Our Slack Community 🌿...
Software Analysis &Design ethiopia chap-2.pptx
Digit Expo 2025 - EICC Edinburgh 27th November
Cloud-and-AI-Platform-FY26-Partner-Playbook.pptx
Is It Possible to Have Wi-Fi Without an Internet Provider
wob-report.pptxwob-report.pptxwob-report.pptx
Vibe Coding vs. Spec-Driven Development [Free Meetup]
Internet_of_Things_IoT_for_Next_Generation_Smart_Systems_Utilizing.pdf
software-security-intro in information security.ppt
API-First Architecture in Financial Systems
cybercrime in Information security .pptx
Unit-4-ARTIFICIAL NEURAL NETWORKS.pptx ANN ppt Artificial neural network
Dev Dives: AI that builds with you - UiPath Autopilot for effortless RPA & AP...
Cybercrime in the Digital Age: Risks, Impact & Protection
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
From Backup to Resilience: How MSPs Are Preparing for 2026
 

Curso CSS3 com Sass e Compass - Aula 01 - Introducão

  • 1.
    Curso CSS com Sass e Compass: IntroduçãoLoiane Gronerhttp://loiane.com
  • 3.
    .msg { padding:24px; }.msg h3 { padding: 24px; }
  • 4.
    .msg { padding:24px; }.msg h3 { padding: 24px; }
  • 5.
    .msg { padding:24px; }.msg h3 { padding: 24px; }
  • 6.
    .msg { padding:24px; }.msg h3 { padding: 24px; }Problemas• Repetição gera problemas para manter codigo• Relacionamentos não estão claros• Razões para tais valores estão na cabeça de quem fez odesign
  • 8.
    Sass é umaextensão doCSS3 que permite que vocêcrie folhas de estilo melhorescom um esforço menor
  • 9.
    De Sa ssPara C SS
  • 10.
    SCSS - SassyCSS (.scss)h1 { color: #000; background: #fff;}
  • 11.
    Indented Sass (.sass)h1 color: #000 background: #fff
  • 12.
    P ense ic am enteDin am
  • 13.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 14.
  • 15.
  • 16.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 17.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 18.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 19.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 20.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 21.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 22.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 23.
    $blue: #3bbfce;$margin: 16px;.content-navigation{ border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  • 24.
  • 25.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 26.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 27.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 28.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 29.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 30.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 31.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 32.
    .scss .css$blue: #3bbfce;$margin: 16px; /* CSS */.content-navigation { .content-navigation { border-color: $blue; border-color: #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: #3bbfce; border-color: $blue; }}
  • 33.
    Com Sass...• Nãotem repetição -> custo de manuntenção é baixo• Variáveis deixam os relacionamentos claros• Razões para tais valores ficam evidentes
  • 34.
  • 35.
    .scss .csstable.hl { /* CSS */ margin: 2em 0; td.ln { table.hl { text-align: right; margin: 2em 0; } }} table.hl td.ln { text-align: right;li { } font: { family: serif; li { weight: bold; font-family: serif; size: 1.2em; font-weight: bold; } font-size: 1.2em;} }
  • 36.
  • 37.
    .scss .css.error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError {} border: 1px #f00;.error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold;} .error.intrusion, .badError.intrusion {.badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; }} .badError { border-width: 3px; }
  • 38.
    .scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  • 39.
    .scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  • 40.
    .scss .css .error { /* CSS */ border: 1px #f00; background: #fdd; .error, .badError { } border: 1px #f00; .error.intrusion { background: #fdd; font-size: 1.3em; } font-weight: bold; } .error.intrusion, .badError.intrusion { .badError { font-size: 1.3em; @extend .error; font-weight: bold; border-width: 3px; } } .badError {<div class="error badError"> border-width: 3px;Erros Graves }</div>
  • 41.
  • 42.
    .scss .css@mixin table-base { th { /* CSS */ text-align: center; font-weight: bold; #data { } float: left; td, th {padding: 2px} margin-left: 10px;} } #data th {@mixin left($dist) { text-align: center; float: left; font-weight: bold; margin-left: $dist; }} #data td, #data th { padding: 2px;#data { } @include left(10px); @include table-base;}
  • 43.
  • 44.
    /* projeto.scss */@import"core";@import "header", "footer"; sc ss _ core. .sc ss _ footer sc ss _h eader. projeto.css projeto.scss
  • 45.
    Opera ções tem á tic asMa
  • 46.
    Operadores MatemáticosOperadores Matemáticos(+, -, *, /, %) funcionam comnúmeros2em + 2em; //4em2em - 1em; //1em1in + 72pt; //2in5px * 4; //20px19 % 3; //1
  • 47.
    Divisãofont: 2px /2px; //1pxfont: 25px / 4+1; //5pxfont: $base / 2;
  • 48.
    Funções Numéricaspercentage(13/25); //52%round(4.4);//4ceil(4.2); //5floor(4.6); //4abs(-5); //5
  • 49.
    Loo pe dic ion aisC on es Cond i ci o n a i s < > <= = > == !=›O perador else, @ e l se i f› @if, @ , @ e a ch , @w h i l e › @for › and, or
  • 50.
    Operadores Relacionais (<,>, <=, >=) comparamnúmeros1 < 25 // true10 <= 30 // true3 > 2 // true3 >= 2 // trueOperacores de Comparação (==, !=) comparamqualquer tipo1 + 1 == 2 // truesmall != big // true#000 == black // true
  • 51.
    red== #f00red == #ff0000red == rgb(255, 0, 0)red == rgba(255, 0, 0, 1.0)red == hsl(0deg, 100%, 100%)red == hsla(0deg, 100%, 100%, 1)
  • 52.
    @if, @else, @elseif$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; }}
  • 53.
    Loop @for.scss@for $ifrom 1 through 3 { .item-#{$i} { width: 2em * $i; }}.css.item-1 { width: 2em; }.item-2 { width: 4em; }.item-3 { width: 6em; }
  • 54.
    Loop @while.scss$i: 6;@while$i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2;}.css.item-6 { width: 12em; }.item-4 { width: 8em; }.item-2 { width: 4em; }
  • 55.
    Loop @each.scss@each $animalin puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); }}.css.puma-icon { background-image: url('/images/puma.png'); }.sea-slug-icon { background-image: url('/images/sea-slug.png'); }.egret-icon { background-image: url('/images/egret.png'); }.salamander-icon { background-image: url('/images/salamander.png'); }
  • 56.
  • 57.
    Função RGBA.scssa {color: rgba(blue, .75) }p { background: rgba(#ffa, .25) }.cssa { color: rgba(255, 255, 170, 0.25) }p { background: rgba(255, 255, 170, 0.25) }
  • 58.
    Inspecionando Cores$color: red;hue($color);//0degsaturation($color); // 100%lightness($color); // 50%red($color); //100green($color); //0blue($color); //0alpha($color); //100
  • 59.
    Manipulando Cores invert(blue)invert(blue) invert(blue)invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) complement(#6cf620) invert(blue)invert(blue) invert(blue) invert(blue) complement(#6cf620) complement(#6cf620) co coinvert(blue) complement(#6cf620) mix(red, yellow) mix(red,yellow) mix(red,yellow, 30%) 30%) mix(red,yellow) yellow) mix(red, yellow, 30%)mix(red, yellow)mix(red, yellow) mix(red, yellow, 30%) mix(red, yellow, 30%) mix(red, yellow, mix(red,mix(red, yellow) yellow) mix(red, yellow) 30%) mi mix(red, yellow) yellow, mix(red, yellow, 30%) yellow, 30%) mimix(red, mix(red, grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow) grayscale(yellow) grayscale(yellow)grayscale(yellow)grayscale(yellow) grayscale(yellow)grayscale(yellow)
  • 60.
    Manipulando HSLAadjust-hue(#77a7f9,90) adjust-hue(#77a7f9,90)adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90)adjust-hue(#77a7f9,90 adjust-hue(#77a7f9,- adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) saturate(#9b8a60,50%) desaturate(#d9a621,50%) adjust-hue(#77 adjust-hue(#77a7f9,90) adjustsaturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) saturate(#9b8a60,50%) desaturate(#d9a621,5 saturate(#9b8a60,50%) desaturate(#d9a621,50%) saturate(#9b8a60,50%) darken(#6cf620,30%) desaturate(#d9a621,50%) lighten(#2e7805,50%) saturate(#9b8a saturate(#9b8a60,50%) desatu darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) darken(#6cf620,30%) lighten(#2e7805,50%) lighten(#2e7805,50%) lighten(#2e7805,50%)
  • 61.
    saturate(#9b8a saturate(#9b8a60,50%) desatur saturate(#9b8a60,50%) desaturate(#d9a621,50%)darken(#6cf620,30%) lighten(#2e7805,50%) darken(#6cf620,30%) darken(#6cf620 darken(#6cf620,30%) lighten lighten(#2e7805,50%)fade-out(#fab, .5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5) fade-in(rgba(#fab,.5),.5) fade-out(#fab, .5) fade-in(rgb fade-out(#fab, .
  • 62.
    Mudar a CorPodesetar qualquer propriedade de corchange-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
  • 63.
    change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, $hue:60); #19f65d #19f65d #19f65d $hue:60); change-color(#ba5637, $hue:60); change-color(#ba5637, #19f65d #19f65d #19f65d #19f65d change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100);change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); change-color(#8e9cb3, $saturation:100); #4288ff $saturation:100); #4288ff$saturation:100); change-color(#8e9cb3, change-color(#8e9cb3, #4288ff #4288ff #4288ff #4288ff #4288ff change-color(#6cf620, $green: 60, $blue: 100); change-color(#6cf620, $green: 60, $blue: 100);change-color(#6cf620,$green: 60,60, $blue: change-color(#6cf620, $green: 60,$blue: 100); change-color(#6cf620, $green: $blue: 100);100); #6C3C64 $green: 60, $blue: 100); #6C3C64$green: 60, $blue: 100); change-color(#6cf620, change-color(#6cf620, #6C3C64 #6C3C64 #6C3C64 #6C3C64 #6C3C64
  • 64.
    Ajustar a CorPodeincrementar qualquer propriedade de coradjust-color($color, [$red], [$green], [$blue],[$hue], [$saturation], [$lightness], [$alpha]);
  • 65.
    adjust-color(#d3fa7b, $hue:60, $lightness:-20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); #19f65d #19f65d #19f65d adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); #19f65d #19f65dadjust-color(#5f8fe3, $green:100, $alpha: rgba(95, 255, 227, 0.75); -0.25); rgba(95, 255, 227, 0.75); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); rgba(95, 255, 227, 0.75); 0.75); rgba(95, 255, 255, 0.75); rgba(95, 227, 227,
  • 66.
    Escalar a CorPodeescalar em qualqer porcentagem qualquer propriedadede corscale-color($color, [$red], [$green], [$blue],[$saturation], [$lightness], [$alpha]);
  • 67.
    scale-color(#adf609, $lightness:50%);scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); #d6fa84 #d6fa84 #d6fa84 #d6fa84 adjust-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%);adjust-color(#adf609, $lightness:50%); scale-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%); white white white white #d6fa84 scale-color adjust-color scale-color adjust-c adjust-color(#adf609, $lightness:50%); scale-color adjust-c white
  • 68.
  • 69.
    .scss@function pxem($px, $context:16px) { @return ($px / $context) * 1em;}article h2 { font-size: pxem(45px); }.cssarticle h2 { font-size: 2.813em; }
  • 71.
    Compass is anopen-source CSS Authoring Framework.
  • 72.
    Coleção de MixinsFunçõesSassAmbienteExtensões
  • 73.
    http_path = "/"css_dir= "stylesheets"sass_dir = "sass"images_dir = "images"fonts_dir = "fonts"javascripts_dir = "javascripts"output_style = :compressed
  • 74.
    Funções Helperadjust-lightness, scale-lightnessadjust-saturation,scale-saturationimage-urlimage-heightimage-widthinline-imagefont-urlinline-font-filespisincostan e mais...
  • 75.
    .scssheader {background: image-url('hbg.png'); h1 { width: image-width('logo.png'); height: image-height('logo.png'); background: inline-image('logo.png') }}.cssheader { background: url('/images/hbg.png?1351...');}header h1 { width: 220px; height: 100px; background: url('data:image/png;base64...');}
  • 76.
    MixinsUtilidadesBrowser Hacks, Clear!xes,ResetsEstilos para ElementosLinks, Lists, Float, Tables, TextDesign patternsTag Cloud, Sticky footer, Vertical rhythmCSS3appearance, background, gradients, background-clip background-origin, background-size, border-radius box, box-shadow,box-sizing,CSS3 PIE, columns, font-face, opacity, transform, transition, more...
  • 77.
    .scss.msg {@include background(linear-gradient(#fff,#eee)); @include border-radius(5px);} .css.msg {background: -webkit-gradient(linear, 50% 0%, 50% 100%,color-stop(0%, #ffffff), color-stop(100%, #eeeeee));background: -webkit-linear-gradient(#ffffff, #eeeeee);background: -moz-linear-gradient(#ffffff, #eeeeee);background: -ms-linear-gradient(#ffffff, #eeeeee);background: linear-gradient(#ffffff, #eeeeee);-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius: 5px;border-radius: 5px; }
  • 78.
    Plugins e ExtensõesFancyButtons, Sassy Buttons - botões CSS3Animate - lib para animação em CSS3RGBApng - Gerar alpha pngs a partir do SassCompass Magick - Renderiza gradientes CSS3Gradients para png
  • 79.
  • 82.
  • 83.
  • 85.
  • 86.
    .contato { email: ‘curso@extjs4.com’; blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’; }
  • 87.
[8]ページ先頭
©2009-2025 Movatter.jp