File: division-vs-literal-slash.scss

package info (click to toggle)
python-pyscss 1.3.4-4~bpo8%2B1
  • links: PTS, VCS
  • area: main
  • in suites: jessie-backports
  • size: 6,160 kB
  • sloc: python: 12,494; ansic: 1,544; makefile: 152; sh: 24
file content (31 lines) | stat: -rw-r--r-- 695 bytes parent folder | download | duplicates (6)
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
@option style:legacy;

// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#division-and-slash

// "by default, if two numbers are separated by / in SassScript, then they will
// appear that way in the resulting CSS."
h1 {
  font: 3px/0;
}

h2 {
  border-radius: 10px 9px 8px 7px / 6px 5px 4px 3px;
}

// "However, there are three situations where the / will be interpreted as
// division."
// 1. If the value, or any part of it, is stored in a variable.
$denom: 5;
h3 {
  line-height: 10 / $denom;
}

// 2. If the value is surrounded by parentheses.
h4 {
  line-height: (10 / 5);
}

// 3. If the value is used as part of another arithmetic expression.
h5 {
  line-height: 10 / 5 + 0;
}