Please enable JavaScript.
Coggle requires JavaScript to display documents.
Sass (Meaning (layout/ (have stylesheets for the main parts of the site…
Sass
Meaning
base/
-
_reset.css, _typography.css, _base.css
layout/
have stylesheets for the main parts of the site (header, footer, navigation, sidebar…)
-
_grid.scss, _header.scss, _footer.scss, _sidebar.scss, _forms.scss, _navigation.scss
components
ontains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines
_media.scss, _carousel.scss, _thumbnails.scss
pages/
page-specific styles, it is better to put them in a pages/ folder,
_home.scss, _contact.scss
themes/
On large sites and applications, it is not unusual to have different themes.
-
abstracts/
r gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder
_variables.scss, _mixins.scss, _functions.scss, _placeholders.scss
vendors/
-
_normalize.scss, _bootstrap.scss, _jquery-ui.scss, _select2.scss
main.css
This file should not contain anything but import and comments.
Partials
create partial Sass files that contain little snippets of CSS that you can include in other Sass files
-
Architecture
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _placeholders.scss # Sass Placeholders
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc.
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| … # Etc.
|
|– layout/
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc.
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc.
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc.
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| … # Etc.
|
`– main.scss # Main Sass file
Preprocessing
Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies
Variable
Sass uses the $ symbol to make something a variable.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML
import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions.
import 'reset';
Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
mixin border-radius($radius)
Extend/Inheritance
Using extend lets you share a set of CSS properties from one selector to another.