davidkpiano

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$colors: (
  picton-blue: #3EA9F5,
  azure-radiance: #00A5F9,
  froly: #EF7379,
  carnation: #F14F4F,

davidkpiano

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$slabel-theme: (
  border: 0,
  radius: 4px,
  padding: 10px 15px,
  font: 'Open Sans',

davidkpiano

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

.test {
  pi: pi();
  e: e();
}

davidkpiano

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

$scotch-color-key: 'base' !default;

$scotch-colors: (
  'primary': (
    'base': #8e3329,

davidkpiano

A simple alternative to BEM

Project

Choose a prefix for your project. If your project is called "The XY Project", for instance, choose xy-.

Components

Prefix them with your project prefix. Simple as that. Component classes are never lengthened.

/* Specifity: 0 1 0 */

davidkpiano

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// True (v2.0.2)
// ----

@import "true";

// inside 'scss/project.scss'

davidkpiano

import React from 'react';

import * as My from './components/my-components.js';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <My.Foo />
        <My.Bar />

davidkpiano

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

@import 'sassdash';

test {
  test: __string-last-index-of('abracadabra', 'ab')
}

davidkpiano

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

$empty-list: ();

@function foo($args...) {
    @return call(bar, $args...);
}

davidkpiano

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@function foo($a, $b, $c, $should-be-empty...) {
  @return length($should-be-empty);
}

@function bar($args...) {