Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 3, 2020 03:31 am GMT

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
  /* 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 RepoBoilerplate Image

Hope This Helps , Thank You !


Original Link: https://dev.to/zinox9/sass-tools-with-npm-setup-boilerplate-5ec4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To