| $image-path: '../img' !default; | |
| $fallback-extension: 'png' !default; | |
| $retina-suffix: '@2x'; | |
| @mixin background-image($name, $size:false){ | |
| background-image: url(#{$image-path}/#{$name}.svg); | |
| @if($size){ | |
| background-size: $size; | |
| } | |
| .no-svg &{ | |
| background-image: url(#{$image-path}/#{$name}.#{$fallback-extension}); |
| p { | |
| font-size: 14px; //Will be overridden if browser supports rem | |
| font-size: 0.8rem; | |
| } |
| .btn { | |
| display: block; | |
| color: white; | |
| background-color: green; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| } | |
| .btn--tiny { | |
| padding-right: 6px; | |
| padding-left: 6px; |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Flipside</title> | |
| <meta name="description" content=""> |
You can use SassScript variables in selectors and property names using #{} interpolation syntax.
It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.
mixins_w_expressions_in_selectors_property_names_interpolation.scss
Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.
On their own, lists don’t do much, but the [Sass list functions][list-function] make them useful. The [nth function][nth-function] can access items in a list, the [join function][join-function] can join multiple lists together, and the [append function][append-function] can add items to lists. The [@each rule][each-rule] can also add styles for each item in a list.
[Read more on lists][read-more] [list-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions [nth-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method [join-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#join-instance_method [append-function]: http://sass-lang.com
| @charset "UTF-8"; | |
| .rss-tag:before, .call-us:before, .listen-now:before { | |
| margin-right: 0.25em; | |
| } | |
| .rss-tag:before { | |
| content: ""; | |
| } | |
| .call-us:before { |
There are many Git workflows out there, I heavily suggest also reading the atlassian.com Git Workflow article as there is more detail then presented here.
The two prevailing workflows are Gitflow and feature branches. IMHO, being more of a subscriber to continuous integration, I feel that the feature branch workflow is better suited.
When using Bash in the command line, it leaves a bit to be desired when it comes to awareness of state. I would suggest following these instructions on setting up GIT Bash autocompletion.
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="stylesheet" href="app.css"> | |
| </head> | |
| <body> | |
| <p class="text-color">Hello world! Simple IE selector limit test scenario</p> | |
| </body> |