Merge pull request #66 from backflip/feature/add-sass-template

Add sass template

README.md

@@ -4,7 +4,6 @@
 ## Warning
 
 Recent versions of [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) emit a `glyphs` (or `codepoints` < 4.0.0) event (see [docs](https://github.com/nfroidure/gulp-iconfont/)) which should likely be used instead of the workflow described below. However, it will continue to work as expected.
-The future of this plugin will be discussed in https://github.com/backflip/gulp-iconfont-css/issues/9.
 
 ## Usage
 
@@ -46,17 +45,17 @@ gulp.task('iconfont', function(){
 #### options.fontName
 Type: `String`
 
-The name of the generated font family (required). **Important**: Has to be identical to iconfont's ```fontName``` option.
+The name of the generated font family (required). **Important**: Has to be identical to iconfont's `fontName` option.
 
 #### options.path
 Type: `String`
 
-The template path (optional, defaults to `css` template provided with plugin).If set to `'scss'` or `'less'`, the corresponding default template will be used. See [templates](templates)
+The template path (optional, defaults to `css` template provided with plugin). If set to `scss`,  `sass` or `less`, the corresponding default template will be used. See [templates](templates).
 
 #### options.targetPath
 Type: `String`
 
-The path where the (S)CSS file should be saved, relative to the path used in ```gulp.dest()``` (optional, defaults to ```_icons.css```). Depennding on the path, it might be necessary to set the ```base``` option, see https://github.com/backflip/gulp-iconfont-css/issues/16.
+The path where the (S)CSS file should be saved, relative to the path used in `gulp.dest()` (optional, defaults to `_icons.css`). Depennding on the path, it might be necessary to set the `base` option, see https://github.com/backflip/gulp-iconfont-css/issues/16.
 
 #### options.fontPath
 Type: `String`
@@ -76,7 +75,7 @@ Type: `Object`
 
 Use if you want multiple class names for the same font/svg value ie. use the github svg as .github or .git
 
-The template engine to use (optional, defaults to ```lodash```). 
+The template engine to use (optional, defaults to `lodash`). 
 See https://github.com/visionmedia/consolidate.js/ for available engines. The engine has to be installed before using.
 
 #### options.cacheBuster

index.js

@@ -36,7 +36,7 @@ function iconfontCSS(config) {
 	if(!config.path) {
 		config.path = 'scss';
 	}
-	if(/^(scss|less|css)$/i.test(config.path)) {
+	if(/^(scss|sass|less|css)$/i.test(config.path)) {
 		config.path = __dirname + '/templates/_icons.' + config.path;
 	}
 

templates/_icons.sass

@@ -0,0 +1,41 @@
+@font-face
+    font-family: "<%= fontName %>"
+    src: url('<%= fontPath %><%= fontName %>.eot')
+    src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'), url('<%= fontPath %><%= fontName %>.woff') format('woff'), url('<%= fontPath %><%= fontName %>.ttf') format('truetype'), url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg')
+
+@mixin <%= cssClass%>-styles
+    font-family: "<%= fontName %>"
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    font-style: normal
+    font-variant: normal
+    font-weight: normal
+    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
+    text-decoration: none
+    text-transform: none
+
+
+%<%= cssClass%>
+    +<%= cssClass%>-styles
+
+@function <%= cssClass%>-char($filename)
+    $char: ""
+<% _.each(glyphs, function(glyph) { %>
+    @if $filename == <%= glyph.fileName %>
+        $char: "\<%= glyph.codePoint %>"
+    <% }); %>
+    @return $char
+
+
+@mixin <%= cssClass%>($filename, $insert: before, $extend: true)
+    &:#{$insert}
+        @if $extend
+            @extend %<%= cssClass%>
+        @else
+            +<%= cssClass%>-styles
+
+        content: <%= cssClass%>-char($filename)
+
+<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %>
+    +<%= cssClass%>(<%= glyph.fileName %>)
+<% }); %>

test/expected/type/css/_icons.sass

@@ -0,0 +1,50 @@
+@font-face
+    font-family: "Icons"
+    src: url('../fonts/Icons.eot')
+    src: url('../fonts/Icons.eot?#iefix') format('eot'), url('../fonts/Icons.woff') format('woff'), url('../fonts/Icons.ttf') format('truetype'), url('../fonts/Icons.svg#Icons') format('svg')
+
+@mixin custom-icon-styles
+    font-family: "Icons"
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    font-style: normal
+    font-variant: normal
+    font-weight: normal
+    // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
+    text-decoration: none
+    text-transform: none
+
+
+%custom-icon
+    +custom-icon-styles
+
+@function custom-icon-char($filename)
+    $char: ""
+
+    @if $filename == github
+        $char: "\E001"
+
+    @if $filename == git
+        $char: "\E001"
+
+    @if $filename == twitter
+        $char: "\E002"
+
+    @return $char
+
+
+@mixin custom-icon($filename, $insert: before, $extend: true)
+    &:#{$insert}
+        @if $extend
+            @extend %custom-icon
+        @else
+            +custom-icon-styles
+
+        content: custom-icon-char($filename)
+
+.custom-icon-github
+    +custom-icon(github)
+.custom-icon-git
+    +custom-icon(git)
+.custom-icon-twitter
+    +custom-icon(twitter)

test/main.js

@@ -143,6 +143,7 @@ function testCacheBuster() {
 
 describe('gulp-iconfont-css', function() {
 	testType('scss', 'SCSS');
+	testType('sass', 'Sass');
 	testType('less', 'Less');
 	testType('css', 'CSS');