Skip to content

Instantly share code, notes, and snippets.

=border(!width = 10px, !style = "solid", !color = blue)
border= !width !style !color
/* Using inline arguments */
.foo
+border(10px, "solid", green)
&:hover
+border(10px, "dashed", red)
/* Using Keyword arguments */
#placeholder
%img(src="/images/placeholder.jpg"
alt="This is just a placeholder image")
%p#image_description
This would be the text that would go inside the paragraph tag
This is the most-general grammar for property values in CSS.
It's taken from http://www.w3.org/TR/CSS2/syndata.html,
where the token definitions can be found.
value : [ any | block | ATKEYWORD S* ]+;
at-rule : ATKEYWORD S* any* [ block | ';' S* ];
block : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
| DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
| DASHMATCH | ':' | FUNCTION S* any* ')'
=gradient(!type, !start, !end, !color_start, !color_end, !color_stop = false)
!coords = "#{Estart}, #{!end}"
!gradient= #{!coords}, from(#{!color_start}), to(#{!color_end})
@if !color_stop
!gradient= !gradient + ", " + !color_stop
background: -webkit-gradient(#{!type}, #{!gradient})
background: -moz-#{!type}-gradient(#{!gradient})
=linear-gradient(!start, !end, !color1, !color2, !color_stop = false)
+gradient("linear", !start, !end, !color1, !color2, !color_stop)
@chriseppstein
chriseppstein / meta.rb
Created November 16, 2009 19:09 — forked from tdreyno/meta.rb
module WithLayout
def with_layout(layout)
@layout = layout
yield
ensure
@layout = nil
end
def get(*args)
options = args.last.is_a?(Hash) ? args.pop : {}
options[:layout] ||= @layout
//**
Example use:
a
+sprite-bg("icons-32.png")
a.twitter
+sprite-column(1)
a.facebook
+sprite-column(2)
...
<html>
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="sidebar">
.js #location-navigation-form .form-submit,
.js #business-listing-form .form-submit,
.js #detailTabs ul,
/* .js #addReview, */
/* .js #addTags, */
.js #detailsEnhanced #addTags,
.js #locationSearchList,
.js #moreHoods,
#navListLeft
{ display: none; }
//
Full stylesheet for Winston
License: see LICENSE packaged with Winston
the same license counts for each module separately
Desc: This is the full Winston stylesheet. It is recommended
to only take the parts you need in orde to minimize the
amount of CSS in your project.
# config/compass.rb
# Require any additional compass plugins here.
project_type = :rails
project_path = RAILS_ROOT if defined?(RAILS_ROOT)
css_dir = "public/stylesheets/compiled"
sass_dir = "app/stylesheets"
images_dir = "public/images"
javascripts_dir = "public/javascripts"
output_style = :compact
http_images_path = "/public/images"