[Docs] Start documenting the compass helper functions. First up: elements-of-type()
This commit is contained in:
parent
ad1e185229
commit
cd6b9d659a
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: "Compass Helper: elements-of-type"
|
||||||
|
description: How to use the elements-of-type() helper function.
|
||||||
|
framework: compass
|
||||||
|
example: true
|
||||||
|
---
|
||||||
|
= render "partials/example"
|
@ -0,0 +1,10 @@
|
|||||||
|
.example
|
||||||
|
%div
|
||||||
|
This is a block element.
|
||||||
|
It has an
|
||||||
|
%span inline span
|
||||||
|
and an
|
||||||
|
%em inline em
|
||||||
|
and a
|
||||||
|
%blockquote
|
||||||
|
Nested blockquote element
|
@ -0,0 +1,7 @@
|
|||||||
|
.example
|
||||||
|
#{elements-of-type(block)}
|
||||||
|
border: 1px solid #777
|
||||||
|
margin: 1em 3em
|
||||||
|
#{elements-of-type(inline)}
|
||||||
|
color: #c00
|
||||||
|
|
16
doc-src/content/reference/compass/helpers.haml
Normal file
16
doc-src/content/reference/compass/helpers.haml
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
title: Compass Helpers
|
||||||
|
crumb: Helpers
|
||||||
|
framework: compass
|
||||||
|
layout: core
|
||||||
|
classnames:
|
||||||
|
- reference
|
||||||
|
- core
|
||||||
|
- helpers
|
||||||
|
meta_description: Provides cross browser CSS3 mixins that take advantage of available pre-spec vendor prefixes.
|
||||||
|
layout: core
|
||||||
|
---
|
||||||
|
|
||||||
|
:markdown
|
||||||
|
The compass helpers are functions that augment the [functions provided
|
||||||
|
by Sass](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html).
|
37
doc-src/content/reference/compass/helpers/display.haml
Normal file
37
doc-src/content/reference/compass/helpers/display.haml
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
---
|
||||||
|
title: Compass Display Helpers
|
||||||
|
crumb: Display Helpers
|
||||||
|
framework: compass
|
||||||
|
meta_description: Helper functions for working with the display property.
|
||||||
|
layout: core
|
||||||
|
classnames:
|
||||||
|
- reference
|
||||||
|
- core
|
||||||
|
- helpers
|
||||||
|
---
|
||||||
|
%h1 Compass Display Helpers
|
||||||
|
|
||||||
|
%p Helper functions for working with the display property.
|
||||||
|
|
||||||
|
#elements-of-type.helper
|
||||||
|
%h3
|
||||||
|
%a(href="#elements-of-type") elements-of-type(<span class="arg">$display</span>)
|
||||||
|
.details
|
||||||
|
%p
|
||||||
|
The following display values exist and will return
|
||||||
|
the elements listed to the right.
|
||||||
|
%dl
|
||||||
|
%dg.head
|
||||||
|
%dt Default Display
|
||||||
|
%dd Elements Returned
|
||||||
|
- display_map = Compass::SassExtensions::Functions::Display::DEFAULT_DISPLAY
|
||||||
|
- display_map.keys.each do |key|
|
||||||
|
%dg
|
||||||
|
%dt= key
|
||||||
|
%dd= display_map[key].sort.join(", ")
|
||||||
|
.examples
|
||||||
|
%h4 Examples
|
||||||
|
%ul
|
||||||
|
%li
|
||||||
|
%a(href="/docs/examples/compass/helpers/elements-of-type/") Example of elements-of-type
|
||||||
|
|
@ -86,3 +86,20 @@ dl.examples {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dl.table {
|
||||||
|
display: table;
|
||||||
|
dg { display: table-row; }
|
||||||
|
dt, dd { display: table-cell; }
|
||||||
|
dt { white-space: nowrap; padding-right: 1em;}
|
||||||
|
dt, dg.head > dd {font-weight: bold; text-align: center;}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.helpers {
|
||||||
|
.helper {
|
||||||
|
dl { @extend dl.table; }
|
||||||
|
dg:not(.head) {
|
||||||
|
dt, dd { @extend code; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -224,6 +224,7 @@ aside[role="sidebar"] + article
|
|||||||
+active-module(".core.misc", "/docs/reference/compass/misc/")
|
+active-module(".core.misc", "/docs/reference/compass/misc/")
|
||||||
+active-module(".core.reset", "/docs/reference/compass/reset/")
|
+active-module(".core.reset", "/docs/reference/compass/reset/")
|
||||||
+active-module(".core.utilities", "/docs/reference/compass/utilities/")
|
+active-module(".core.utilities", "/docs/reference/compass/utilities/")
|
||||||
|
+active-module(".core.helpers", "/docs/reference/compass/helpers/")
|
||||||
|
|
||||||
#local-nav
|
#local-nav
|
||||||
+leader(1,14px)
|
+leader(1,14px)
|
||||||
|
@ -15,7 +15,8 @@ module Compass::SassExtensions::Functions::Display
|
|||||||
:"table-cell" => %w{th td}
|
:"table-cell" => %w{th td}
|
||||||
}
|
}
|
||||||
|
|
||||||
# returns a comma delimited string for all the elements according to their default css3 display value.
|
# returns a comma delimited string for all the
|
||||||
|
# elements according to their default css3 display value.
|
||||||
def elements_of_type(display)
|
def elements_of_type(display)
|
||||||
Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
|
Sass::Script::String.new(DEFAULT_DISPLAY.fetch(display.value.to_sym).join(", "))
|
||||||
end
|
end
|
||||||
|
Loading…
Reference in New Issue
Block a user