Sneat

# Styles

# Writing your own SCSS

You can write your own SCSS in /src/styles/styles.scss file.

# Overriding variables

If you want to override any of vuetify or our custom variable then you can override it in /src/styles/variables/{_vuetify|_template}.scss folder.

In this folder you can find two variable files.

# _vuetify.scss

You can override Vuetify variable in this file.

You can override variables like below:


 


@forward "../../@core/scss/template/libs/vuetify/variables" with (
  $color-pack: false
);

You can get list of variables you can override in below locations:

# _template.scss

You can override template/custom variable in this file.

You can override variables like below:


 


@forward "@core/scss/template/variables" with (
  $navbar-high-emphasis-text: true
);

You can get list of variables you can override in below locations:

  • Check /src/@core/scss/base/_variables.scss and /src/@core/scss/template/_variables.scss files for our custom variables

# Mixins

# icon-size

We use this mixin to customize the size of icon. Size of icon is determined using height and width property. Instead of writing same value for both properties like below:

.some-icon {
  height: 1.25rem;
  width: 1.25rem;
}

We use this mixin:

// Import mixins
@use '@layouts/styles/mixins';

.some-icon {
  @include mixins.icon-size(1.25rem);
}

/* Output

.some-icon {
  height: 1.25rem;
  width: 1.25rem;
}

*/

# rtl

You have to use this mixin if you are writing RTL styles. This will scope the written style to RTL direction only.

// Import mixins
@use '@layouts/styles/mixins';

.selector {
  @include mixins.rtl {
    margin-left: 1rem;
  }
}

/* Output

[dir="rtl"] .selector {
  margin-left: 1rem;
}

*/

However, it does more than just generating RTL styles. It will only generate the styles if you have enabled generating RTL styles.

// File: /src/styles/_variables.scss

/*
If you have disable generating RTL styles by setting `$enable-rtl-styles: false`
then style won't be generated by rtl mixin
*/

@forward '@layouts/styles/variables' with (
  $enable-rtl-styles: false
);

// File: Your SCSS file
// Import mixins
@use '@layouts/styles/mixins';

.selector {
  @include mixins.rtl {
    margin-left: 1rem;
  }
}

/* No output */

# How to override styles using placeholders Contributors

Our template provides SCSS placeholders to modify the sensitive core styles easily. As a contributor you are allowed to write your styles in src/@core/scss/templates.

Placeholders provided in src/@core/scss/base/placeholders are available to override.

Assume you want to increase the font-weight of vertical nav section title. You can find placeholder %vertical-nav-section-title in src/@core/scss/base/placeholders/_vertical-nav.scss file.

Now, to override this placeholder, create file in src/@core/scss/template/placeholders/ with the same name as in src/@core/scss/base/placeholders. Hence, we will create a new file _vertical-nav.scss in src/@core/scss/template/placeholders/.

// Section title
%vertical-nav-section-title {
  font-weight: 600;
}

Next, import this newly created file in src/@core/scss/template/placeholders/_index.scss

@forward "vertical-nav";

Done 🥳

← Navigation Menu →