test added; readme updated

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+tests/style.css

README.md

@@ -1,6 +1,15 @@
-[![CodePen](https://drive.google.com/uc?id=1sCJrr039GgHRQohs8MqOf58_KpuLwQPs)](https://www.npmjs.com/package/sass-mediaquery-singleline)
+<p align="center">
+  <a href="https://www.npmjs.com/package/sass-mediaquery-singleline">
+    <img src="http://gssystems.com.br/files/sass-mediaquery-singleline.png" alt="SASS MediaQuery SingleLine NPM" width="420">
+  </a>
+</p>
+<p align="center">
+  <img src="https://img.shields.io/npm/dt/sass-mediaquery-singleline" alt="SASS MediaQuery SingleLine NPM Downloads">
+  <img src="https://badge.fury.io/js/sass-mediaquery-singleline.svg" alt="SASS MediaQuery SingleLine NPM Version">
+  <img src="https://img.shields.io/github/release-date/GregoriSoria/sass-mediaquery-singleline" alt="SASS MediaQuery SingleLine NPM Release Date">
+</p>
 
-# sass-mediaquery-singleline
+<h1 align="center">sass-mediaquery-singleline</h1>
 SASS Media queries on a single line.
 
 **Never** again use media queries!
@@ -21,20 +30,36 @@ On your scss (with webpack), add:
 @import '~sass-mediaquery-singleline/main';
 ```
 
+### The calc is based on `vw` metric considering the desktop width and mobile width providing by designer's layout (Figma, Zeplin, PSD, etc).
 
-### Config
+So, you **need** to change the below sass variables to your respective layout viewport widths:
 
-The calc is based on `vw` metric considering the desktop width and mobile width providing by designer's layout.
+```scss
+// default values
+$deskSize: 1920; // px
+$mobileSize: 768; // px
+```
 
-So, you **need** to change the below sass variables to your respective layout widths:
+### Config
 
 ```scss
-// default values
-$deskSize: 1920;
-$mobileSize: 768;
+// availables variables
+$deskSize: 1920 !default; // px
+$mobileSize: 768 !default; // px
+$allExact: false !default;
+$considerMinimalFont: true !default;
+  $minFont: 10 !default; // px
+  $minFontResolution: 1280 !default; // px
 ```
 
-### EXAMPLES:
+- `deskSize` (Number) Desktop **width** defined by the designer layout
+- `mobileSize` (Number) Mobile **width** defined by the designer layout
+- `allExact` (Boolean) Defines if **all** your values will be exactly what you put
+- `considerMinimalFont` (Boolean) Defines if you want se a minimal font on tiny resolutions(`minFontResolution`)
+- `minFont` (Number) The minimal font according to defined resolution(`minFontResolution`)
+- `minFontResolution` (Number) Defines the resolution that `minFont` will be applied
+
+### Usage:
 
 ```scss
 .an-element {
@@ -46,6 +71,18 @@ $mobileSize: 768;
 }
 ```
 
+- **`attr($attr, $desk, $mobile, $exact)`** Set an attribute responsible equals to desktop and mobile according to designer's resolutions
+    - **`attr`** (CSS Attribute) [**Required**] The attribute name that you want responsible and/or calculated
+    - **`desk`** (Number) [Not Required, can be `false`] The desktop resolution value *according to designer's layout*
+    - **`mobile`** (Number) [Not Required, can be `false`] The mobile resolution value *according to designer's layout*
+    - **`exact`** (Boolean) [Not Required, Default `false`] Defines if **all** your values will be exactly what you put
+
+- **`mediaAttr($attr, $value, $resolution)`** Set an attribute responsible according to defined resolution parameter
+    - **`attr`** (CSS Attribute) [**Required**] The attribute name that you need responsible and/or calculated
+    - **`value`** (Number) [**Required**] The resolution value that will be applied to `resolution`
+    - **`resolution`** (Number[px]|CSS Media Condition) [**Required**] The resolution that the value will be applied
+    - **`exact`** (Boolean) [Not Required, Default `false`] Defines if **all** your values will be exactly what you put
+
 <p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="gregorisoria" data-slug-hash="BayPwmW" data-pen-title="SASS MediaQuery SingleLine Sample">
   <span>See the Pen <a href="https://codepen.io/gregorisoria/pen/BayPwmW">
   SASS MediaQuery SingleLine Sample</a> by Grégori Sória (<a href="https://codepen.io/gregorisoria">@gregorisoria</a>)
@@ -56,4 +93,11 @@ $mobileSize: 768;
 
 [![CodePen](https://s3.amazonaws.com/media.eremedia.com/wp-content/uploads/2018/05/31112343/Codepen.png)](https://codepen.io/gregorisoria/pen/BayPwmW)
 
+### Tests
+`npm run test`
+
+<br><br>
 ##### Tip: Use a css minifier
+
+### Licence
+sass-mediaquery-singleline is open-sourced software licensed under the [MIT license](LICENSE.md).

gulpfile.js

@@ -0,0 +1,60 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const cleanCss = require('gulp-clean-css');
+const notifier = require('node-notifier');
+const browserSync = require('browser-sync').create();
+sass.compiler = require('node-sass');
+
+const src_folder = 'tests/';
+
+gulp.task('serve', () => {
+  return browserSync.init({
+    server: {
+      baseDir: [ 'tests' ]
+    },
+    port: 3000,
+    open: false
+  });
+});
+
+gulp.task('watch', () => {
+  gulp.watch([`tests/**/*.html`], gulp.series('html')).on('change', () => {
+    notifier.notify({
+      title: 'HTML changed',
+      message: 'HTML changed successfully!',
+    });
+    browserSync.reload;
+  });
+  gulp.watch([`tests/**/*.scss`], gulp.series('scss')).on('change', () => {
+    notifier.notify({
+      title: 'SCSS changed',
+      message: 'SCSS changed successfully!',
+    });
+    browserSync.reload;
+  });
+});
+
+gulp.task('html', () => {
+  return gulp.src([ `${src_folder}**/*.html` ], {
+    base: src_folder,
+    since: gulp.lastRun('html')
+  })
+    .pipe(browserSync.stream());
+});
+
+gulp.task('scss', () => {
+  return gulp
+    .src([`${src_folder}**/*.scss`])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(cleanCss({
+        level: {
+            2: {
+                all: true,
+            }
+        }
+    }))
+    .pipe(gulp.dest(src_folder))
+    .pipe(browserSync.stream());
+});
+
+gulp.task('tests', gulp.series('scss', gulp.parallel('serve', 'watch')));

main.scss

@@ -1,11 +1,12 @@
 $deskSize: 1920 !default;
 $mobileSize: 768 !default;
+$allExact: false !default;
 
 $considerMinimalFont: true !default;
   $minFont: 10 !default; // px
   $minFontResolution: 1280 !default; // px
 
-@mixin attr($attr, $desk: false, $mobile: false, $exact: false) {
+@mixin attr($attr, $desk: false, $mobile: false, $exact: $allExact) {
   $exact: if($attr == 'font-weight', true, $exact);
 
   // Considering minimal font
@@ -26,14 +27,14 @@ $considerMinimalFont: true !default;
   }
 }
 
-@mixin mediaAttr($attr, $value, $resolution, $customMedia: false) {
-  @if ($customMedia) {
-    @media #{$customMedia} {
-      #{$attr}: $value; // print custom value
+@mixin mediaAttr($attr, $value, $resolution, $exact: $allExact) {
+  @if (type-of($resolution)) {
+    @media (max-width: #{$resolution}px) {
+      #{$attr}: if($exact, $value, sz($value, $resolution)); // print desk value // print custom value
     }
   } @else {
-    @media (max-width: #{$resolution}px) {
-      #{$attr}: $value; // print custom value
+    @media #{$resolution} {
+      #{$attr}: if($exact, $value, sz($value, $resolution)); // print desk value // print custom value
     }
   }
 }