DEV Community

loading...
Cover image for Sass Reference Sheet with NPM setup in boilerplate project

Sass Reference Sheet with NPM setup in boilerplate project

zinox9 profile image Arjun Porwal Updated on ・3 min read

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

  • 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
  /* 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 Boilerplate Image

Hope This Helps , Thank You !😊

Discussion (0)

pic
Editor guide