andrexduarte

@mixin mobile_bg($file){
  background-image: image-url('mobile/standard/#{$file}');

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    background-image: image-url('mobile/retina/#{$file}');
    background-size: image-width('mobile/standard/#{$file}') image-height('mobile/standard/#{$file}');
  }
}

// Usage

andrexduarte

@mixin before-after-background($height, $side-width, $before, $after) {
    height: $height;
  position: relative;
   z-index: 1;

  &:before, &:after {
     content: '';
     display: block;
      height: $height;
    position: absolute;

andrexduarte

group :frontend do

  guard 'shell' do
   watch %r{.+\.(scss|sass)} do |file|
   n file[0], "#{file[0]} changed"
   `compass compile --sourcemap`
   end
  end

  # Image optimization

andrexduarte

// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {

andrexduarte

Meu Sublime Text

Instale o package control.

Pacotes

• Alignment
• All Autocomplete
• Emmet

andrexduarte

source "https://rubygems.org"

gem 'uglifier'
gem 'compass'
gem 'guard'
gem 'guard-shell'
gem 'sass-globbing'
gem 'compass-normalize'
gem 'juicer'
gem 'scss-lint', '~> 0.27.0'

andrexduarte

browser-sync: browser-sync start --config browser-sync.js
guard: bundle exec guard --group frontend concat linter

andrexduarte

# Require any additional compass plugins here.
  require 'sass-globbing'

# Set this to the root of your project when deployed:
  http_path = "/"
  css_dir = "css"
  fonts_dir = "css/fonts"
  sass_dir = "sass"
  images_dir = "images"
  javascripts_dir = "js"

andrexduarte

module.exports = {
    debugInfo: true,
    open: false,
    proxy: "localhost.dev",
    files: [
        'css/*.css',
        '*.php'
    ],
    ghostMode: {
        clicks: true,

andrexduarte

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
  FB.init({appId: 'xxxxxxxxxx', status: true, cookie: true, xfbml: true});
  FB.Canvas.setSize({height: XXXX});
</script>