DEV Community

Cover image for Sass Reference Sheet with NPM setup in boilerplate project
Arjun Porwal
Arjun Porwal

Posted on • Edited on

Sass Reference Sheet with NPM setup in boilerplate project

#css #npm #webdev #javascript

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{}
Enter fullscreen mode Exit fullscreen mode

  • 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; }
Enter fullscreen mode Exit fullscreen mode

  • 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);}
Enter fullscreen mode Exit fullscreen mode
  • 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; }
Enter fullscreen mode Exit fullscreen mode
  • Control Directives to write complex code using conditionals and loops (, @content, @if) : Usage 
 @mixin test($condition) { $color: if($condition, blue, red); color:$color }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
 .form { } //block .form--theme-xmas { } //block--modifier .form__submit { } //block__element .form__submit--disabled { } //block__element--modifier
Enter fullscreen mode Exit fullscreen mode 
 /* classic + atomic prefix */ .o-subscribe-form__field-item {} /* camelCase + atomic prefix */ .o-subscribeForm__fieldItem {}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 Boilerplate Image

Hope This Helps , Thank You !😊

Top comments (0)