library/components/_column.sass at master · mvcss/library · GitHub

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
// *************************************
//
//   Column
//   -> Adjacent vertical blocks
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .column[1|2|3|...]
//   / ...
//
// *************************************

// -------------------------------------
//   Variables
// -------------------------------------

$column-columns: 4 !default
$column-defaults: 's' 30em, 'm' 50em, 'l' 64em !default
$column-space: 1.25em !default

// -------------------------------------
//   Base
// -------------------------------------

.column
  column-gap: $column-space

// -------------------------------------
//   Setup
// -------------------------------------

=column-device-type($namespace: '')
  @for $i from 1 through $column-columns
    .column--#{$namespace}#{$i}
      columns: $i

// -------------------------------------
//   Creation
// -------------------------------------

+column-device-type()

@each $device in $column-defaults
  @media screen and (min-width: nth($device, 2))
    +column-device-type("#{nth($device, 1)}--")