https://www.notion.so/CSS-SCSS-a61936cf214e472fab3cffda0ef05f04
Media Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 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
1
2
3
4
5
6
7
$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
1
2
3
4
5
6
7
8
9
10
11
12
$colorset: (
primary: #aaa,
accent: #bbb,
);
:root {
@each $key, $val in $colorset {
--#{$key}: #{$val};
}
}
button {
color: var(--#{$key})
}
Function Definitions
1
2
3
4
5
6
7
8
9
10
11
12
13
$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
1
getComputedStyle(document.querySelector(":root")).getPropertyValue("--dark--primary");
1
document.querySelector('#id').classList.value.split(' ');