Skip to main content

A simple Sass example

Here is a Sass example. Sass is a good productivity booster or just a passing folly.

We need a border. It’s simple:

.edit_container {
  border: 1px solid #a77;
}

.editable_div {
  border: 1px solid black;
}

.gallery_preview {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.gallery_preview_big {
  border-bottom: 1px solid #555;
}

It’s just 4 simple class definition. Where is the DRY rule? Nowhere.

(more…)

Related Posts:

prettify into Tumblr

Open your own Tumblr dashboard and here click to the Customize.
In the Theme menu click to Custom HTML… It will load code of the current template… Find the `<body>` string and replace it with this lines:

<body onload="prettyPrint()">

Then insert these lines befor `</head>`:

<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-sql.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-yaml.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-hs.js"></script>

ok… the installation is ready. (see http://google-code-prettify.googlecode.com/svn/trunk/src/ for other additional supported languages)

To modify default style click the Advanced menu and write your own style under the `Add custom CSS` label. Eg:

 

pre .str, code .str { color: #65B042 !important; }
pre .kwd, code .kwd { color: #E28964 !important; }
pre .com, code .com {
  color: #AEAEAE !important;
  font-style: italic !important;
}
pre .typ, code .typ { color: #89bdff !important; }
pre .lit, code .lit { color: #3387CC !important; }
pre .pun, code .pun { color: #fff !important; }
pre .pln, code .pln { color: #fff !important; }
pre .tag, code .tag { color: #89bdff !important; }
pre .atn, code .atn { color: #bdb76b !important; }
pre .atv, code .atv { color: #65B042 !important; }
pre .dec, code .dec { color: #3387CC !important; }

pre.prettyprint, code.prettyprint {
  background-color: #000 !important;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -o-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -khtml-border-radius: 4px !important;
  border-radius: 4px !important;
}

pre.prettyprint {
  width: 95% !important;
  margin: 1em auto !important;
  padding: 1em !important;
  white-space: pre-wrap !important;
}

ol.linenums {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #AEAEAE !important;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
  list-style-type: none !important
}
li.L1,li.L3,li.L5,li.L7,li.L9 { } 

pre { padding: 5px; font-size: 1em !important; }

hr {
  border: none;
  border-top: 1px dotted #AA2200;
  width: 80%;
  margin-left: 0;
}

Now if you want insert any code snippet into your post you need to edit as HTML (right side of the editor icon set) and put it into a `pre` tag (or `code`). Eg:

<pre class="prettyprint lang-php">
  <!--?php echo 'Test' ?-->
</pre>

Where lang-XXX is the language what you want to use.

If you have any questions feel free to ask.

Related Posts: