In this blog article, we will learn how to use Sass in WordPress for new users and beginners.<\/p>\n\n\n\n
Sass and other CSS preprocessors are powerful tools that help designers and developers write less code while achieving more. In the end, all preprocessed code is compiled into standard CSS.<\/p>\n\n\n\n
SCSS offers advanced features like variables for cleaner, more maintainable, and minified code. It supports all CSS capabilities and adds powerful features that go beyond traditional CSS.<\/p>\n\n\n\n
This tutorial assumes that you have a working knowledge of setting up a WordPress environment.<\/p>\n\n\n\n
CSS is easy to learn, but large stylesheets can become hard to manage. <\/p>\n\n\n\n
Changing a single value, like a color across the site, often means finding and updating it everywhere, which can quickly turn into a nightmare.<\/p>\n\n\n\n
Sass, a CSS preprocessor, removes repetitive work by generating reusable style blocks. <\/p>\n\n\n\n
It speeds up development, improves readability, and adds features like variables, nesting, mixins, and inheritance.<\/p>\n\n\n\n
When migrating an old CSS project to Sass, you can split large stylesheets into clean, organized modules. Using partials, variables, and mixins makes the code easier to manage and maintain.<\/p>\n\n\n\n
Follow the process I mentioned below:<\/p>\n\n\n\n
There are a number of ways (applications)you can compile your SASS to CSS, some of which are paid apps and some of which are free. It depends on which one you want to use. Some paid app includes<\/p>\n\n\n\n
Others include using grunt, gulp. I prefer using gulp.\u00a0Here is the link<\/a>\u00a0where you can find all the details about how to get started with a gulp.<\/p>\n\n\n\n This perfectly describes what Gulp really is. Install it in a few easy steps:<\/p>\n\n\n\n Gulp<\/a>\u00a0requires you to download and install Node.js<\/a>, which will also install\u00a0NPM<\/a>, which is its package manager, and it is used to install modules.<\/p>\n\n\n\n To verify that you have installed Node.js<\/a> and NPM<\/a> correctly, open the terminal and check their current version by entering the commands: run the following npm command to install Gulp and all plug-ins as development dependencies:<\/p>\n\n\n\n This will create a Create a new edit the file Image files can often be compressed further using tools such as imagemin<\/a>. Add the following code to Save then run WordPress cannot use Sass files directly; you must compile to a single Launch this new task with Add the following code to Run this new task with Rather than calling each task separately, we can add the following code to You can now use\u00a0 Your workflow can be radically improved by:<\/p>\n\n\n\n First, we need to define a\u00a0 This will create a proxy server to your web server running WordPress on\u00a0 Now add a\u00a0 Finally, add a\u00a0 Now run Your WordPress site will load as before, but Gulp will watch for changes and apply the updates immediately. You\u2019ll never need to switch to your browser and click refresh again!<\/p>\n\n\n\n Now that we are all configured, we are ready to write some Sass.<\/p>\n\n\n\n Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that gives your CSS superpowers.<\/p>\n\n\n\n These are the features Sass adds to CSS to make your work easier:<\/p>\n\n\n\n These are the additions through which makes your work easier. We\u2019ll discuss each feature in more detail below:<\/p>\n\n\n\n One key Sass feature in WordPress is variables, letting you define and reuse values across stylesheets. This simple tool greatly improves consistency and speeds up your overall workflow.<\/p>\n\n\n\n So, let’s say you want to use the same color, font, or any other CSS value throughout your coding. <\/p>\n\n\n\n Just store it in a variable and reuse it whenever you want. Remember that SASS uses the $symbol for variables. <\/p>\n\n\n\n Here’s an example of variable usage in Sass vs CSS:<\/p>\n\n\n\n With Sass, you define variables like This is especially useful for brand colors, saving time and avoiding repetitive value updates.<\/p>\n\n\n\n Sass also comes in handy when you need to make your code more readable. With Sass, you can nest your CSS selectors in the same way as you can in HTML. <\/p>\n\n\n\n Here\u2019s an example of nesting used in SASS:<\/p>\n\n\n\n As you can see, the ul, li, and a selectors are nested inside the nav selector, which makes your CSS code more organized, cleaner, and easier to read.<\/p>\n\n\n\n You have the ability to create partial Sass files that have small snippets of CSS that you can later include in other Sass files.<\/p>\n\n\n\n You can use the partial Sass file by using the underscore\u00a0_partial.css<\/strong>\u00a0in the name of your file<\/p>\n\n\n\n The underscore tells Sass the file is a partial and shouldn\u2019t compile into its own CSS file. These partials are included using the Now, when you split your Sass into separate parts with the @use rule, it will start loading the file as a module. <\/p>\n\n\n\n That is, you can refer to its variables, functions, and mixins in your files using a namespace based on your file’s name. The file you use will also include the generated CSS in its output.<\/p>\n\n\n\n As you can see, this makes your workflow more organized as you can define variables in separate files and then import them into a different Sass file.<\/p>\n\n\n\n Mixins are a powerful Sass feature that reduces repetitive CSS by letting you reuse groups of declarations. <\/p>\n\n\n\n They also accept values for flexibility, making them ideal for tasks like handling vendor prefixes.<\/p>\n\n\n\n To create a mixin, use the You can pass values using variables like Once your mixin is created, you can use it as a CSS declaration that starts with @include and then is followed by the name of the mixin.<\/p>\n\n\n\n Finally, one of the most useful features of Sass is the @extend<\/strong>. This feature helps you share a group of CSS properties of one selector with another.<\/p>\n\n\n\n Operators in Sass let you perform math directly in your stylesheets using In this example, we\u2019ve made a simple fluid grid which is based on 960 px. With operations in Sass, we convert pixel values to percentages without too much of a hassle.<\/p>\n\n\n\n If you\u2019re new to This, give it a try and explore the guide at Sass Doc<\/a> for a quick start. If you can write CSS, you already have the skills to write Sass.<\/p>\n\n\n\n Hopefully, this tutorial brings anyone using Sass a better understanding of how to combine it with WordPress and helps you build or edit your theme more efficiently than ever before.<\/p>\n","protected":false},"excerpt":{"rendered":"What is Gulp?<\/h2>\n\n\n\n
gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.<\/pre>\n\n\n\n
\n
Install Node.js<\/h2>\n\n\n\n
node -v<\/code> and npm -v<\/code>.<\/p>\n\n\n\nInstall Gulp globally<\/h2>\n\n\n\n
\n
npm rm --global gulp<\/code> before following these instructions.<\/li>\n\n\n\nInitialize Gulp In Project Directory<\/h2>\n\n\n\n
\n
# Setup Gulp Dependencies<\/h2>\n\n\n\n
npm install --save-dev autoprefixer browser-sync css-mqpacker cssnano gulp-concat gulp-deporder gulp-imagemin gulp-newer gulp-postcss gulp-sass gulp-strip-debug gulp-uglify gulp-noop postcss-assets<\/pre>\n\n\n\n
node_modules<\/code> A folder that contains the module code with dependencies. For Git users, add\u00a0node_modules<\/code>\u00a0to your\u00a0.gitignore<\/code>\u00a0file.<\/p>\n\n\n\n# Create Gulp Configuration File<\/h2>\n\n\n\n
gulpfile.js<\/code> the configuration file in your project folder<\/p>\n\n\n\ngulpfile.js<\/code> in your project source folder<\/code>, replace its content, if any, with these contents:<\/p>\n\n\n\n\/\/ Gulp.js configuration\n'use strict';\n\nconst\n\n \/\/ ** change these two to yours **\n wordpress_project_name = 'your-site',\n theme_name = 'your-site',\n browserSyncProxy = 'http:\/\/local.your-site.test\/',\n\n \/\/ source and build folders, ** change this to yours **\n dir = {\n src : 'src\/',\n build : `..\/..\/vagrant-local\/www\/${wordpress_project_name}\/public_html\/wp-content\/themes\/${theme_name}\/`\n },\n\n \/\/ Gulp and plugins\n { src, dest, series, parallel, watch } = require('gulp'),\n noop = require(\"gulp-noop\"),\n newer = require('gulp-newer'),\n imagemin = require('gulp-imagemin'),\n sass = require('gulp-sass'),\n postcss = require('gulp-postcss'),\n deporder = require('gulp-deporder'),\n concat = require('gulp-concat'),\n stripdebug = require('gulp-strip-debug'),\n uglify = require('gulp-uglify'),\n browserSync = require('browser-sync').create(),\n log = require('fancy-log')\n;\n\n\/\/ For BrowserSync\nconst reload = (cb) => { browserSync.reload(); cb(); };<\/pre>\n\n\n\n#Image Processing<\/h2>\n\n\n\n
gulpfile.js<\/code>:<\/p>\n\n\n\n\/\/ image settings\nconst images = {\n src : dir.src + 'images\/**\/*',\n build : dir.build + 'images\/'\n};\n\/\/ image processing\ngulp.task('images', () => {\n return gulp.src(images.src)\n .pipe(newer(images.build))\n .pipe(imagemin())\n .pipe(gulp.dest(images.build));\n});<\/pre>\n\n\n\ngulp images<\/mark><\/code><\/p>\n\n\n\n# Sass Compilation<\/h2>\n\n\n\n
style.css<\/code> file. Add the following code to gulpfile.js<\/code><\/p>\n\n\n\n\/\/ CSS settings\nvar css = {\n src : dir.src + 'scss\/style.scss',\n watch : dir.src + 'scss\/**\/*',\n build : dir.build,\n sassOpts: {\n outputStyle : 'nested',\n imagePath : images.build,\n precision : 3,\n errLogToConsole : true\n },\n processors: [\n require('postcss-assets')({\n loadPaths: ['images\/'],\n basePath: dir.build,\n baseUrl: '\/wp-content\/themes\/wptheme\/'\n }),\n require('autoprefixer')({\n browsers: ['last 2 versions', '> 2%']\n }),\n require('css-mqpacker'),\n require('cssnano')\n ]\n};\n\/\/ CSS processing\ngulp.task('css', ['images'], () => {\n return gulp.src(css.src)\n .pipe(sass(css.sassOpts))\n .pipe(postcss(css.processors))\n .pipe(gulp.dest(css.build))\n .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());\n});<\/pre>\n\n\n\ngulp css<\/mark><\/code><\/p>\n\n\n\n# JavaScript Processing<\/h2>\n\n\n\n
gulpfile.js<\/code>:<\/p>\n\n\n\n\/\/ JavaScript settings\nconst js = {\n src : dir.src + 'js\/**\/*',\n build : dir.build + 'js\/',\n filename : 'scripts.js'\n};\n\/\/ JavaScript processing\ngulp.task('js', () => {\n\n return gulp.src(js.src)\n .pipe(deporder())\n .pipe(concat(js.filename))\n .pipe(stripdebug())\n .pipe(uglify())\n .pipe(gulp.dest(js.build))\n .pipe(browsersync ? browsersync.reload({ stream: true }) : gutil.noop());\n});<\/pre>\n\n\n\ngulp js<\/mark><\/code><\/p>\n\n\n\n# Run Everything<\/h2>\n\n\n\n
gulpfile.js<\/code>:<\/p>\n\n\n\n\/\/ run all tasks\ngulp.task('build', ['css', 'js']);<\/pre>\n\n\n\ngulp build<\/mark><\/code>\u00a0to run the\u00a0\u00a0js<\/code>,\u00a0css<\/code>\u00a0and\u00a0images<\/code>\u00a0tasks in parallel. (Note\u00a0images<\/code>\u00a0is a dependency of the\u00a0css<\/code>\u00a0task, as we set it up early, so we need not call it directly.)<\/p>\n\n\n\n# Enable File Watching And Browsersync<\/h2>\n\n\n\n
\n
browsersync<\/code>\u00a0task in\u00a0gulpfile.js<\/code>. <\/p>\n\n\n\nlocalhost<\/code>\u00a0(Change this domain or use an IP address as necessary):<\/p>\n\n\n\n\/\/ Browsersync options\nconst syncOpts = {\n proxy : 'localhost',\n files : dir.build + '**\/*',\n open : false,\n notify : false,\n ghostMode : false,\n ui: {\n port: 8001\n }\n};\n\/\/ browser-sync\ngulp.task('browsersync', () => {\n if (browsersync === false) {\n browsersync = require('browser-sync').create();\n browsersync.init(syncOpts);\n }\n});<\/pre>\n\n\n\nwatch<\/code>\u00a0The task to run Browsersync, watch for file changes, and run the appropriate task:<\/p>\n\n\n\n\/\/ watch for file changes\ngulp.task('watch', ['browsersync'], () => {\n\n \/\/ image changes\n gulp.watch(images.src, ['images']);\n\n \/\/ CSS changes\n gulp.watch(css.watch, ['css']);\n\n \/\/ JavaScript main changes\n gulp.watch(js.src, ['js']);\n});<\/pre>\n\n\n\ndefault<\/code>\u00a0Gulp task, which runs an initial build and starts the\u00a0watch<\/code>\u00a0task:<\/p>\n\n\n\n\/\/ default task\ngulp.task('default', ['build', 'watch']);<\/pre>\n\n\n\ngulp<\/code> from the command line. The console will display output which includes lines similar to:<\/p>\n\n\n\n[BS] Proxying: http:\/\/localhost\n[BS] Access URLs:\n -------------------------------------\n Local: http:\/\/localhost:3000\n External: http:\/\/192.168.15.194\/:3000\n -------------------------------------\n UI: http:\/\/localhost:8001\n UI External: http:\/\/192.168.15.194\/:8001\n -------------------------------------\n[BS] Watching files...<\/pre>\n\n\n\n
Let\u2019s write some Sass<\/h2>\n\n\n\n
Prerequisites in Sass<\/h2>\n\n\n\n
\n
What exactly is Sass?<\/h2>\n\n\n\n
What additions does SASS bring to CSS?<\/h2>\n\n\n\n
\n
Variables in Sass<\/mark><\/h3>\n\n\n\n
\/\/ CSS\nbody {\n background: #ccc;\n color: #333;\n}\n\n\/\/ SCSS\n\n$backgroud-color:#ccc;\n$primary-color: #333;\n \nbody {\n background: $backgroud-color;\n color: $primary-color;\n}\n<\/pre>\n\n\n\n$background-color<\/code> and $primary-color<\/code> Once and reuse them everywhere. <\/p>\n\n\n\nNested rules in Sass<\/h3>\n\n\n\n
\/\/ CSS\n\nnav ul {\n margin: 0;\n padding: 0;\n list-style: none;\n}\nnav li {\n display: inline-block;\n}\nnav a {\n display: block;\n padding: 6px 12px;\n text-decoration: none;\n}\n\n\/\/ SCSS\n\nnav {\n ul {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n \n li { display: inline-block; }\n \n a {\n display: block;\n padding: 6px 12px;\n text-decoration: none;\n }\n}\n<\/pre>\n\n\n\nPartials in Sass<\/mark><\/h3>\n\n\n\n
@import<\/strong><\/code> or @use<\/strong><\/code> rules.<\/p>\n\n\n\nsass\/\n|\n|\u2013 abstracts\/\n| |\u2013 _variables.scss # Sass Variables\n| |\u2013 _functions.scss # Sass Functions\n| |\u2013 _mixins.scss # Sass Mixins\n| |\u2013 _placeholders.scss # Sass Placeholders\n|\n|\u2013 base\/\n| |\u2013 _reset.scss # Reset\/normalize\n| |\u2013 _typography.scss # Typography rules\n| \u2026 # Etc.\n|\n|\u2013 components\/\n| |\u2013 _buttons.scss # Buttons\n| |\u2013 _carousel.scss # Carousel\n| |\u2013 _cover.scss # Cover\n| |\u2013 _dropdown.scss # Dropdown\n| \u2026 # Etc.\n|\n|\u2013 layout\/\n| |\u2013 _navigation.scss # Navigation\n| |\u2013 _grid.scss # Grid system\n| |\u2013 _header.scss # Header\n| |\u2013 _footer.scss # Footer\n| |\u2013 _sidebar.scss # Sidebar\n| |\u2013 _forms.scss # Forms\n| \u2026 # Etc.\n|\n|\u2013 pages\/\n| |\u2013 _home.scss # Home specific styles\n| |\u2013 _contact.scss # Contact specific styles\n| \u2026 # Etc.\n|\n|\u2013 themes\/\n| |\u2013 _theme.scss # Default theme\n| |\u2013 _admin.scss # Admin theme\n| \u2026 # Etc.\n|\n`\u2013 main.scss # Main Sass file\n<\/pre>\n\n\n\n
Modules in Sass<\/mark><\/h3>\n\n\n\n
\/\/Sass\n\n\/\/ _base.scss\n$background-color: #ddd;\n$primary-color: #333;\n \nbody {\n background: $background-color;\n color: $primary-color;\n}\n \n\/\/ styles.scss\n@use 'base';\n \n.inverse {\n background-color: base.$primary-color;\n color: white;\n}\n \n \n\/\/ CSS\nbody {\n font: 100% Helvetica, sans-serif;\n color: #333;\n}\n \n.inverse {\n background-color: #333;\n color: white;\n}\n<\/pre>\n\n\n\nMixins in Sass<\/mark><\/h3>\n\n\n\n
\/\/ Sass\n@mixin transform($property) {\n -webkit-transform: $property;\n -ms-transform: $property;\n transform: $property;\n}\n.box { @include transform(rotate(30deg)); }\n \n\/\/ CSS \n.box {\n -webkit-transform: rotate(30deg);\n -ms-transform: rotate(30deg);\n transform: rotate(30deg);\n}\n<\/pre>\n\n\n\n@mixin<\/code> directive and give it a name, such as transform<\/code>. <\/p>\n\n\n\n$property<\/code>, allowing the mixin to handle transforms or any other input flexibly.<\/p>\n\n\n\nExtends\/Inheritance in Sass<\/mark><\/h3>\n\n\n\n
Operators in Sass<\/h3>\n\n\n\n
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, and %<\/code>. This makes tasks like calculating widths for elements such as aside and article simple and efficient.<\/p>\n\n\n\n\/\/ SCSS SYNTAX\n.container {\n width: 100%;\n}\n \narticle[role=\"main\"] {\n float: left;\n width: 600px \/ 960px * 100%;\n}\n \naside[role=\"complementary\"] {\n float: right;\n width: 300px \/ 960px * 100%;\n}\n \n\/\/ CSS OUTPUT\n.container {\n width: 100%;\n}\n \narticle[role=\"main\"] {\n float: left;\n width: 62.5%;\n}\n \naside[role=\"complementary\"] {\n float: right;\n width: 31.25%;\n}\n<\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n