Sass
Today I am sharing this reference sheet that contains all the references to usage of Sass, also BEM & 7-1 architecture.
This also contains a boilerplate setup to get started on any Sass project with all the setup for it done already ! (Refer to the end of this sheet)
Markdown is available at my Github
Table of Contents
Variables for reusable values : Usage
$pink: #ff1493;Nesting to nest Selectors inside of one another for less code : Usage
//scss
.parent{
.child{}
}
// becomes in css
.parent .child{}
Operators for mathematical operations in CSS : Usage
font-size: (16px / 24px) // Uses parentheses, does divisionPartials and Imports (@rules) to write code in different files and merge them : Usage
@import "sample";Mixins to write reusable piece of code : Usage
@mixin overlay() {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.modal-background{
@include overlay();
background: black;
opacity: 0.9;
}
Mixins & Placeholders : comparison
Functions are similar to mixins but produce a value : Usage
@function remy($pxsize) {
@return ($pxsize/16)+rem;
}
h1 { font-size: remy(32);}
- Extends to inherit same declaration in different selectors : Usage
// scss
.small-uppercase{
color: lightslategrey;
font-size: 10px;
}
.modal-background{
@extend .small-uppercase;
}
// generated css
.small-uppercase,
.modal-background{
color: lightslategrey;
font-size: 10px;
}
- Control Directives to write complex code using conditionals and loops (, @content, @if) : Usage
@mixin test($condition) {
$color: if($condition, blue, red);
color:$color
}
BEM
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
Example :
<form class="form form--theme-xmas">
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
.form { } //block
.form--theme-xmas { } //block--modifier
.form__submit { } //block__element
.form__submit--disabled { } //block__element--modifier
BEM by Example : Reference
ABEM - A better approach to use BEM , Explanation
/* classic + atomic prefix */
.o-subscribe-form__field-item {}
/* camelCase + atomic prefix */
.o-subscribeForm__fieldItem {}
7-1 Folder Architecture
- Folder Structure in Practice : Reference
- The 7–1 pattern is a common Sass architecture, and is recommended by the Sass Guidelines Project. Here’s the basic structure:
sass/
|
|– abstracts/ # HELPER FILES
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
|
|– vendors/ # THIRD-PARTY FILES
| |– _bootstrap.scss # Bootstrap
|
|– base/ # BOILERPLATE FILES
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
|
|– layout/ # STRUCTURE FILES
| |– _navigation.scss # Navigation
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
|
|– components/ # SPECIFIC COMPONENTS FILES
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
|
|– pages/ # PAGE SPECIFIC FILES
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
|
|– themes/ # MULTIPLE THEME FILES
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
|
– main.scss # Main Sass input file
NPM Setup Boilerplate
- I have made a complete NPM setup for sass development , that you can use as a boilerplate for your project, by just simply cloning it.
- It contains :
- Font-Awesome and Animate CSS is built in !
- 7-1 Folder Architecture
- Global Reset
- Gitignore Included
- Media Query Manager
- JavaScript Babel Compilation
- Development scripts : compile, serve and watch
- Production scripts : compile, prefix and compress.
-
You can Find this Boilerplate in my Github Repo
Hope This Helps , Thank You !😊
Top comments (0)