arlodesign

                                                                                                                                                                                                        
                                                                                                                                                                                                        
                                                                                                                 `````````````                                                                          
                                                                                          `.....`             `.-:oyyoshhhhs/:::-`                                                                      
                                                                                     `./+ydmdhyo+.````````..-/+shdmmdmmNMNmmdsyhyo.                                                                     
                   

arlodesign

// ----
// libsass (v3.2.5)
// ----

div {
  @each $lang in (en-us, es-la, pt-br) {
    html[lang="#{$lang}"] & {
      background-image: url(http://url.com/#{$lang}/image.png); 
    }
  }

arlodesign

// ----
// libsass (v3.2.5)
// ----

@function color-diff($color-a, $color-b) {
  $hue: hue($color-a) - hue($color-b);
  $saturation: saturation($color-a) - saturation($color-b);
  $lightness: lightness($color-a) - lightness($color-b);

  $function-hue: 'adjust-hue';

arlodesign

## BEGIN SOPASTRIKE
## Add to the top of your .htaccess file

<IfModule mod_rewrite.c>
  RewriteEngine on


  # The first time is listed as greater than 7:59:59am.
  # The second time is less than 8:00:00pm (20:00:00).
  #

arlodesign

[
  {
    "keys": ["ctrl+shift+c"],
    "command": "chain",
    "args": {
      "commands": [
        ["css_comb"],
        ["reg_replace", {"replacements": ["css_spaceout", "css_spacein"]}]
      ]
    }

arlodesign

Problem

• Using emmet in jsx files
• Emmet expands text when js autocomplete needed
• Using className instead of class

How it works

• Install plugin RegReplace
• Install plugin Chain Of Command

arlodesign

CSS/SCSS Standards

This document represents our ideals for writing CSS for the Sprout Social web app*. This document will serve as our guide for writing new CSS and updating existing styles. Code reviews of new CSS will adhere to these guidelines as closely as is practical—it’s a jungle in there, so concessions will be made for fighting existing specificity issues.

Colors, buttons, icons and modals can be found at our previous style guide document. Though that document is now deprecated, the patterns are still valid.

Format

• Tabs, not spaces.*
• One selector per line.

arlodesign

{
	"block-indent": "\t",
	"space-before-selector-delimiter": "",
	"space-after-selector-delimiter": "\n",
	"space-before-opening-brace": " ",
	"space-before-closing-brace": "\n",
	"space-before-colon": "",
	"space-after-colon": " ",
	"space-after-opening-brace": "\n",
	"space-between-declarations": "\n",

arlodesign

1. Download this gist into a csscompare folder

2. npm install

3. Create before and after folders. Your folder should now look like this:

    - /csscompare
    |- /after
    |- /before
    |- /npm_modules
    |- index.js
   

|- package.json

arlodesign

                                                                                                                                                                                                        
                                                                                                                                                                                                        
                                                                   ````````....````                                                                                                                     
                                                         `..-:/+oyhddddmmmmmmmmmdhyyo+//:--.`````                                                                                                       
                                                  `.-:+yhmNNNNNMMMMMMMMMMMMMMMMMMMMMMMMNNNNmdddhhso++/-.`