samthurman

Compiling Solid With Grunt Sass

Grunt-sass uses libsass to compile your sass. Use includePaths to make solid available as an scss import.

  sass: {
    dist: {
      options: {
        includePaths: 'node_modules/bf-solid/_lib'
 },

samthurman

// Custom Button Boilerplate
// -------------------------
// all the css you would need to
// add a purple button to your app
// w/ Solid


.button--purple {
  @include button-style(violet, $text-white, violet, $text-white);
}

samthurman

#Onboarding (amy)

• welcome to buzzfeed doc

##Tech Organization (luke)

• staffing
• learning and professional development

#Teams

samthurman

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

//
// Mixins
// --------------------------------------------------

// Generate Breakpoint Prefixes
// -------------------------

samthurman

// ----
// libsass (v3.2.4)
// ----

.person {
  background: deepPink;

  .person__face {
    background: green;
  

samthurman

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

// Borders

$border-default: 1px solid rgba(0,0,0,.2);

// Spacing

samthurman

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

//Generate Breakpoint Prefixes

// all of the breakpoint names and values
// we may use this a lot, keep them somwhere safe
$breakpoints: (

samthurman

// ----
// libsass (v3.2.2)
// ----

@function px-to-rem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

h1 {

samthurman

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

// all of the breakpoint names and values
// we may use this a lot, keep them somwhere safe
$breakpoints: (
  all: 0,
  xs: 24rem,

samthurman

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

//breakpoint function, seems solid
@mixin media($breakpoint) {
  $queries: (
    xs: 24rem,
    sm: 40rem,