WordPress Theme Integration

Variables are perfect for WordPress themes as they allow for easy customization:

// _variables.scss
// Theme colors - can be easily modified for different theme versions
$theme-primary: #3a86ff;
$theme-secondary: #ff006e;
$theme-background: #f9f9f9;
$theme-text: #333333;

// WordPress-specific spacing
$wp-admin-bar-height: 32px;
$content-width: 960px;
$sidebar-width: 300px;

// Breakpoints aligned with WordPress content width
$breakpoint-small: 600px;    // Mobile devices
$breakpoint-medium: 960px;   // Tablets & small desktops
$breakpoint-large: 1280px;   // Desktops

WordPress Integration Example

// WordPress comment styling with nesting
.comments-area {
  margin-top: 40px;
  border-top: 1px solid #eee;
  
  .comments-title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .comment-list {
    list-style: none;
    padding: 0;
    
    .comment {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      
      .comment-author {
        display: flex;
        align-items: center;
        
        .avatar {
          margin-right: 15px;
          border-radius: 50%;
        }
        
        .fn {
          font-weight: bold;
        }
      }
      
      .comment-metadata {
        font-size: 12px;
        color: #777;
        margin: 5px 0 15px;
      }
      
      .comment-content {
        p {
          margin-bottom: 15px;
        }
      }
      
      .reply {
        margin-top: 10px;
        
        a {
          color: #3a86ff;
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
      
      // Nested comments (replies)
      .children {
        list-style: none;
        padding-left: 40px;
        margin-top: 20px;
      }
    }
  }
}

WordPress Theme Partials Structure

scss/
 ├── main.scss               /* Main file for importing all others */
 ├── abstracts/
 │   ├── _variables.scss     /* Theme variables */
 │   ├── _functions.scss     /* Custom functions */
 │   ├── _mixins.scss        /* Reusable mixins */
 │   └── _placeholders.scss  /* Extend placeholders */
 ├── base/
 │   ├── _reset.scss         /* CSS reset/normalize */
 │   ├── _typography.scss    /* Typography styles */
 │   └── _helpers.scss       /* Helper classes */
 ├── components/
 │   ├── _buttons.scss       /* Button styles */
 │   ├── _navigation.scss    /* Navigation menus */
 │   ├── _sidebar.scss       /* Sidebar styles */
 │   ├── _forms.scss         /* Form elements */
 │   └── _widgets.scss       /* WordPress widgets */
 ├── layouts/
 │   ├── _header.scss        /* Header styles */
 │   ├── _footer.scss        /* Footer styles */
 │   ├── _grid.scss          /* Grid system */
 │   └── _blog.scss          /* Blog layout */
 ├── pages/
 │   ├── _home.scss          /* Homepage styles */
 │   ├── _about.scss         /* About page */
 │   └── _contact.scss       /* Contact page */
 ├── plugins/
 │   ├── _woocommerce.scss   /* WooCommerce styles */
 │   └── _acf.scss           /* Advanced Custom Fields styles */
 └── admin/
     └── _editor.scss        /* Gutenberg editor styles */

The main.scss file would import all these partials in the proper order:

/*!
Theme Name: My WordPress Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Description: A custom WordPress theme
Version: 1.0.0
License: GNU General Public License v2 or later
*/

// Abstracts
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';
@import 'abstracts/placeholders';

// Base
@import 'base/reset';
@import 'base/typography';
@import 'base/helpers';

// Layouts
@import 'layouts/grid';
@import 'layouts/header';
@import 'layouts/footer';
@import 'layouts/blog';

// Components
@import 'components/buttons';
@import 'components/navigation';
@import 'components/sidebar';
@import 'components/forms';
@import 'components/widgets';

// Pages
@import 'pages/home';
@import 'pages/about';
@import 'pages/contact';

// Plugins
@import 'plugins/woocommerce';
@import 'plugins/acf';

WordPress-Specific Mixins

// WordPress admin bar spacing mixin
@mixin admin-bar-spacing($top: 0) {
  .admin-bar & {
    top: calc(#{$top} + 32px);
    
    @media screen and (max-width: 782px) {
      top: calc(#{$top} + 46px);
    }
  }
}

// WordPress featured image aspect ratio mixin
@mixin featured-image-ratio($width: 16, $height: 9) {
  position: relative;
  overflow: hidden;
  padding-top: percentage($height / $width);
  
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// Usage
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  
  @include admin-bar-spacing();
}

.post-thumbnail {
  @include featured-image-ratio();
  
  // Different ratio for featured posts
  &.featured {
    @include featured-image-ratio(2, 1);
  }
}

WordPress Theme Integration

// WordPress-specific placeholders
%entry-meta {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1rem;
  
  a {
    color: inherit;
    text-decoration: none;
    
    &:hover {
      color: $primary-color;
    }
  }
}

%block-padding {
  padding: 2rem;
  
  @media (max-width: 768px) {
    padding: 1.5rem;
  }
  
  @media (max-width: 576px) {
    padding: 1rem;
  }
}

// Usage in WordPress templates
.post {
  .entry-meta {
    @extend %entry-meta;
  }
}

.page {
  .entry-meta {
    @extend %entry-meta;
    text-align: center;
  }
}

.widget {
  @extend %block-padding;
  background-color: #f8f9fa;
}

.comment-body {
  @extend %block-padding;
  border: 1px solid #eee;
}

WordPress Grid System Function

// WordPress-specific column calculator
$content-width: 1200px;
$gutter: 30px;

@function col-width($columns, $total-columns: 12) {
  @return calc((#{$content-width} - (#{$total-columns - 1} * #{$gutter})) / #{$total-columns} * #{$columns} + (#{$columns - 1} * #{$gutter}));
}

// WordPress layout with custom grid functions
.site-content {
  max-width: $content-width;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: $gutter;
}

.content-area {
  width: col-width(8);  // Main content area
  
  @media (max-width: 768px) {
    width: 100%;
  }
}

.widget-area {
  width: col-width(4);  // Sidebar
  
  @media (max-width: 768px) {
    width: 100%;
  }
}

// Footer widgets
.footer-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: $gutter;
  
  .widget {
    width: col-width(3);
    
    @media (max-width: 992px) {
      width: col-width(6);
    }
    
    @media (max-width: 576px) {
      width: 100%;
    }
  }
}

WordPress Theme Integration with Control Directives

// WordPress-specific control directives

// Generate admin color scheme classes
$admin-colors: (
  'blue': #2271b1,
  'coffee': #c7a589,
  'ectoplasm': #523f6d,
  'midnight': #363b3f,
  'ocean': #738e96,
  'sunrise': #cf4944
);

@each $name, $primary in $admin-colors {
  .admin-color-#{$name} {
    // Admin bar style
    #wpadminbar {
      background-color: $primary;
    }
    
    // Admin menu style
    #adminmenu,
    #adminmenu .wp-submenu,
    #adminmenuback,
    #adminmenuwrap {
      background-color: darken($primary, 10%);
    }
  }
}

// Generate editor block spacing classes
$spacings: (
  'tiny': 0.5rem,
  'small': 1rem,
  'medium': 2rem,
  'large': 3rem,
  'huge': 5rem
);

@each $name, $size in $spacings {
  .has-#{$name}-spacing {
    margin-bottom: $size;
  }
  
  .has-#{$name}-padding {
    padding: $size;
  }
}

// Generate responsive visibility classes
$breakpoints: (
  'small': 576px,
  'medium': 768px,
  'large': 992px,
  'xlarge': 1200px
);

@each $name, $width in $breakpoints {
  @media (max-width: $width) {
    .hide-on-#{$name} {
      display: none !important;
    }
  }
  
  @media (min-width: $width) {
    .show-on-#{$name} {
      display: block !important;
    }
  }
}