SASSY CSS (styles.scss)
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Style your components using Sassy CSS. Empower your designers by Vev()-ing your styles, such that they may be adjusted and customized 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 color palette.

$primary1-5
$accent1-5
$bg1-5

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:

.someclass {
color: blue;
@media(mobile) {
color: cyan;
}
}
@media(tablet) {
.someclass {
.something {
display: none;
}
}
}

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

opacity: vev(0.5);
box-shadow: vev(1px 5px 6px $primary);
box-shadow: vev(1px 5px 6px rgba(40,40,40,0.5));

// Without defaults:
opacity: vev();
box-shadow: vev();

Vev + Text

font-family: vev();
font-size: vev(18px);
font-weight: vev(bold);
font-style: vev(italic);
text-align: vev(right);
color: vev(#FFFFFF);
line-height: vev();
letter-spacing: vev();
word-spacing: vev();
text-transform: vev();
columns: vev();
text-shadow: vev(2px 2px 5px $primary3);

// Without defaults:
font-family: vev();
font-size: vev();
font-weight: vev();
font-style: vev();
text-align: vev();
color: vev();
line-height: vev();
letter-spacing: vev();
word-spacing: vev();
text-transform: vev();
columns: vev();
text-shadow: vev();

Vev + Flexbox

display: vev(flex);
flex-direction: vev(row | column);
align-items: vev(flex-start | flex-end | center | baseline | stretch );
justify-content: vev(flex-start, flex-end, center, space-between, space-around);

// Without defaults
display: vev();
flex-direction: vev();
align-items: vev();
justify-content: vev();

Vev + Background

background: vev(linear-gradient($primary3, $primary5));
background: vev(rgba(40,40,40,0.6));
background: vev($primary3);

// Without defaults
background: vev();

Vev + Border

border: vev(4px dashed $accent3);
border-radius: vev(20px);
border-radius: vev(10px 5px 5px 50px);

// Without defaults
border: vev();
border-radius: vev();

Vev + Shadows

text-shadow: vev(2px 2px 5px $primary3);
box-shadow: vev(1px 5px 6px $primary3);

// Without defaults
text-shadow: vev();
box-shadow: vev();
Did this answer your question?