added font-face mixin with font_files function
This commit is contained in:
parent
71a7ae3845
commit
a1c976bbcb
@ -9,3 +9,4 @@
|
|||||||
@import css3/background_clip.sass
|
@import css3/background_clip.sass
|
||||||
@import css3/background_origin.sass
|
@import css3/background_origin.sass
|
||||||
@import css3/background_size.sass
|
@import css3/background_size.sass
|
||||||
|
@import css3/font_face.sass
|
||||||
|
@ -0,0 +1,31 @@
|
|||||||
|
// @Font-Face
|
||||||
|
// Cross-browser support for @font-face
|
||||||
|
// - !name is required, arbitrary, and what you will use in font stacks.
|
||||||
|
// - !font_files is required using font_files('relative_location', 'format').
|
||||||
|
// - for best results use this order: woff, opentype/truetype, svg
|
||||||
|
// - !eot is required by IE, and is a relative location of the eot file.
|
||||||
|
// - postscript name is required by some browsers to look for local fonts.
|
||||||
|
=font-face( !name, !font_files, !eot = false, !postscript = !false, !style = false)
|
||||||
|
@font-face
|
||||||
|
font-family: '#{!name}'
|
||||||
|
@if !style
|
||||||
|
font-style= !style
|
||||||
|
@if !eot
|
||||||
|
src: url('#{!eot}')
|
||||||
|
@if !postscript
|
||||||
|
src: local('#{!name}'), local('#{!postscript}'), #{!font_files}
|
||||||
|
@else
|
||||||
|
src: local('#{!name}'), #{!font_files}
|
||||||
|
|
||||||
|
// EXAMPLE
|
||||||
|
+font-face("this name", font_files("this.otf", "opentype", "this.woff", "woff"), "fonts/this.eot", "thisname")
|
||||||
|
|
||||||
|
will generate:
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'this name';
|
||||||
|
src: url('fonts/this.eot');
|
||||||
|
src: local('this name'), local('thisname'),
|
||||||
|
url('this.otf') format('opentype'),
|
||||||
|
url('this.woff') format('woff');
|
||||||
|
}
|
@ -12,6 +12,7 @@ module Sass::Script::Functions
|
|||||||
include Compass::SassExtensions::Functions::Display
|
include Compass::SassExtensions::Functions::Display
|
||||||
include Compass::SassExtensions::Functions::InlineImage
|
include Compass::SassExtensions::Functions::InlineImage
|
||||||
include Compass::SassExtensions::Functions::ColorStop
|
include Compass::SassExtensions::Functions::ColorStop
|
||||||
|
include Compass::SassExtensions::Functions::FontFiles
|
||||||
end
|
end
|
||||||
|
|
||||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||||
|
10
lib/compass/sass_extensions/functions/font_files.rb
Normal file
10
lib/compass/sass_extensions/functions/font_files.rb
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
module Compass::SassExtensions::Functions::FontFiles
|
||||||
|
def font_files(*args)
|
||||||
|
raise Sass::SyntaxError, "An even number of arguments must be passed to color-stop()" unless args.size % 2 == 0
|
||||||
|
files = []
|
||||||
|
while args.size > 0
|
||||||
|
files << "url('#{args.shift}') format('#{args.shift}')"
|
||||||
|
end
|
||||||
|
Sass::Script::String.new(files.join(", "))
|
||||||
|
end
|
||||||
|
end
|
Loading…
Reference in New Issue
Block a user