diff --git a/docs/files.rst b/docs/files.rst index e6f2cf3..d616a08 100644 --- a/docs/files.rst +++ b/docs/files.rst @@ -69,6 +69,7 @@ css_template X X css_pseudo_class_separator X X less_dir X X scss_dir X X +styl_dir X X img_dir X X generate_image X X png8 X X diff --git a/docs/index.rst b/docs/index.rst index 866f899..1687b6f 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -7,7 +7,7 @@ Glue is a simple command line tool to generate sprites:: * Automatic Sprite (Image + Metadata) creation including: - - css (less, scss) + - css (less, scss, stylus) - cocos2d - json (array, hash) - CAAT @@ -21,7 +21,7 @@ Glue is a simple command line tool to generate sprites:: * Watch option to keep glue running watching for file changes. * Project-, Sprite- and Image-level configuration via static config files. * Customizable `output `_ using jinja templates. -* CSS: Optional .less/.scss output format. +* CSS: Optional .less/.scss/.styl output format. * CSS: Configurable `cache busting for sprite images `_. * CSS: Customizable `class names `_. diff --git a/docs/options.rst b/docs/options.rst index ae40142..1b23bff 100644 --- a/docs/options.rst +++ b/docs/options.rst @@ -233,6 +233,30 @@ While using ``--less`` you can use your own less template using ``--less-templat New in version 0.9.2 +--styl +--------- +`stylus `_ is a dynamic stylesheet language that extends CSS with dynamic behaviors. +``glue`` can also create ``.styl`` files adding the ``--styl`` option. +This files contain exactly the same CSS code. This option only changes the file format. + +.. code-block:: bash + + $ glue source output --styl + + +--styl-template +---------------- +While using ``--styl`` you can use your own stylus template using ``--styl-template=``. + +.. note:: + By default glue will use it's own internal ``stylus`` template, so this command **is not required** unless you want to super-customize glue's ``stylus`` output using **your own** template. You can find further documentation about how templates work in the :doc:`templates documentation page. ` + +.. code-block:: bash + + $ glue source output --styl-template=my_template.jinja + + + --margin ------------ If you want to spread the images around the sprite but you don't want to count this space as image width/height (as happens using `--padding``), you can use the ``--margin`` option followed by the margin you want to add: diff --git a/docs/settings.rst b/docs/settings.rst index 8486c79..181e6ae 100644 --- a/docs/settings.rst +++ b/docs/settings.rst @@ -41,6 +41,8 @@ Command-line arg Environment Variable Configuration F --less-template GLUE_LESS_TEMPLATE less_template --scss GLUE_SCSS scss_format --scss-template GLUE_SCSS_TEMPLATE scss_template +--styl GLUE_STYL styl_dir +--styl-template GLUE_STYL_TEMPLATE styl_template --namespace GLUE_CSS_NAMESPACE css_namespace --sprite-namespace GLUE_CSS_SPRITE_NAMESPACE css_sprite_namespace -u --url GLUE_CSS_URL css_url diff --git a/glue/formats/__init__.py b/glue/formats/__init__.py index 1fd72d8..5f59736 100644 --- a/glue/formats/__init__.py +++ b/glue/formats/__init__.py @@ -6,6 +6,7 @@ from .caat import CAATFormat from .less import LessFormat from .scss import ScssFormat +from .styl import StylFormat formats = {'css': CssFormat, @@ -15,4 +16,5 @@ 'json': JSONFormat, 'caat': CAATFormat, 'less': LessFormat, + 'styl': StylFormat, 'scss': ScssFormat} diff --git a/glue/formats/styl.py b/glue/formats/styl.py new file mode 100644 index 0000000..187ed28 --- /dev/null +++ b/glue/formats/styl.py @@ -0,0 +1,46 @@ +import os + +from css import CssFormat + + +class StylFormat(CssFormat): + + extension = 'styl' + template = u""" + /* glue: {{ version }} hash: {{ hash }} */ + {% for image in images %}.{{ image.label }}{{ image.pseudo }}{%- if not image.last %}, {%- endif %}{%- endfor %} + background-image url('{{ sprite_path }}') + background-repeat no-repeat + -webkit-background-size {{ width }}px {{ height }}px + -moz-background-size {{ width }}px {{ height }}px + background-size {{ width }}px {{ height }}px + {% for r, ratio in ratios.items() %} + @media screen and (-webkit-min-device-pixel-ratio: {{ ratio.ratio }}), screen and (min--moz-device-pixel-ratio: {{ ratio.ratio }}),screen and (-o-min-device-pixel-ratio: {{ ratio.fraction }}),screen and (min-device-pixel-ratio: {{ ratio.ratio }}),screen and (min-resolution: {{ ratio.ratio }}dppx) + background-image url('{{ ratio.sprite_path }}') + {% endfor %} + + {% for image in images %} + .{{ image.label }}{{ image.pseudo }} + background-position {{ image.x ~ ('px' if image.x) }} {{ image.y ~ ('px' if image.y) }} + width {{ image.width }}px + height {{ image.height }}px + {% endfor %} + """ + + @classmethod + def populate_argument_parser(cls, parser): + group = parser.add_argument_group("Stylus format options") + + group.add_argument("--styl", + dest="styl_dir", + nargs='?', + const=True, + default=os.environ.get('GLUE_STYL', False), + metavar='DIR', + help="Generate Styl files and optionally where") + + group.add_argument("--styl-template", + dest="styl_template", + default=os.environ.get('GLUE_STYL_TEMPLATE', None), + metavar='DIR', + help="Template to use to generate the Styl output.")