Generated by SassMeister.com.
<h1 column="2">Columns + value</h1>
<h1 column>Columns only</h1>
<p column="2 +1">Columns +Offsett</p>
<p column="2 -1">Columns -Offsett</p>
<p column="2 of 4">Columns OF Context</p>
<p column="2/4">Columns / Context</p>
<p column="2 of 4 +1">Columns OF Context +Offsett</p>
<p column="2/4 +1">Columns / Context +Offsett</p>
<p column="2 of 4 -1">Columns OF Context -Offsett</p>
<p column="2/4 -1">Columns / Context -Offsett</p>
/* Column only */
[column] {
padding: 5px;
color: blue;
}
[column|="2"] {
background: yellow;
}
/* Column and context */
[column~="of"],
[column*="/"] {
background: pink;
}
/* Columns + offset All */
[column*="+"] {
background-color: rgba(192, 192, 192, 0.5);
}
[column*="-"] {
background-color: rgba(0, 128, 0, 0.5);
}
/* Columns + context + offset only */
[column~="of"][column*="+"],
[column*="/"][column*="+"] {
border: 5px dotted silver;
}
[column~="of"][column*="-"],
[column*="/"][column*="-"] {
border: 5px dotted green;
}
// ----
// libsass (v3.2.5)
// ----
/* Column only */
[column] {
// All elements
padding: 5px;
color: blue;
}
[column|="2"] {
background: yellow;
}
/* Column and context */
[column~="of"],
[column*="/"]{
background: pink;
}
/* Columns + offset All */
[column*="+"] {
background-color: rgba(silver, .5);
}
[column*="-"] {
background-color: rgba(green,.5);
}
/* Columns + context + offset only */
[column~="of"][column*="+"],
[column*="/"][column*="+"]{
border:5px dotted silver;
}
[column~="of"][column*="-"],
[column*="/"][column*="-"]{
border:5px dotted green;
}
<h1 column="2">Columns + value</h1>
<h1 column>Columns only</h1>
<p column="2 +1">Columns +Offsett</p>
<p column="2 -1">Columns -Offsett</p>
<p column="2 of 4">Columns OF Context</p>
<p column="2/4">Columns / Context</p>
<p column="2 of 4 +1">Columns OF Context +Offsett</p>
<p column="2/4 +1">Columns / Context +Offsett</p>
<p column="2 of 4 -1">Columns OF Context -Offsett</p>
<p column="2/4 -1">Columns / Context -Offsett</p>