diff --git a/README.md b/README.md index 504515a..78de7e8 100644 --- a/README.md +++ b/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 diff --git a/index.js b/index.js index 88b0866..009195b 100644 --- a/index.js +++ b/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; } diff --git a/templates/_icons.sass b/templates/_icons.sass new file mode 100644 index 0000000..6c2c963 --- /dev/null +++ b/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 %>) +<% }); %> diff --git a/test/expected/type/css/_icons.sass b/test/expected/type/css/_icons.sass new file mode 100644 index 0000000..49f2c86 --- /dev/null +++ b/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) diff --git a/test/main.js b/test/main.js index a5d3ddd..63959ba 100755 --- a/test/main.js +++ b/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');