Skip to content

Instantly share code, notes, and snippets.

@jennli

jennli/jade_.md

Last active February 23, 2016 19:06
Show Gist options
  • Save jennli/3f617605e47323dbaaff to your computer and use it in GitHub Desktop.
Save jennli/3f617605e47323dbaaff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jade_.md

Jade

  • allow to see logic behind HTML script
apm install atom-bootstrap3
apm install atom-jade
apm install preview-plus
  • index.jade
html
  • right click and choose preview plus to view html version of this script
doctype

html
  head
    title bitcoin
    link(href='css/boostrap.css', rel='stylesheet')
  body
  • is equal to
<!DOCTYPE html>
<html>
  <head>
    <title>bitcoin</title>
    <link href="css/boostrap.css" rel="stylesheet">
  </head>
  <body></body>
</html>

sassMeister

$grey: #333
$red: #FF0000

.container
  background-color: $red

body
  font: 25px
  color: $grey

nav
  ul
    margin: 10px
    padding: 10px
    list-style:none
    li
      display: inline-block
      a
        color: blue
  • is the same as
.container {
  background-color: #FF0000;
}

body {
  font: 25px;
  color: #333;
}

nav ul {
  margin: 10px;
  padding: 10px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  color: blue;
}
  • to install
gem install sass

day32_jade $ sass -v
Sass 3.4.21 (Selective Steve)

day32_jade $ ls
css		index.jade
day32_jade $ cd css/
css $ sass --watch .
>>> Sass is watching for changes. Press Ctrl-C to stop.
[Listen warning]:
  Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.
  • install jade
npm install jade
  • watching... always watching: navigate inside the folder that has jade file
jade -w .
sass --style expanded --watch .
  • map file dictates how you should interpret the css file, what source it came from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment