├── sass ├── csscss │ ├── _variables.scss │ ├── _mixins.scss │ ├── csscss2.scss │ └── csscss1.scss └── csslint │ ├── sample.scss │ └── clean.scss ├── Gemfile ├── .gitignore ├── README.md ├── config.rb └── LICENSE /sass/csscss/_variables.scss: -------------------------------------------------------------------------------- 1 | $blue: #063886; -------------------------------------------------------------------------------- /sass/csscss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin zero-out { 2 | margin: 0; 3 | padding: 0; 4 | } -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'compass-csslint' 4 | gem 'compass-csscss' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Gemfile.lock 2 | *.gem 3 | *.rbc 4 | .bundle 5 | .config 6 | coverage 7 | InstalledFiles 8 | lib/bundler/man 9 | pkg 10 | rdoc 11 | spec/reports 12 | test/tmp 13 | test/version_tmp 14 | tmp 15 | 16 | stylesheets 17 | .sass-cache 18 | 19 | Gemfile.lock 20 | 21 | # YARD artifacts 22 | .yardoc 23 | _yardoc 24 | doc/ 25 | 26 | .DS_Store -------------------------------------------------------------------------------- /sass/csscss/csscss2.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | @import "variables"; 3 | @import "mixins"; 4 | 5 | article, #comments { 6 | font-family: Helvetica; 7 | font-size: 1em; 8 | color: #333; 9 | @include zero-out; 10 | } 11 | 12 | 13 | .screenshot img { 14 | float: left; 15 | border-radius: 3px; 16 | border-color: adjust-saturation($blue, -33%); 17 | margin: 1em; 18 | } 19 | a.blurb img { 20 | float: left; 21 | border-radius: 3px; 22 | border-color: adjust-saturation($blue, -33%); 23 | margin: 1em; 24 | } 25 | 26 | 27 | body.home h2 { 28 | font-family: Georgia; 29 | font-size: 2em; 30 | border-bottom: 1px solid #cc0000; 31 | padding: 0 0 0.5em; 32 | } 33 | 34 | 35 | article:hover { 36 | background-color: #FDFEBD; 37 | color: #000; 38 | outline: dotted 1px; 39 | } 40 | -------------------------------------------------------------------------------- /sass/csscss/csscss1.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | @import "variables"; 3 | @import "mixins"; 4 | 5 | .contact .content .primary { 6 | font-family: Helvetica; 7 | font-size: 1em; 8 | color: #333; 9 | @include zero-out; 10 | } 11 | 12 | 13 | .profile-picture { 14 | float: left; 15 | border-radius: 3px; 16 | border-color: adjust-saturation($blue, -33%); 17 | margin: 1em; 18 | } 19 | 20 | 21 | .work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2 { 22 | font-family: Georgia; 23 | font-size: 2em; 24 | border-bottom: 1px solid #cc0000; 25 | padding: 0 0 0.5em; 26 | } 27 | 28 | 29 | article.blurb:hover { 30 | background-color: #FDFEBD; 31 | color: #000; 32 | outline: dotted 1px; 33 | } 34 | 35 | 36 | #{headers()} { 37 | color: shade(#f00, 50%); 38 | border-bottom: 1px solid shade(#f00, 20%); 39 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # compass-extensions-sample 2 | 3 | Basic Compass project with sample .scss files to demonstrate the usage of [CSS Lint](http://comcast.github.io/compass-csslint/) & [csscss](https://github.com/Comcast/compass-csscss) with Compass. 4 | 5 | ## Installation 6 | 7 | Assuming ruby is installed on your system, clone this project & then from the root run: 8 | 9 | $ bundle install 10 | 11 | Note that this requires at least version 1.0.0.alpha.13 of [Compass](http://compass-style.org/) to work properly. 12 | 13 | ## CSS Lint Usage 14 | 15 | Run the following command from the root of your Compass project: 16 | 17 | $ compass csslint 18 | 19 | To view options: 20 | 21 | $ compass csslint --help 22 | 23 | ## csscss Usage 24 | 25 | Run the following command from the root of your Compass project: 26 | 27 | $ compass csscss 28 | 29 | To view options: 30 | 31 | $ compass csscss --help -------------------------------------------------------------------------------- /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 | # If you prefer the indented syntax, you might want to regenerate this 20 | # project again passing --syntax sass, or you can uncomment this: 21 | # preferred_syntax = :sass 22 | # and then run: 23 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | compass-extensions-sample 2 | Copyright (c) Comcast. All rights reserved. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in 12 | all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 | THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /sass/csslint/sample.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | 3 | /* Possible Errors */ 4 | 5 | .box-model { 6 | border: 1px solid black; 7 | width: 100px; 8 | } 9 | 10 | .display-property-grouping { 11 | display: inline; 12 | height: 25px; 13 | } 14 | 15 | .duplicate-properties { 16 | border: 1px solid black; 17 | border: 1px solid black; 18 | } 19 | 20 | .empty-rules { 21 | // css comment 22 | } 23 | 24 | .known-properties { 25 | clr: red; 26 | color: foo; 27 | } 28 | 29 | /* Compatibility */ 30 | 31 | .adjoining-classes .foo.bar { 32 | display: block; 33 | } 34 | 35 | .box-sizing { 36 | box-sizing: border-box; 37 | border: 1px solid black; 38 | padding: 5px; 39 | width: 100px; 40 | } 41 | 42 | .compatible-vendor-prefixes { 43 | -moz-border-radius: 5px; 44 | } 45 | 46 | .gradients { 47 | background: -webkit-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 48 | } 49 | 50 | .text-indent { 51 | text-indent: -999px; 52 | } 53 | 54 | .vendor-prefix { 55 | border-radius: 5px; 56 | -webkit-border-radius: 5px; 57 | } 58 | 59 | .fallback-colors { 60 | color: rgba(100, 200, 100, 0.5); 61 | background-color: rgba(100, 200, 100, 0.5); 62 | } 63 | 64 | .star-property-hack { 65 | *width: 100px; 66 | } 67 | 68 | .underscore-property-hack { 69 | _width: 100px; 70 | } 71 | 72 | /* Performance */ 73 | 74 | @for $i from 1 through 6 { 75 | @include font-face("font-faces #{$i}", font-files("custom-font-#{$i}.otf")); 76 | } 77 | 78 | .regex-selectors[class*=xxx] { 79 | color: red; 80 | } 81 | 82 | .universal-selector * { 83 | color: red; 84 | } 85 | 86 | .unqualified-attributes [type=text] { 87 | color: red; 88 | } 89 | 90 | .zero-units { 91 | margin: 0px; 92 | } 93 | 94 | div.overqualified-elements { 95 | color: red; 96 | } 97 | 98 | .shorthand { 99 | margin-top: 20px; 100 | margin-right: 10px; 101 | margin-bottom: 30px; 102 | margin-left: 10px; 103 | } 104 | 105 | .duplicate-background-images { 106 | background: url(sprite.png) -16px 0 no-repeat; 107 | } 108 | 109 | .duplicate-background-images-2 { 110 | background: url(sprite.png) -32px 0 no-repeat; 111 | } 112 | 113 | /* Maintainability & Duplication */ 114 | 115 | @for $i from 1 through 10 { 116 | .floats-#{$i} { 117 | float: left; 118 | } 119 | .font-sizes-#{$i} { 120 | font-size: 10px + $i; 121 | } 122 | } 123 | 124 | #ids { 125 | display: block; 126 | } 127 | 128 | .important { 129 | color: red !important; 130 | } 131 | 132 | /* Accessibility */ 133 | 134 | .outline-none { 135 | outline: none; 136 | } 137 | 138 | /* OOCSS */ 139 | 140 | .qualified-headings h3 { 141 | font-weight: normal; 142 | } 143 | 144 | .unique-headings h3 { 145 | font-weight: bold; 146 | } 147 | -------------------------------------------------------------------------------- /sass/csslint/clean.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | 3 | /* Possible Errors */ 4 | 5 | .box-model { 6 | border-top: 1px solid black; 7 | width: 100px; 8 | } 9 | 10 | .display-property-grouping { 11 | display: inline; 12 | margin-left: 10px; 13 | } 14 | 15 | .duplicate-properties { 16 | border: 1px solid black; 17 | border: 1px solid red; 18 | } 19 | 20 | .empty-rules { 21 | display: block; 22 | } 23 | 24 | .known-properties { 25 | -moz-foo: bar; 26 | } 27 | 28 | /* Compatibility */ 29 | 30 | .adjoining-classes .foo .bar { 31 | display: block; 32 | } 33 | 34 | .box-sizing { 35 | // border: 1px solid black; 36 | // padding: 5px; 37 | // those 2 rules above "fix" box-sizing, but throw a warning for box-model 38 | width: 88px; 39 | } 40 | 41 | .compatible-vendor-prefixes { 42 | @include border-radius(5px); 43 | } 44 | 45 | .gradients { 46 | @include background(linear-gradient(top, #1e5799, #7db9e8)); 47 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); 48 | background: -ms-linear-gradient(top, #1e5799 0%, #7db9e8 100%); 49 | } 50 | 51 | .text-indent { 52 | text-indent: -999px; 53 | direction: ltr; 54 | } 55 | 56 | .vendor-prefix { 57 | @include border-radius(5px); 58 | } 59 | 60 | .fallback-colors { 61 | color: tint(rgb(100, 200, 100), 50%); 62 | color: rgba(100, 200, 100, 0.5); 63 | background-color: tint(rgb(100, 200, 100), 50%); 64 | background-color: rgba(100, 200, 100, 0.5); 65 | } 66 | 67 | .star-property-hack { 68 | width: 100px; 69 | } 70 | 71 | .underscore-property-hack { 72 | width: 100px; 73 | } 74 | 75 | /* Performance */ 76 | 77 | @for $i from 1 through 5 { 78 | @include font-face("font-faces #{$i}", font-files("custom-font-#{$i}.eot?#iefix", "custom-font-#{$i}.otf")); 79 | } 80 | 81 | a[rel=regex-selectors] { 82 | color: red; 83 | } 84 | 85 | .universal-selector * a { 86 | color: red; 87 | } 88 | 89 | .unqualified-attributes input[type=text] { 90 | color: red; 91 | } 92 | 93 | .zero-units { 94 | margin: 0; 95 | } 96 | 97 | div.overqualified-elements { 98 | color: red; 99 | } 100 | 101 | p.overqualified-elements { 102 | color: red; 103 | } 104 | 105 | .shorthand { 106 | margin: 20px 10px 30px; 107 | } 108 | 109 | .duplicate-background-images { 110 | background: url(sprite.png) no-repeat; 111 | } 112 | 113 | .duplicate-background-images-1 { 114 | background-position: -16px 0; 115 | } 116 | 117 | .duplicate-background-images-2 { 118 | background-position: -32px 0; 119 | } 120 | 121 | /* Maintainability & Duplication */ 122 | 123 | @for $i from 1 through 9 { 124 | .floats-#{$i} { 125 | float: left; 126 | } 127 | .font-sizes-#{$i} { 128 | font-size: 10px + $i; 129 | } 130 | } 131 | 132 | .ids { 133 | display: block; 134 | } 135 | 136 | .important { 137 | color: red; 138 | } 139 | 140 | /* Accessibility */ 141 | 142 | .outline-none:focus { 143 | outline: none; 144 | border: 1px solid red; 145 | } 146 | 147 | /* OOCSS */ 148 | 149 | h3 { 150 | font-weight: normal; 151 | } 152 | 153 | h3:hover { 154 | font-weight: bold; 155 | } 156 | --------------------------------------------------------------------------------