Nueva Handbook

This is a collection of global SASS Mixins and Functions. This will not produce any CSS as well.

# Directory Structure

/2_tools/
   /functions/
        _bounds.tools.scss
        _sass-helper.tools.scss
        _units.tools.scss
        _geometry.tools.scss //optional
        _math-rounding.tools.scss //optional
        
  /mixins/
       _mq.tools.scss
       _typo.tools.scss
       _metrics.tools.scss
       _bem.tools.scss
       _layout.tools.scss
       _button.tools.scss
       _classes.tools.scss
       _grid(custom).tools.scss //optional   
       _decoration.tools.scss //optional
       _text.tools.scss //optional

    _tools.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#

# Naming

The underlying concept of naming SASS Mixins is:

@mixin app-[filename]-[semantics-usecase]

//e.g. mixins/decoration.tools.scss
@mixin app-decoration-linear-gradient(){
  //..
};
1
2
3
4
5
6
  • Where app is the prefix to determine if the mixin is global and belongs to our app (not third-party mixin).
  • Where [filename] is the name of the file inside mixins folder.

The underlying concept of naming SASS Functions is not specified yet.

# Functions

  • bounds.tools
    Calculate lower and upper bounds in a range; used for setting up media queries
  • sass-helper.tools
    Some helper for dealing with sass maps (map-get-deep) or making a string-split
  • units.tools
    All about units, converting to rem/em units
  • geometry.tools (optional)
    Geometry functions, e.g Pythagorean theorem; is also using Math Sass (opens new window) as a dependency
  • math-rounding.tools (optional)
    Math rounding values in SASS

# Mixins

/*
 Generates a media query
 @param: (optional) $breakpoint
 @example @include app-mq(large-up){};
 */
 
@mixin app-mq($breakpoint: 'small-up') {
  @if map-has-key($app-breakpoints-mqs, $breakpoint) {
    $mq: map-get($app-breakpoints-mqs, $breakpoint);
    @media #{$mq} {
      @content;
    }
  }@else{
    @warn 'From Mixin: app-mq: The Media Query #{$breakpoint} doesn`t exist in $app-breakpoints-mqs. Element is: #{&}'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  • metrics.tools
    mixins to generate measurements; e.g.
/*
 Set a property with a rem value and a fallback
 @param: $property; css property which we want the value
 @param: $value in px
 @example @include rem('margin', 24px);
 */

@mixin app-metrics-property-rem($property, $value) {
  #{$property}: $value;
  #{$property}: app-px-to-rem($value);
}
1
2
3
4
5
6
7
8
9
10
11

  • typo.tools » Using Typo Mixins
    collection of mixins to simplify typo styles
  • layout.tools
    mixins for layout purpose e.g.
/*
 Calculated gaps on the basis of grid column gutters
 @factor (optional): Distance Factor to grid column gutter
 @example  @include app-component-gap($factor: 4);
 */
@mixin app-layout-gap($factor: 2) {
  @each $size, $value in $app-breakpoints-sizes {
    @include app-mq('#{$size}-up'){
      @if(map_has_key($app-grid-column-gutter, $size)) {
        $gutter: map-get($app-grid-column-gutter, $size );

        @if ($gutter != null) {
          @if $factor > 0 {
            margin-bottom: $factor * $gutter;
          } @else {
            margin-top: $factor * $gutter * -1;
          }
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  • button.tools
    some mixins to create button styles based on the settings from the previous layer
  • grid(custom).tools
    used for setting up a custom grid
  • bem.tools » Using BEM Mixins
    collection of mixins to simplify the usage of BEM
  • classes.tools
    mixins to generate specific classnames, e.g.
/*
 Generates classes with breakpoint-names for each breakpoint
 @example 
  .u-hide{
    @include app-classes-by-breakpoint(){
      display: none!important;
    }
  }
 */

@mixin app-classes-by-breakpoint(){
  @each $breakpoint, $value in $app-breakpoints-mqs {
    @if ($breakpoint == 'small-up') {
      $selector: #{&};
      @at-root #{$selector} {
        @content;
      }
    } @else {
      @include app-mq($breakpoint) {
        $selector: #{&}\@#{$breakpoint};
        @at-root #{$selector} {
          @content;
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  • decoration.tools (optional)
    e.g. gradient mixins or other global decoration helpers.
  • text.tools (optional)
    e.g. text-overflow-ellipsis mixin or other global text helpers.