DWboutin

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

DWboutin

{
  "name": "nextjs-redux-bootstrap",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "NODE_ENV=test mocha \"tests/**/*.{js,jsx}\" --require mocha-snapshots --require ignore-styles --no-deprecation --reporter list --compilers js:babel-core/register --recursive",
    "test-coverage": "NODE_ENV=test nyc --reporter=text mocha \"tests/**/*.{js,jsx}\" --recursive --reporter list --compilers js:babel-core/register --require mocha-snapshots --require ignore-styles",
    "dev": "node server.js",
    "build": "next build ./src",

DWboutin

v8.10.0
5.6.0
nextjs-redux-bootstrap@0.0.1 /Users/mikaelboutin/Desktop/novalabs/novalab-react
├─┬ @zeit/next-sass@0.1.2
│ ├─┬ @zeit/next-css@0.1.5
│ │ ├─┬ css-loader@0.28.9
│ │ │ ├── babel-code-frame@6.26.0 deduped
│ │ │ ├─┬ css-selector-tokenizer@0.7.0
│ │ │ │ ├── cssesc@0.1.0
│ │ │ │ ├── fastparse@1.1.1

DWboutin

ZIPCODE: {
      GB: /^GIR[ ]?0AA|((AB|AL|B|BA|BB|BD|BH|BL|BN|BR|BS|BT|CA|CB|CF|CH|CM|CO|CR|CT|CV|CW|DA|DD|DE|DG|DH|DL|DN|DT|DY|E|EC|EH|EN|EX|FK|FY|G|GL|GY|GU|HA|HD|HG|HP|HR|HS|HU|HX|IG|IM|IP|IV|JE|KA|KT|KW|KY|L|LA|LD|LE|LL|LN|LS|LU|M|ME|MK|ML|N|NE|NG|NN|NP|NR|NW|OL|OX|PA|PE|PH|PL|PO|PR|RG|RH|RM|S|SA|SE|SG|SK|SL|SM|SN|SO|SP|SR|SS|ST|SW|SY|TA|TD|TF|TN|TQ|TR|TS|TW|UB|W|WA|WC|WD|WF|WN|WR|WS|WV|YO|ZE)(\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}))|BFPO[ ]?\d{1,4}$/i,
      JE: /^JE\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
      GG: /^GY\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
      IM: /^IM\d[\dA-Z]?[ ]?\d[ABD-HJLN-UW-Z]{2}$/i,
      US: /^\d{5}([ \-]\d{4})?$/i,
      CA: /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJ-NPRSTV-Z]\s?\d[ABCEGHJ-NPRSTV-Z]\d$/gi,
      DE: /^\d{5}$/i,
      JP: /^\d{3}-\d{4}$/i,
      FR: /^\d{2}[ ]?\d{3}$/i,

DWboutin

export default function allowCrossOrigin(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

  if ('OPTIONS' === req.method) {
    res.sendStatus(200);
  } else {
    next();
  }

DWboutin

import React from 'react';
import { Link } from 'react-router';

class Application extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (

DWboutin

import React from 'react';
import { connect } from 'react-redux';

import GroceryList from './GroceryList.react';
import ItemAdder from './ItemAdder.react';

import { changeListArray, itemSubmit, itemIncreasing, itemNameChange } from '../actions/grocery-list-actions';
import baseItemsList from '../utils/baseList';

class Application extends React.Component {

DWboutin

/** @packages importation */
import React from 'react';
import { connect } from 'react-redux';

/** actions importation */
import { changeListArray, itemSubmit, itemIncreasing, itemNameChange } from '../actions/grocery-list-actions';

/** Item de base pour le store */
import baseItemsList from '../utils/baseList';

DWboutin

import React from 'react';

export default function Wrapper () {
  return WrappedComponent => class extends React.Component {
    constructor(props) {
      super(props);
      this.state = { data: null }; //exemple
    }
    componentDidMount() {
      this.setState({ data: 'Hello' }); //exemple

DWboutin

var fs = require('fs');
  var traverseFileSystem = function (currentPath) {
    var files = fs.readdirSync(currentPath);
    for (var i in files) {
      var currentFile = currentPath + '/' + files[i];
      var stats = fs.statSync(currentFile);
      if (stats.isFile()) {
        var path = currentFile.split('/');
        var newName = path.pop().replace(/-/g, '_');