Giter Club home page Giter Club logo

jigsass-tools-maps's Introduction

JigSass Tools Maps

NPM version Build Status Dependency Status

Map helper functions

Installation

Using npm:

npm i -S jigsass-tools-maps

Usage

@import 'path/to/jigsass-tools-maps/index.scss'; should give you all you need.

jigsass-tools-maps provides the following utility functions:

jigsass-get
Get a value from nested maps
jigsass-set
Set a value in nested maps
jigsass-deep-has-key
Check if a map has a nested key
jigsass-merge-deep
Recursively assign values from multiple maps into a single map

For further details, see the documentation located in The sassdoc directory.

Documention

Documentation of JigSass Tools Maps's Sass features is generated by SassDoc.

Run gulp serve:sassdoc to fire up a live server serving the documentation.

To generate documentation from annotation in the source code, run gulp sass:doc.

To disable the generation of sass documentation, create an empty noSassDoc file at the root jigsass-tools-maps directory.

Development

It is a best practice for JigSass modules to not automatically generate css on @import, but rather have to user explicitly enable the generation of specific styles from the module.

Contributions in the form of pull-requests, issues, bug reports, etc. are welcome. Please feel free to fork, hack or modify JigSass Tools Maps in any way you see fit.

Writing documentation

Good documentation is crucial for scalability and maintainability. When writing your module, please do make sure that both its Sass functionality (functions, mixins, variables and placeholder selectors), as well as the CSS it generates (selectors, concepts, usage exmples, etc.) are well documented.

As mentioned above, the Sass is documented using SassDoc (Documention).

Running tests

gulp lint will, well, lint the contents scss files in the scss directory.

gulp test with run module's test using Mocha and Sassaby.

gulp tdd will watch both the Sass files and the test specs for changes, and will run tests automatically upon them.

Writing tests

JigSass Tools Maps tests are written using Sassaby and Mocha. Spec files are located in the test directory.

Mocha allows us to place a call to before() in the root of any test file and it will be run once, before all the other tests in every test_*.js file. We can also require() files and assign them to the global object to make them available to all test_*.js files.

jigsass-tools-maps uses a file called helper.js can be used to set up mocha globals requires and before().

In addition to Sassaby's testing functions, jigsass-tools-maps makes a few Sass functions available to the test suite, for use inside Sassaby tests:

jig-var-equals($value, $var) -> {boolean}
Check if a variable equals a value.
$value {*}: A value to compare the value of $var to.
$var {*}: The variable to test
jig-var-type-is($type, $var) -> {boolean}
Check if a variable is of a certain type.
$type {string}: A type to compare with the type of $var.
$var {*}: The variable to test
jig-map-key-equals($value, $map, $keys...) -> {boolean}
Check if a map's key is assigned a cerain value.
$value {*}: A value to compare the value of a key in $map with.
$map {map}: The map to test.
$keys... {arglist}: A recursive chain of keys.
jig-map-key-type-is($type, $map, keys...) -> {boolean}
Check if a map's key is of a certain type
$type {string}: A type to compare with the type of $var.
$map {map}: The map to test.
$keys... {arglist}: A recursive chain of keys.

File structure

┬ ./
│
├─┬ scss/ 
│ └─ index.scss # The module's importable file.
│
├── sassdoc/    # Generated documentation # of the module's sass features
│
└─┬─ test/
  │
  ├─┬ helpers/
  │ │
  │ ├── importer.scss       # Used for easilty importing tested scss files
  │ │
  │ └── _test_helpers.scss  # JigSass's assertion helpers,# for use inside Sassaby tests.
  │                         
  ├── helper.js              # Used for defining global `before()`# functions and requiring modules.
  │                         
  └── test_jigsass-tools-maps  # Specs. Mocha will automatically 
                             # run all javascript files located
                             # in the `test` directory.

License: MIT

jigsass-tools-maps's People

Contributors

txhawks avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.