diff --git a/05-base-mixin/base-mixin.css b/05-base-mixin/base-mixin.css new file mode 100644 index 0000000..1407f56 --- /dev/null +++ b/05-base-mixin/base-mixin.css @@ -0,0 +1,36 @@ +.btn { + display: inline-block; + padding: 0.5rem 1rem; + font-size: 1rem; + border: .1rem solid; + border-radius: .25rem; } + +.btn:hover { + cursor: pointer; } + +.btn-default { + color: #333; + background-color: #eee; + border-color: #d4d4d4; } + +.btn-default:hover { + background-color: #d4d4d4; + border-color: #c8c8c8; } + +.btn-primary { + color: #fff; + background-color: #0074d9; + border-color: #0059a6; } + +.btn-primary:hover { + background-color: #0059a6; + border-color: #004b8c; } + +.btn-danger { + color: #fff; + background-color: #ff4136; + border-color: #ff1103; } + +.btn-danger:hover { + background-color: #ff1103; + border-color: #e90d00; } diff --git a/05-base-mixin/base-mixin.scss b/05-base-mixin/base-mixin.scss new file mode 100644 index 0000000..405201d --- /dev/null +++ b/05-base-mixin/base-mixin.scss @@ -0,0 +1,35 @@ + +@mixin button($color, $background-color) { + color: $color; + background-color: $background-color; + border-color: darken($background-color, 10%); + + &:hover { + background-color: darken($background-color, 10%); + border-color: darken($background-color, 15%); + } +} + +.btn { + display: inline-block; + padding: .5rem 1rem; + font-size: 1rem; + border: .1rem solid; + border-radius: .25rem; + + &:hover { + cursor: pointer; + } +} + +.btn-default { + @include button(#333, #eee); +} + +.btn-primary { + @include button(#fff, #0074d9); +} + +.btn-danger { + @include button(#fff, #ff4136); +} diff --git a/05-base-mixin/index.html b/05-base-mixin/index.html new file mode 100644 index 0000000..06f4a0b --- /dev/null +++ b/05-base-mixin/index.html @@ -0,0 +1,17 @@ + + + + + + + + + + +

Base class with mixin

+ + + +

Back home

+ + diff --git a/README.md b/README.md index b9f7005..f122071 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,16 @@ Instead of reusing an existing class, uses `@extend` to pull in shared syles fro ``` +#### [Base class with mixin](05-base-mixin/base-mixin.scss) + +Using a mixin for only the dynamic properties we can achieve the exact same output as the base class method, but with 10 fewer lines of SCSS. + +```html + + + +``` + ## Results While there are several interesting statistics about your CSS, two really stand out in the context of these demos—total selectors and total declarations—as these are the most significantly affected by the methods in these demos. These stats are reported in [`stats.md`](stats.md). @@ -62,6 +72,7 @@ While there are several interesting statistics about your CSS, two really stand | **Base class** | 8 | 21 | | **Extend** | 14 | 21 | | **Extend w/ placeholder** | 12 | 21 | +| **Base class w/ mixin** | 8 | 21 | You can look at these numbers in a few ways: @@ -73,7 +84,7 @@ You can look at these numbers in a few ways: - **Both `@extend` demos generate the same number of declarations as the base class, but with 55-65% more selectors.** These features, used with an exsiting class or a placeholder, generate *more* compiled CSS than any of the others. -**Bottom line?** Writing CSS components with a shared base class will likely produce leaner, DRY-er compiled CSS. +**Bottom line?** Writing CSS components with a shared base class will likely produce leaner, DRY-er compiled CSS. Making use of streamlined SCSS will keep your SCSS DRY as well. ## Feedback diff --git a/gulpfile.js b/gulpfile.js index 1b4ba96..d5a0d72 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -4,7 +4,7 @@ var parker = require('gulp-parker'); // Compile SCSS gulp.task('sass', function() { - gulp.src('./{01-original,02-base,03-extend,04-placeholder}**/*.scss') + gulp.src('./{01-original,02-base,03-extend,04-placeholder,05-base-mixin}**/*.scss') .pipe(sass({ outputStyle: 'expanded' })) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('.')); @@ -12,7 +12,7 @@ gulp.task('sass', function() { // Collect CSS stats gulp.task('parker', function() { - return gulp.src('./{01-original,02-base,03-extend,04-placeholder}**/*.css') + return gulp.src('./{01-original,02-base,03-extend,04-placeholder,05-base-mixin}**/*.css') .pipe(parker({ file: 'stats.md', title: 'Compiled CSS stats', diff --git a/stats.md b/stats.md index d1e5ed0..886f6c0 100644 --- a/stats.md +++ b/stats.md @@ -586,3 +586,48 @@ Last generated: 07/20/2015, 14:17:28 by [gulp-parker](https://github.com/PavelDe * * * Last generated: 07/20/2015, 14:17:28 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker). + +### /Users/rray/Dropbox/css-output/01-original/original.css + +- **Total Selectors:** 6 +- **Total Declarations:** 20 + +* * * + +Last generated: 08/05/2015, 15:19:00 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker). + +### /Users/rray/Dropbox/css-output/02-base/base.css + +- **Total Selectors:** 8 +- **Total Declarations:** 21 + +* * * + +Last generated: 08/05/2015, 15:19:00 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker). + +### /Users/rray/Dropbox/css-output/03-extend/extend.css + +- **Total Selectors:** 14 +- **Total Declarations:** 21 + +* * * + +Last generated: 08/05/2015, 15:19:00 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker). + +### /Users/rray/Dropbox/css-output/04-placeholder/placeholder.css + +- **Total Selectors:** 12 +- **Total Declarations:** 21 + +* * * + +Last generated: 08/05/2015, 15:19:00 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker). + +### /Users/rray/Dropbox/css-output/05-base-mixin/base-mixin.css + +- **Total Selectors:** 8 +- **Total Declarations:** 21 + +* * * + +Last generated: 08/05/2015, 15:19:00 by [gulp-parker](https://github.com/PavelDemyanenko/gulp-parker).