mistergraphx
10/31/2015 - 12:27 PM

Generated by SassMeister.com.

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>