scssphp/tests/inputs/content.scss at dev · bastianjoel/scssphp · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

@mixin apply-to-ie6-only {
    * html {
        @content;
    }
}
@include apply-to-ie6-only {
    #logo {
        background-image: url(/logo.gif);
    }
}


$color: white;
@mixin colors($color: blue) {
    background-color: $color;
    @content;
    border-color: $color;
}
.colors {
    @include colors { color: $color; }
}


@mixin iphone {
    @media only screen and (max-width: 480px) {
        @content;
    }
}

@include iphone {
    body { color: red }
}


#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include iphone {
    width: $sidebar-width / 3;
  }
}


@mixin respond-to($width) {
  @media only screen and (min-width: $width) { @content; }
}

@include respond-to(40em) {
  @for $i from 1 through 2 {
    .grid-#{$i} { width: 100%; }
  }
}

@include respond-to(40em) {
  $i: 1;
  @while $i <= 2 {
    .grid-#{$i} { width: 100%; }
    $i: $i + 1;
  }
}

@mixin nested($args) {
  * body {
    @content;
  }
}

@mixin top($args) {
  * html {
    @include nested($args) {
      @content;
    }
  }
}

@include top('hello' 'world') {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin foo {
    @content;
}

@mixin bar {
    @content;
}

A {
    @include foo {
        $top: 10px;

        @include bar {
            top: $top;
        }
    }
}

@mixin two() {
  @content;
}
@mixin three() {
  @content;
}
@mixin one() {
  @include two() {
    @include three() {
      @content;
    }
  }
}
.test {
  @include one() {
    display: none;
  }
}

@mixin empty_content() {
  @content;
}
.test_empty_content {
  display: inline;
  font-weight: bold;
  @include empty_content()
}