styles.less

@def-b: #fff;
@def-b-hilight: #ddd;
@def-c: #444;
@def-c-hilight: #1E88E5;
@def-font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",Osaka,sans-serif;
@def-border: solid 1px #aaa;
@def-blockquote-content: '\201C';

.b-color(@color: @def-b) { background-color: @color; }

.def-font(@em: 1.00em, @color: @def-c) { font-family: @def-font-family; font-size: @em; color: @color; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.under-line { padding-bottom: 5px; border-bottom: @def-border; }
.ver-margin(@margin) { margin: @margin 0; }
.top-left(@top, @left, @position: absolute){ position: @position; top: @top; left: @left}


.def-table-border{ border: none; border-bottom: @def-border; }
.def-blockquote{ padding: 20px 20px 20px 50px; position: relative; border-left: 5px solid @def-b-hilight; }
.def-q-before{ .def-font(3em); .bold; .top-left(5px,10px); color: @def-b-hilight; content: @def-blockquote-content; }

.markdown-preview.markdown-preview {

  .b-color;
  .def-font;

  h1{ .def-font(2.8em); .bold; }
  h2{ .def-font(2.0em); .under-line; }
  h3{ .def-font(1.4em); .bold; }
  h4{ .def-font(1.3em); .bold }
  h5{ .def-font(1.2em); .bold }
  h6{ .def-font(1.1em); .bold }
  a { .def-font(1.0em, @def-c-hilight) }
  li{ .ver-margin(5px) }

  table { .def-font(0.9em); .ver-margin(40px); border-collapse: collapse; }
  th    { .def-font; .b-color(@def-b-hilight); .def-table-border; }
  td    { .def-font; .b-color(#fff); .def-table-border; }
  pre   { .def-font(0.9em, @def-b-hilight); }

  blockquote{ .def-font; .italic; .def-blockquote; }
  blockquote::before{ .def-q-before; }
}