スタイルガイドを作成するために、Sassdown を使用して小さな Grunt.js をセットアップしています。ここのgithubで入手しました-https ://github.com/sturobson/Squeeler
スタイルガイドを作成するために使用されている特定のコードは -
sassdown: {
options: {
template_assets: 'source/styleguide/',
template_html: 'source/styleguide.hbs',
includes: 'source/site_includes.hbs'
},
files: {
expand: true,
cwd: 'sass/partials',
src: ['**/*.scss'],
dest: 'styleguide/'
}
}
私は grunt connect も使用していますが、ページが正常に起動します。しかし、何らかの理由で、本来あるべき HTML の iframe を作成していません。
.scss ファイルには正しいマークダウンと (S)CSS が配置されています -
/*
Alerts
======
Creates an alert box notification using the `.alert-` prefix. The following options are available:
<p class="alert-success">Winning</p>
<p class="alert-warning">Steady</p>
<p class="alert-error">Oh Shit!</p>
*/
@mixin alert($colour){
color: darken($colour, 50%);
background: $colour;
border-radius: 5px;
margin-bottom: 1.2em;
padding: 1em;
}
.alert-success { @include alert(#e2f3c1) }
.alert-warning { @include alert(#fceabe) }
.alert-error { @include alert(#ffdcdc) }
ハンドルバー ファイル - https://github.com/sturobson/Squeeler/blob/master/source/styleguide.hbs -は、上記から iframe を生成する必要があります。しかし、そうではありません。
私はこれを機能させましたが、それを壊すために何をしたかわかりません。