Vev Help Center
Search…
File: styles.scss
Style your components using Sassy CSS. Empower your designers by Vev()-ing your styles, such that they may be adjusted and customised for each Project in the Design Editor without touching the code.

Sassy CSS

Vev supports Sassy CSS syntax. Read more about it here.

Global CSS Variables

These global CSS variables are available to you. They are tied to the current project colour palette.
1
$primary1-5
2
$accent1-5
3
$bg1-5
Copied!

Media Queries

If you want to change your styling depending on the device mode, you may use the following syntax anywhere in your SCSS code:
1
.someclass {
2
color: blue;
3
@media(mobile) {
4
color: cyan;
5
}
6
}
7
@media(tablet) {
8
.someclass {
9
.something {
10
display: none;
11
}
12
}
13
}
Copied!

Dynamic Style Bindings (Props Editors)

Vev allows you to bind CSS Style Properties from your code to the Visual Editor. Create your custom code and bind your CSS Properties with vev() to give the ability to modify the look of them using the native tools in the Design Editor.

List of Vev-able Properties

Adding vev(); as the value of a property in the CSS tab of the Code Editor will create a link between the selector you added the property for and the Editors on the right-hand side in the Design Editor. If you add values inside the parentheses, such as "vev(#FFF000);", then these values will be applied as defaults for the widget or section. Bound properties without defaults make their editors available in the properties panel on the right, but aren't set initially when the widget or section is created.

Vev + Common

1
opacity: vev(0.5);
2
box-shadow: vev(1px 5px 6px $primary);
3
box-shadow: vev(1px 5px 6px rgba(40,40,40,0.5));
4
​
5
// Without defaults:
6
opacity: vev();
7
box-shadow: vev();
Copied!

Vev + Text

1
font-family: vev();
2
font-size: vev(18px);
3
font-weight: vev(bold);
4
font-style: vev(italic);
5
text-align: vev(right);
6
color: vev(#FFFFFF);
7
line-height: vev();
8
letter-spacing: vev();
9
word-spacing: vev();
10
text-transform: vev();
11
columns: vev();
12
text-shadow: vev(2px 2px 5px $primary3);
13
​
14
// Without defaults:
15
font-family: vev();
16
font-size: vev();
17
font-weight: vev();
18
font-style: vev();
19
text-align: vev();
20
color: vev();
21
line-height: vev();
22
letter-spacing: vev();
23
word-spacing: vev();
24
text-transform: vev();
25
columns: vev();
26
text-shadow: vev();
Copied!

Vev + Flexbox

1
display: vev(flex);
2
flex-direction: vev(row | column);
3
align-items: vev(flex-start | flex-end | center | baseline | stretch );
4
justify-content: vev(flex-start, flex-end, center, space-between, space-around);
5
​
6
// Without defaults
7
display: vev();
8
flex-direction: vev();
9
align-items: vev();
10
justify-content: vev();
Copied!

Vev + Background

1
background: vev(linear-gradient($primary3, $primary5));
2
background: vev(rgba(40,40,40,0.6));
3
background: vev($primary3);
4
5
// Without defaults
6
background: vev();
Copied!

Vev + Border

1
border: vev(4px dashed $accent3);
2
border-radius: vev(20px);
3
border-radius: vev(10px 5px 5px 50px);
4
​
5
// Without defaults
6
border: vev();
7
border-radius: vev();
Copied!

Vev + Shadows

1
text-shadow: vev(2px 2px 5px $primary3);
2
box-shadow: vev(1px 5px 6px $primary3);
3
​
4
// Without defaults
5
text-shadow: vev();
6
box-shadow: vev();
Copied!