diff options
author | Ilia Motornyi <elmot@vaadin.com> | 2015-12-03 14:59:05 +0000 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2015-12-03 14:59:12 +0000 |
commit | 2af72ba9636bec70046394c41744f89ce4572e35 (patch) | |
tree | ccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/themes/themes-sass.asciidoc | |
parent | 8aa5fabe89f2967e966a64842a608eceaf80d08f (diff) | |
download | vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip |
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00.
Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/themes/themes-sass.asciidoc')
-rw-r--r-- | documentation/themes/themes-sass.asciidoc | 156 |
1 files changed, 0 insertions, 156 deletions
diff --git a/documentation/themes/themes-sass.asciidoc b/documentation/themes/themes-sass.asciidoc deleted file mode 100644 index 4b1f529de1..0000000000 --- a/documentation/themes/themes-sass.asciidoc +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Syntactically Awesome Stylesheets (Sass) -order: 3 -layout: page ---- - -[[themes.sass]] -= Syntactically Awesome Stylesheets (Sass) - -Vaadin uses Sass for stylesheets. Sass is an extension of CSS3 that adds nested -rules, variables, mixins, selector inheritance, and other features to CSS. Sass -supports two formats for stylesheet: Vaadin themes are written in SCSS ( -[filename]#.scss#), which is a superset of CSS3, but Sass also allows a more -concise indented format ( [filename]#.sass#). - -Sass can be used in two basic ways in Vaadin applications, either by compiling -SCSS files to CSS or by doing the compilation on the fly. The latter way is -possible if the development mode is enabled for the Vaadin servlet, as described -in -<<dummy/../../../framework/application/application-environment#application.environment.parameters,"Other -Servlet Configuration Parameters">>. - -[[themes.sass.overview]] -== Sass Overview - -[[themes.sass.overview.variables]] -=== Variables - -Sass allows defining variables that can be used in the rules. - - -[source, css] ----- -$textcolor: blue; - -.v-button-caption { - color: $textcolor; -} ----- - -The above rule would be compiled to CSS as: - - -[source, css] ----- -.v-button-caption { - color: blue; -} ----- - -Also mixins can have variables as parameters, as explained later. - - -[[themes.sass.overview.nesting]] -=== Nesting - -Sass supports nested rules, which are compiled into inside-selectors. For -example: - - -[source, css] ----- -.v-app { - background: yellow; - - .mybutton { - font-style: italic; - - .v-button-caption { - color: blue; - } - } -} ----- - -is compiled as: - - -[source, css] ----- -.v-app { - background: yellow; -} - -.v-app .mybutton { - font-style: italic; -} - -.v-app .mybutton .v-button-caption { - color: blue; -} ----- - - -[[themes.sass.overview.mixins]] -=== Mixins - -Mixins are rules that can be included in other rules. You define a mixin rule by -prefixing it with the [literal]#++@mixin++# keyword and the name of the mixin. -You can then use [literal]#++@include++# to apply it to another rule. You can -also pass parameters to it, which are handled as local variables in the mixin. - -For example: - - -[source, css] ----- -@mixin mymixin { - background: yellow; -} - -@mixin othermixin($param) { - margin: $param; -} - -.v-button-caption { - @include mymixin; - @include othermixin(10px); -} ----- - -The above SCSS would translated to the following CSS: - - -[source, css] ----- -.v-button-caption { - background: yellow; - margin: 10px; -} ----- - -You can also have nested rules in a mixin, which makes them especially powerful. -Mixing in rules is used when extending Vaadin themes, as described in -<<dummy/../../../framework/themes/themes-creating#themes.creating.sass,"Sass -Themes">>. - -Vaadin themes are defined as mixins to allow for certain uses, such as different -themes for different portlets in a portal. - - - -[[themes.sass.basic]] -== Sass Basics with Vaadin - -We are not going to give in-depth documentation of Sass and refer you to its -excellent documentation at http://sass-lang.com/. In the following, we give just -basic introduction to using it with Vaadin. - -You can create a new Sass-based theme with the Eclipse plugin, as described in -<<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a -Theme in Eclipse">>. - - - - |