Sneat Dashboard FREE by ThemeSelection

SASS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Read the official SASS Documentation for a full list of instructions and other options.

Folder Structure

Important: Make sure you have followed the steps from the Installation & Build tools page. You should have already installed the Node, Gulp and setup the template. Check available tasks to compile styles.

Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.

Below is the folder structure which contain the SASS files.

📦
├── 📂 fonts                                      > Font Icons style file
├── 📂 libs                                       > Third-party library files
│   ├── 📂 animate-css                              > Example library files
│   │   └── 📄 animate.scss
│   └── ...
├── 📂 scss                                       > Core SCSS
│   ├── 📂 _bootstrap-extended                      > Extended styles of bootstrap components
│   │   └── 📂 mixins
│   ├── 📂 _components                              > Contain custom components style
│   │   └── 📂 mixins
│   ├── 📂 _custom-variables                        > Custom variables (use this files to override variables)
│   │   ├── 📄 _bootstrap-extended-dark.scss          > Bootstrap extended dark variable
│   │   ├── 📄 _bootstrap-extended.scss               > Bootstrap extended variable
│   │   ├── 📄 _components-dark.scss                  > Custom components dark variable
│   │   ├── 📄 _components.scss                       > Custom components variable
│   │   └── ...
│   ├── 📂 pages                                    > Pages & Apps styles
│   ├── 📄 _custom-styles.scss                      > Use this file to override existing styles or add custom styles
│   ├── 📄 core.scss                                > Core file which includes bootstrap, bootstrap-extended, components & colors
└── ...

fonts/ Folder contains font-icons SCSS files. It includes fonts files from node_modules/ and extends it.
libs/ SCSS files of all third-party libraries used in this template. It includes third-party SCSS from node_modules/ and extends it. If you want to remove specific library, then just delete that library folder. Read more
scss/ The core style folder which contains _bootstrap-extended/, _components/ _custom-variables/ and pages/ folders and files as explained below:

_bootstrap-extended/ Using core bootstrap from node_modules/, It extends each bootstrap components which is used in this template. _variables.scss and _variables-dark.scss file extend core bootstrap variables.
_components/ It contains custom components Like, Timeline, Avatar and Layouts styling. Custom components variables are declared in _variables.scss and _variables-dark.scss files.
_custom-variables/ Override bootstrap-extended and components variables using this folder scss files. All files in this folder is for user purposes.
pages/ Folder contains SCSS files for the Pages and Apps Like, Profile page, Calender app.
_custom-styles.scss Use this file to override existing styles or add custom styles.
core.scss includes _bootstrap.scss, _bootstrap-extended.scss, _components.scss, _colors.scss and _custom-styles.scss.

Info: Bootstrap is automatically loaded from the node_modules folder in the bootstrap.scss file. It is installed via npm install and compiled using the build tools.

Customizing SASS

Customizing the Sneat's SASS is super easy. Every SASS variable in Sneat includes the !default flag allowing you to override the variable's default value in your own SASS without modifying either Bootstrap or Sneat's source code.

Important: It is not recommend to make any changes to the scss/ folder except _custom-variables/. It includes core files and components that can be updated in the future. If you want to take advantage of future updates you may want to have a more Bootstrap-ish approach, meaning you should create new styles file or components to override styles, extend or add new components in the custom/ folder.

Changing variables

Using _custom-variables/ folder's scss files, you can easily override light/dark style variables for bootstrap, custom component, libraries and pages. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values.

Now, you might have more questions like below:

How can I override Bootstrap variable(s)?

Sneat is skin based admin template.

You can update by overwriting SCSS variables.
You can update by overwriting CSS variables that can be updated as per the Skin.

If you are familiar with SCSS (Recommended method), you can easily change template colors by changing SCSS variable value.

Update by overwriting SCSS variables

To change the primary color throughout your entire project. For Light layout update $primary in scss/_custom-variables/_bootstrap-extended.scss file.

