Media Examples


/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

// SCSS
// A map of breakpoints.
$breakpoints: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);
@mixin respond-above($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $breakpoint-value: map-get($breakpoints, $breakpoint);
    @media (min-width: $breakpoint-value) {
      @content;
    }
  } @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

z-index

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Each Examples

$colorset: (
    primary: #aaa,
    accent: #bbb,
);
:root {
    @each $key, $val in $colorset {
        --#{$key}: #{$val};
    }
}
button {
	color: var(--#{$key})
}

Function Definitions

$colorKeys: 'primary', 'accent', 'warn';
@mixin each-colors {
  @for $i from 1 through length($colorKeys) {
    @content(nth($colorKeys, $i));
  }
}
@include each-colors using ($colorKey) {
  @if $color!= '' {
		button.#{$colorKey} {
			color: var(--#{$colorKey});
		}
  }
}

JS Operations

getComputedStyle(document.querySelector(":root")).getPropertyValue("--dark--primary");
document.querySelector('#id').classList.value.split(' ');