summaryrefslogtreecommitdiffstats
path: root/documentation/themes/themes-sass.asciidoc
diff options
context:
space:
mode:
authorIlia Motornyi <elmot@vaadin.com>2015-12-03 14:59:05 +0000
committerVaadin Code Review <review@vaadin.com>2015-12-03 14:59:12 +0000
commit2af72ba9636bec70046394c41744f89ce4572e35 (patch)
treeccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/themes/themes-sass.asciidoc
parent8aa5fabe89f2967e966a64842a608eceaf80d08f (diff)
downloadvaadin-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.asciidoc156
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">>.
-
-
-
-