CSS Variables @guilh https://sass-lang.com/guide - - PowerPoint PPT Presentation

▶
css variables
SMART_READER_LITE
LIVE PREVIEW

CSS Variables @guilh https://sass-lang.com/guide - - PowerPoint PPT Presentation

Sep 14, 2023 208 likes •608 views

The Power and Flexibility of CSS Variables @guilh https://sass-lang.com/guide http://lesscss.org/features/#variables-feature https://caniuse.com/#feat=css-variables CSS variables hold references to values you can reuse --property-name:

slide-1
SLIDE 1

The Power and Flexibility of

CSS Variables

@guilh

slide-2
SLIDE 2 https://sass-lang.com/guide
slide-3
SLIDE 3 http://lesscss.org/features/#variables-feature
slide-4
SLIDE 4 https://caniuse.com/#feat=css-variables
slide-5
SLIDE 5

CSS variables hold references to values you can reuse

slide-6
SLIDE 6
  • -property-name: value;
slide-7
SLIDE 7

var(--property-name)

slide-8
SLIDE 8

:root {

  • -color-primary: #278da4;
  • -color-secondary: #b13c69;

}

slide-9
SLIDE 9

:root {

  • -color-primary: #278da4;
  • -color-secondary: #b13c69;

} .headline { color: var(--color-secondary); } .btn { background-color: var(--color-primary); }

slide-10
SLIDE 10

:root {

  • -color-bg: #3acec2;
  • -color-bg-light: #009fe1;

} header { background-image: linear-gradient( var(--color-bg-light), var(--color-bg) ); }

slide-11
SLIDE 11

:root {

  • -color-bg: #3acec2;
  • -color-bg-light: #009fe1;
  • -gradient: var(--color-bg-light),

var(--color-bg); } header { background-image: linear-gradient( var(--gradient) ); }

slide-12
SLIDE 12

:root { /* Fonts */

  • -font-stack-primary: 'Raleway', sans-serif;
  • -font-stack-secondary: 'Bree Serif', serif;

/* Layout */

  • -max-width: 1000px;
  • -margin-size: 10px;

}

¯\_(ツ)_/¯

slide-13
SLIDE 13

CSS variables do things preprocessor variables can’t

slide-14
SLIDE 14

Preprocessor Variables

  • Static
  • Do not run in the browser
  • Not aware of the DOM structure
slide-15
SLIDE 15

CSS Variables

  • Aware of the DOM structure
  • Dynamic
  • Update at computed value time
slide-16
SLIDE 16

:root {

  • -margin-size: 0.5em;

} .headline { margin-bottom: var(--margin-size); } .col + .col { margin-left: var(--margin-size); }

slide-17
SLIDE 17

@media (min-width: 576px) { :root {

  • -margin-size: 2em;

} } @media (min-width: 768px) { :root {

  • -margin-size: 3em;

} }

slide-18
SLIDE 18
slide-19
SLIDE 19

:root { /* Colors */

  • -color-primary: #278da4;
  • -color-secondary: #b13c69;

/* Fonts */

  • -font-stack-primary: 'Raleway', sans-serif;
  • -font-stack-secondary: 'Bree Serif', serif;

/* Layout */

  • -max-width: 1000px;
  • -margin-size: 10px;

}

slide-20
SLIDE 20

Declare CSS variables in

  • ther places besides

:root

slide-21
SLIDE 21

They inherit, cascade and can be scoped to selectors

slide-22
SLIDE 22

.btn { ... background-color: var(--button-bg); } .btn.callout {

  • -button-bg: #1de9b6;

} .btn.info {

  • -button-bg: #0097bf;

}

slide-23
SLIDE 23

<a class="btn callout" href="#">Callout Button</a> <a class="btn info" href="#">Info Button</a>

slide-24
SLIDE 24

.btn { ... background-color: var(--button-bg); } .btn.callout {

  • -button-bg: #1de9b6;

} .btn.info {

  • -button-bg: #0097bf;

}

slide-25
SLIDE 25
slide-26
SLIDE 26

Style elements based on where they appear in the DOM

slide-27
SLIDE 27

.card .btn {...} .modal > .btn {...} .banner .btn {...}

slide-28
SLIDE 28

.btn { font-size: var(--btn-font-size); background-color: var(--btn-bg); ... }

slide-29
SLIDE 29

/* .card .btn */ .card {

  • -btn-font-size: 0.85em;
  • -btn-bg: #29abe6;

} /* .modal > .btn */ .modal {

  • -btn-font-size: 1em;
  • -btn-bg: #25abaa;

} <div class="card"> <a class="btn" href="#">More</a> </div> <div class="modal"> <a class="btn" href="#">Start</a> </div>

slide-30
SLIDE 30

×

Modal Scope Card Scope

slide-31
SLIDE 31

Perform calculations with CSS variables

slide-32
SLIDE 32

:root {

  • -margin-size: 2;

} .img-featured { margin-bottom: calc(var(--margin-size) * 10px); /* 20px */ } .headline { margin-bottom: calc(var(--margin-size) * 1em); /* 2em */ }

slide-33
SLIDE 33

Update CSS variables with JavaScript

slide-34
SLIDE 34

getPropertyValue() setProperty()

slide-35
SLIDE 35

.ball { background-color: var(--ball-bg); transform: translate( calc( var(--pos-x) * 1px), calc( var(--pos-y) * 1px) ); }

slide-36
SLIDE 36

// Select element const ball = document.querySelector('.ball'); // Update CSS custom property values body.addEventListener('click', e => { ball.style.setProperty( '--pos-x', e.clientX ); ball.style.setProperty( '--pos-y', e.clientY ); ball.style.setProperty( '--ball-bg', randomHex() ); });

slide-37
SLIDE 37

// Select element const ball = document.querySelector('.ball'); // Update CSS custom property values body.addEventListener('click', e => { ball.style.setProperty( '--pos-x', e.clientX ); ball.style.setProperty( '--pos-y', e.clientY ); ball.style.setProperty( '--ball-bg', randomHex() ); });

slide-38
SLIDE 38

Thanks!

@guilh

slide-39
SLIDE 39

teamtreehouse.com