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.
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.scss > Bootstrap extended variable
│ │ ├── 📄 _bootstrap-extended-dark.scss > Bootstrap extended dark variable
│ │ ├── 📄 _components.scss > Custom components variable
│ │ ├── 📄 _components-dark.scss > Custom components dark variable
│ │ ├── 📄 _libs.scss > Third-party library variable
│ │ ├── 📄 _pages.scss > Pages & Apps variable
│ │ └── ...
│ ├── 📂 _theme > Theming mixins for bootstrap, pages and libs
│ ├── 📂 pages > Pages & Apps styles
│ ├── 📂 rtl > RTL Supported styles
│ │ └── 📄 ...
│ ├── 📄 core.scss > Core (light) style file which includes bootstrap, bootstrap-extended, components & colors
│ ├── 📄 core-dark.scss > Core dark style file
│ ├── 📄 theme-bordered.scss > Theme bordered
│ ├── 📄 theme-bordered-dark.scss > Theme bordered dark
│ ├── 📄 theme-default.scss > Theme default
│ ├── 📄 theme-default-dark.scss > Theme default dark
│ ├── 📄 theme-semi-dark.scss > Theme semi-dark
│ └── 📄 theme-semi-dark-dark.scss > Theme semi-dark dark
└── ...
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 morescss/
The core style folder which contains _bootstrap-extended/
, _components/
_custom-variables/
, _theme/
, pages/
and rtl/
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, components, pages & libraries variables using this folder scss files. All files in this folder is for user purposes._theme/
Folder SCSS files are used for bootstrap, libraries and pages components theming purpose.pages/
Folder contains SCSS files for the Pages and Apps Like, Profile page, Calender app.rtl/
RTL enables styles for bootstrap-extended, components, libraries and pages.core.scss
includes _bootstrap.scss
, _bootstrap-extended.scss
, _components.scss
and _colors.scss
. Similarly core-dark.scss
includes dark version of those files.theme-*.scss
Used for custom themes (Like, default, bordered and semi-dark) light/dark version. You can also create your custom themes.node_modules
folder in the bootstrap.scss
& bootstrap-dark.scss
file. It is installed via npm install
and compiled using the build tools.
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.
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.
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:
To change bootstrap color variable other than Primary, you need to do below changes to scss/_custom-variables/_bootstrap-extended.scss
file.
If you want to update color for dark layout, then you can add same variable to scss/_custom-variables/_bootstrap-extended-dark.scss
file.
_bootstrap-extended.scss
file. To update primary color, please check here
$success: #009900 !default;
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.
_components.scss
file.
$menu-width: 14rem !default;
To change third-party library variables like flatpicker width. You need to do below changes to scss/_custom-variables/_libs.scss
file.
$flatpickr-width: 20rem;
To change pages variables like calendar, You need to do below changes to scss/_custom-variables/_pages.scss
file.
scss/pages/
folder.
$calender-sidebar-width: 20rem;
Where should I write my custom scss?
To write your custom style create style.scss
file inside scss/
folder and write your styes in that file. Just don't forget to include it in your HTML file.
scss/
folder. To exclude a file from compilation list just prepend a _ symbol to the filename.
By default, stylesheets within src/libs/
and src/scss/pages/
directories include all available support, such as rtl support; light and dark styles. If you don't want to use them, it's highly recommended to disable unwanted support. It will decrease the size of compiled stylesheets.
Set appropriate variables to false in the src/scss/_custom-variables/_support.scss
, recompile sources.
For example, if you don't need to include RTL support, the src/scss/_custom-variables/_support.scss
file will look like this:
$enable-light-style: true;
$enable-dark-style: true;
$enable-rtl-support: false;
Sneat is theme based admin template. So we suggest you to update primary color theme wise from scss/theme-*.scss
file.
If you are familiar with SCSS (Recommended method), you can easily change theme colors by changing variable value. For example, if you want to update default theme of the template, open scss/theme-default.scss
file
$primary-color: #757575;
To change the primary color throughout your entire project. For Light layout update $primary in scss/_custom-variables/_bootstrap-extended.scss
file. For Dark Layout update $primary in scss/_custom-variables/_bootstrap-extended-dark.scss
$primary: #757575;
_custom-variables/
folder. For example, You can update $secondary, $success and so on, that will override style as per your changes.
To update other then primary color, 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
│ │ ├── 📄 _libs.scss > To override Third-party library variable
│ │ ├── 📄 _pages.scss > To override Pages & Apps variable
│ │ └── 📄 support.scss > To override Support variables
If you are not familiar with SCSS (Not recommended method), you can change the style attribute by replacing the old value with a new one in assets/css
folder.
assets/
folder to avoid
future update conflicts. If you still modify the file, it may require to merge it manually with
future updates.
Sneat admin template comes with unique feature to create custom theme. So user can easily integrate template with their own choice & requirements.
To create custom theme, you need to create scss files that contains variables, custom scss and primary color variable of the theme. It's required to set $primary-color variable to use base primary color for custom theme.
Let's say, if you want to create your own custom theme named as raspberry
, follow steps below.
theme-raspberry.scss
and theme-raspberry-dark.scss
inside scss/ folder.Now, How to add variables, styles & mixins to theme scss file.
$primary-color
variable with basic includes like below// Component variables include
@import './_components/include';
@import './_theme/common';
@import './_theme/libs';
@import './_theme/pages';
$primary-color: #e30b5c;
// To update color to custom theme's primary color
@include template-common-theme($primary-color);
@include template-libs-theme($primary-color);
@include template-pages-theme($primary-color);
@include template-navbar-style('.bg-navbar-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);
@include template-menu-style('.bg-menu-theme',BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR, $active-bg: ACTIVE_BACKGROUND_COLOR);
@include template-footer-style('.bg-footer-theme', BACKGROUND_COLOR, $color: TEXT_COLOR, $active-color: ACTIVE_TEXT_COLOR, $border: BORDER_COLOR);