An Interest In:
Web News this Week
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
Sass Reference Sheet with NPM setup boilerplate
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 division
Partials 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
BEMBlock 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 71 pattern is a common Sass architecture, and is recommended by the Sass Guidelines Project. Heres 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 !
Original Link: https://dev.to/zinox9/sass-tools-with-npm-setup-boilerplate-5ec4
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To