├── .gitignore
├── config.rb
├── sass
    └── screen.sass
└── stylesheets
    └── screen.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache
2 | 


--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
 1 | # Require any additional compass plugins here.
 2 | 
 3 | # Set this to the root of your project when deployed:
 4 | http_path = "/"
 5 | css_dir = "stylesheets"
 6 | sass_dir = "sass"
 7 | images_dir = "images"
 8 | javascripts_dir = "javascripts"
 9 | 
10 | # You can select your preferred output style here (can be overridden via the command line):
11 | # output_style = :expanded or :nested or :compact or :compressed
12 | 
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 | 
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | line_comments = false
18 | 
19 | 
20 | # If you prefer the indented syntax, you might want to regenerate this
21 | # project again passing --syntax sass, or you can uncomment this:
22 | # preferred_syntax = :sass
23 | # and then run:
24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
25 | 


--------------------------------------------------------------------------------
/sass/screen.sass:
--------------------------------------------------------------------------------
 1 | // If
 2 | 
 3 | // Set a variable to run the if statement against
 4 | $boolean: true !default
 5 | 
 6 | =simple-mixin
 7 |   @if $boolean
 8 |     @debug "$boolean is #{$boolean}"
 9 |     display: block
10 |   @else
11 |     @debug "$boolean is #{$boolean}"
12 |     display: none
13 | 
14 | .some-selector
15 |   +simple-mixin
16 | 
17 | // For
18 | 
19 | $class-slug: for !default
20 | 
21 | @for $i from 1 through 4
22 |   .#{$class-slug}-#{$i}
23 |     width: 60px + $i
24 | 
25 | // Each
26 | 
27 | $list: adam john wynn mason kuroir
28 | 
29 | =author-images
30 |   @each $author in $list
31 |     .photo-#{$author}
32 |       background: image-url("avatars/#{$author}.png") no-repeat
33 | 
34 | .author-bio
35 |   +author-images
36 | 
37 | // While
38 | 
39 | $types: 4
40 | $type-width: 20px
41 | 
42 | @while $types > 0
43 |   .while-#{$types}
44 |     width: $type-width + $types
45 |   $types: $types - 1
46 | 


--------------------------------------------------------------------------------
/stylesheets/screen.css:
--------------------------------------------------------------------------------
 1 | .some-selector {
 2 |   display: block;
 3 | }
 4 | 
 5 | .photo-1 {
 6 |   background: url('/images/photo.png') no-repeat left 1px;
 7 | }
 8 | 
 9 | .photo-2 {
10 |   background: url('/images/photo.png') no-repeat left 2px;
11 | }
12 | 
13 | .photo-3 {
14 |   background: url('/images/photo.png') no-repeat left 3px;
15 | }
16 | 
17 | .photo-4 {
18 |   background: url('/images/photo.png') no-repeat left 4px;
19 | }
20 | 
21 | .author-bio .photo-adam {
22 |   background: url('/images/avatars/adam.png') no-repeat;
23 | }
24 | .author-bio .photo-john {
25 |   background: url('/images/avatars/john.png') no-repeat;
26 | }
27 | .author-bio .photo-wynn {
28 |   background: url('/images/avatars/wynn.png') no-repeat;
29 | }
30 | .author-bio .photo-mason {
31 |   background: url('/images/avatars/mason.png') no-repeat;
32 | }
33 | .author-bio .photo-kuroir {
34 |   background: url('/images/avatars/kuroir.png') no-repeat;
35 | }
36 | 
37 | .while-4 {
38 |   width: 24px;
39 | }
40 | 
41 | .while-3 {
42 |   width: 23px;
43 | }
44 | 
45 | .while-2 {
46 |   width: 22px;
47 | }
48 | 
49 | .while-1 {
50 |   width: 21px;
51 | }
52 | 


--------------------------------------------------------------------------------