ipokkel

⇐ 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

ipokkel

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }

ipokkel

Array.prototype.compare = function(array) {
  if (!array) {
    return false;
  }
  if (this.length !== array.length) {
    return false;
  }
  for (var i = 0, l = this.length; i < l; i++) {
    if (this[i] instanceof Array && array[i] instanceof Array) {
      if (!this[i].compare(array[i])) {

ipokkel

<?php
/**
 * Load content for specific pages, checkout or confirmation page
 * Add this code to your PMPro Customizations Plugin - https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/
 */
function load_my_script_for_pmpro() {
	
	global $pmpro_pages;

	if ( is_page( $pmpro_pages['checkout'] ) || is_page( $pmpro_pages['confirmation'] ) ) {

ipokkel

<?php

/**
* This example is to show you the 'niche' options each Paid Memberships Pro - Register Helper Add-on field can take and how to use it.
* For more information on the Register Helper Add-on please visit https://www.paidmembershipspro.com/add-ons/free-add-ons/pmpro-register-helper-add-checkout-and-profile-fields/
**/

function my_pmprorh_init()
{
    //don't break if Register Helper is not loaded

ipokkel

<? php
/**
 * This will add billing fields to Add Member from Admin and the user profile edit pages.
 *
 * Optional: Set if fields should be required
 *
 * Requires Paid Memberships Pro and PMPro Register Helper plugins active.
 *
 * You can add this recipe to your site by creating a custom plugin
 * or using the Code Snippets plugin available for free in the WordPress repository.

ipokkel

function my_pmprorh_init()
{
    //don't break if Register Helper is not loaded
    if(!function_exists("pmprorh_add_registration_field"))
    {
        return false;
    }
    //define the fields
    $fields = array();
  

ipokkel

<?php

// Show the custom Register Helper Fields in a different location if the user is logged in.

function my_pmprorh_init()
{
	//don't break if Register Helper is not loaded
	if(!function_exists( 'pmprorh_add_registration_field' )) {
		return false;
	}

ipokkel

<?php // do NOT copy this line, copy from below this line

/*
	Tell PMPro to filter the_content a bit later.
	
	This will sometimes fix issues where theme or plugin elements (e.g. videos)
	are not being filtered by PMPro. Note that this sometimes will cause
	some things (e.g. share links) to be filtered that you don't want to be
	filtered... and sometimes edits to the theme or a child theme are
	required to get the desired effect.

ipokkel

<?php // Do not copy

/**
 * pmpro_checkout_level Use `pmpro_checkout_level` to redirect and interject communication with users during checkout.
 *
 * @param  array $levels The array created in admin
 *
 * @return array         Output of the array
 */
function pmpro_redirect_during_checkout( $level ) {