| $is-ie = true | |
| $is-ie--version = 8 | |
| $no-mq = true | |
| $width--fixed-min = 960px | |
| $width--fixed-max = 1200px | |
| @import 'index' |
| $is-ie = false | |
| $deskMq = "only screen and (min-width: 768px)" | |
| respond-to($mq, content) | |
| if $is-ie == true | |
| content | |
| else | |
| @media $mq | |
| content() |
This document will briefly review a few of the more common ways of using stylus plugins for those who are not familiar. Throughout these examples, we will be using a non-existant stylus plugin called example. Please change example out for whatever plugin you are actually trying to use!
First example is for if you are building your own stylus pipeline in node. This is a pretty standard way to do things.
| $is-ie = true | |
| $is-ie--version = 7 | |
| $no-mq = true | |
| $width--fixed-min = 960px | |
| $width--fixed-max = 1200px | |
| @import 'base' |
| # db/migrate/XXXXXXXXXXXXX_add_authentication_token_to_users.rb | |
| class AddAuthenticationTokenToUsers < ActiveRecord::Migration | |
| def change | |
| add_column :users, :authentication_token, :string | |
| add_index :users, :authentication_token, :unique => true | |
| end | |
| end |
| #!/usr/bin/env ruby | |
| require "rubygems" | |
| require "haml" | |
| # Calls to "render" can take a context object that will be accessible from the templates. | |
| class Context | |
| def initialize(locals, scope, options) | |
| @locals = locals | |
| @scope = scope | |
| @options = options |
| { | |
| "directory": "vendor/assets/components" | |
| } |
| #!/usr/bin/env sh | |
| ## | |
| # This is script with usefull tips taken from: | |
| # https://github.com/mathiasbynens/dotfiles/blob/master/.osx | |
| # | |
| # install it: | |
| # curl -sL https://raw.github.com/gist/2108403/hack.sh | sh | |
| # |
| $golden-ratio: 1.61803399; // Everyone's doing it! | |
| @function golden-division($value, $times: 1) { | |
| @for $i from 1 through $times { | |
| $value: $value / $golden-ratio; | |
| } | |
| @return round($value); | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| div {background-color: #fec0ff; height: 300px; width: 400px;} | |
| div[contentEditable = "true"] {background-color: #bada55;} | |
| </style> | |