1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
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
<<../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
<<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
<<themes-eclipse#themes.eclipse,"Creating a
Theme in Eclipse">>.
|
