Neoteric Plumbing Mishap

    sass-linear-expression

    1.0.1 • Public • Published

    SASS Linear Expression

    Responsive dimensions without the use of media queries.

    p {
     
      // font size of 16px at viewport width of 320px 
      // font size of 18.24px at viewport width of 768px 
      // font size of 24px at viewport width of 1920px 
     
      font-size: calc(#{linear-expression( 
        (320px,16px),
        (1920px,24px)
      )});
     
    }

    Quick install

    NPM

    npm i sass-linear-expression

    Import

    import 'sass-linear-expression/linear-expression.scss'

    Browser support

    All browsers with support for CSS calc() and vw are supported, which includes:

    • Internet Explorer 11
    • Chrome
    • Firefox
    • Safari
    • Android Browser

    Usage

    The linear-expression() SASS function returns an expression intended to use within the CSS calc() function. This enables more complex expressions:

    $linear: linear-expression( 
      (320px,16px),
      (1920px,24px)
    );
     
    // Multiplication 
    font-size: calc(#{$linear} * 2);
    // Division 
    font-size: calc(#{$linear} / 2);
    // Addition 
    font-size: calc(#{$linear} + 10%);
    // Subtraction 
    font-size: calc(#{$linear} - 10%);

    It is also possible to add or subtract multiple linear expressions:

    $linear1: linear-expression( 
      (320px,16px),
      (1920px,24px)
    );
     
    $linear2: linear-expression( 
      (320px,8px),
      (1920px,12px)
    );
     
    font-size: calc(#{$linear1} + #{$linear2});

    Precision

    The precision of float numbers will vary depending on your compiler configuration, which affects the precision of the generated expressions.

    Order of operations

    The CSS calc() function follows the standard order of operations. For this reason the generated expression will be surrounded by parentheses, which can result in the following:

    p {
      font-size: calc((5px + .5vw));
    }

    A third argument is available to remove parentheses from the expression.

    $linear: linear-expression( 
      (320px,16px),
      (1920px,24px),
      false
    );

    Units

    linear-expression() accepts all absolute CSS units (cm, mm, in, px, pt, pc), although the output will always by in pixels.

    This is made possible by SASS's support of real-world unit calculations, as detailed in the SASS documentation of numeric units.

    Install

    npm i sass-linear-expression

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    10.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • sigmundftw