node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

sass-styleguide-with-pug

sass-styleguide-with-pug

Caution

このpackageはα版です

Overview

  • sass,scssファイルに記述された指定のコメントドックに応じてstyleguide(SPA)を生成
  • styleguide(SPA)でディレクトリ別、タグ別、検索機能、個別閲覧が可能
  • iframeで生成されたhtmlを呼び出しているので、余計なコードがない状態を担保

Sample Project

Sample workspace

// 開発構成
.
├── dest
│   ├── css
│   │   └── style.css
│   ├── images
│   └── fonts
├── gulpfile.js
├── package.json
└── src
    ├── images
    ├── fonts
    ├── pug
    │   └── styleguide
    │       └── components
    │           └── buttons
    │               └── default_buttons.pug
    └── sass
        └── components
            └── buttons.scss
// gulpfile.js 
var gulp = require('gulp');
var styleguideTask = require('sass-styleguide-with-pug');
 
gulp.task('styleguideTask',function(){
  styleguideTask({
     styleguideDirName: 'styleguide',
     sassDirPath: 'src/sass',
     pugDirPath: 'src/pug',
     stylesheetPath: 'dest/css/style.css',
     imageDirPath: 'dest/images',
     fontDirPath: 'dest/fonts'
   });
});
// src/sass/components/buttons.scss 
/*
@title: Default Buttons
@pug: components/buttons/default_buttons.pug
@description: buttonサンプル
@tags: component,button
*/
// src/pug/styleguide/components/buttons/default_buttons.pug
a.pure-button(href="#") A Pure Button
button.pure-button A Pure Button