Important: For Dark Layout if you want to update primary color then need to add $primary-dark variable in scss/_custom-variables/_bootstrap-extended-dark.scss file & set CSS variable value for light & dark theme.

$primary: #757575 !default;

$primary-dark: #a0a1a1 !default;

Info: You can update all other variables of bootstrap, components,etc.. from the files inside _custom-variables/ folder using variables. To update SCSS variables, please check here

Find all the custom variable css files at below path:

📦
├── 📂 scss                                       > Core SCSS
│   ├── 📂 _custom-variables                        > Custom variables (use this files to override variables)
│   │   ├── 📄 _bootstrap-extended.scss               > To override Bootstrap extended variable
│   │   ├── 📄 _bootstrap-extended-dark.scss          > To override Bootstrap extended dark variable
│   │   ├── 📄 _components.scss                       > To override Custom components variable
│   │   └── 📄 _components-dark.scss                  > To override Custom components dark variable

Overwriting CSS variables as per dark/light theme

If you are looking for changing primary color for light / dark theme then you need to update CSS variables in root. Need to update CSS variables in custom-styles.scss file.

For Light Theme:

:root,
[data-bs-theme="light"] {
  --#{$prefix}primary: #e30b5c;
}

For Dark Theme:

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    color-scheme: dark; {
      --#{$prefix}primary: #a0a1a1;
    }
  }
}

Update Bordered Skin by overwriting CSS variables as per Skin

If you are looking for changing primary color for Bordered Skin or any custom skin that you have made, then you need to update CSS variables.

Important: Please make sure, you have $bordered-style variable true to use bordered Skin.

For Light Theme:

:root,
[data-bs-theme="light"] {
  @if ($bordered-style == true){
    &[data-skin="bordered"]{
      --#{$prefix}primary: #e30b5c;
    }
  }
}

For Dark Theme:

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    color-scheme: dark; {
      @if ($bordered-style == true){
        &[data-skin="bordered"]{
          --#{$prefix}primary: #a0a1a1;
        }
      }
    }
  }
}

If you are not familiar with SCSS, you can change the style attribute by replacing the old value with a new one in assets/css folder.

Heads Up!

It is not recommended to change any core files inside assets/ folder to avoid future update conflicts. If you still modify the file, it may require to merge it manually with future updates.

How can I override custom components variable(s)?

To change custom components variables like menu width, you need to do below changes to scss/_custom-variables/_components.scss file

If you want to update color for dark layout, then you can add same variable to scss/_custom-variables/_components-dark.scss file.

Example:

$menu-color: #000 !default;

How can I override existing styles using custom styles?

To override existing styles, you need to write your custom SCSS code in the /scss/_custom-styles.scss file. This allows you to apply your own styles while ensuring the changes override previously defined ones.

Example:

.card {
  background-color: #fd0000;
}

FAQs

How can I create new skin (own skin)?

Sneat admin template comes with unique feature to create custom skin. So user can easily integrate template with their own choice & requirements.

To create custom skin, you need to add css variables for color of the skin.

Let's say, if you want to create your own custom skin named as raspberry, follow steps below.

First of all, create custom skin css variables to _skin.scss file inside scss/bootstrap-extended/ folder.
To apply custom skin as we have created for borderd skin, you need to add css variables to _skin.scss file as below:

:root[data-skin="raspberry"],
[data-skin="raspberry"] {
  // If you want to update primary color then add below variable
  --#{$prefix}primary: #e30b5c;
  --#{$prefix}primary-rgb: rgb(227 11 92);
}

If you need to update variables in dark mode, you can do so just like we did with the bordered skin. Similarly, you can update the custom skin as well. These changes are made within the _skin.scss file.
Now, when you set data-skin="raspberry" then it will set primary color as per current skin.
To add custom skin style , please Read more.
To add custom skin to customizer, please Read more.
You can also add style that should work for custom skin only.
That's All!!