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

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

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

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

// ----
// 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

// ----
// 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

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++/-.`                                                                                               
                   

arlodesign

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

arlodesign

// Run this script when using InDesign for web/mobile/tablet comps
// Calculates zoom based on 72ppi, so 100% shows pixel-perfect sizing

app.generalPreferences.customMonitorPpi = 72;
app.generalPreferences.useCustomMonitorResolution = true;