Más contenido relacionado
Similar a CSS architecture: How To Write Clean & Scalable Code (20)
CSS architecture: How To Write Clean & Scalable Code
- 15. USEMIXINS&EXTENDSEXTENDS
// Sass
%error {
background: $error-color;
}
.error {
@extend %error;
border-width: 1px;
&--important {
@extend %error;
border-width: 3px;
}
}
// CSS
.error,
.error--important {
background: #f00;
}
.error {
border-width: 1px;
}
.error--important {
border-width: 3px;
}
- 19. USEAFRAMEWORKCOMPONENTS
// framework/_components.scss
// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
// @import "bootstrap/code";
@import "bootstrap/grid";
// @import "bootstrap/tables";// @import "bootstrap/tables";
@import "bootstrap/forms";
// @import "bootstrap/buttons";
// ...
- 20. USEFRAMEWORKVARIABLES
// variables from package/GEM
$gray-base: #eee !default;
$gray-darker: darken($gray-base, 10%) !default;
// etc...
// framework/_variables.scss (overrides)
// $gray-base: #eee !default;
$gray-darker:$gray-darker: darken($gray-base, 20%);
// etc...
- 21. USEAFRAMEWORKOVERRIDES
// framework/_overrides.scss
// Core CSS
// @import "overrides/scaffolding";
// @import "overrides/type";
// @import "overrides/code";
@import "overrides/grid";
// @import "overrides/tables";// @import "overrides/tables";
@import "overrides/forms";
// @import "overrides/buttons";
// ...
- 23. THERESULTSTRUCTURE
├── application.scss
├── components
│ └── _your-custom-components-go-here.scss
├── views
│ └── _your-view-based-styles-go-here.scss
├── framework
│ ├──│ ├── _components.scss
│ ├── _overrides.scss
│ ├── _variables.scss
│ └── overrides
│ └── _framework-overrides-go-here.scss
├── settings
│ ├── _z-index-variables.scss
│ ├──│ ├── _breakpoint-variables.scss
│ └── _custom-variables.scss
└── utilities
├── _functions.scss
├── _mixins.scss
├── _shared.scss
└── _typography.scss