File: input.scss

package info (click to toggle)
node-node-sass 9.0.0%2Bgit20240131.6081731%2Bdfsg-3
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid, trixie
  • size: 75,520 kB
  • sloc: javascript: 7,313; cpp: 1,495; perl: 428; makefile: 11
file content (62 lines) | stat: -rw-r--r-- 1,483 bytes parent folder | download | duplicates (4)
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// Media queries can be nested within one another. The intersection of the two
// queries will be generated.
@media screen {
  a {b: c}
  @media (color) {x {y: z}}
}

// Features always go to the end of a query, even if they're at an outer nesting
// level.
@media (color) {
  a {b: c}
  @media screen {x {y: z}}
}

// Different features can be intersected.
@media (max-width: 300px) {
  a {b: c}
  @media (min-width: 200px) {x {y: z}}
}

// Different media types *can't* be intersected, so they're eliminated.
@media screen {
  a {b: c}
  @media print {x {y: z}}
}

// Likewise, there's no way to generate the intersection of these queries. We
// could write `not screen and (color)`, but that actually means "neither
// `screen` nor `(color)`" rather than "not `screen` but yes `(color)`.
//
// The latest spec allows us to generate `not screen and not (color)` here,
// which would work, but no browsers support it yet.
@media not screen {
  a {b: c}
  @media (color) {x {y: z}}
}

// The intersection of `not screen` and `print` is just `print`.
@media not screen {
  a {b: c}
  @media print {x {y: z}}
}
@media print {
  a {b: c}
  @media not screen {x {y: z}}
}

/// The intersection of `not screen` and `screen` is empty.
@media not screen {
  a {b: c}
  @media screen {x {y: z}}
}
@media screen {
  a {b: c}
  @media not screen {x {y: z}}
}

// Unlike `not`, the `only` keyword is preserved through intersection.
@media only screen {
  a {b: c}
  @media (color) {x {y: z}}
}