How i can use scss with Underscore theme How i can use scss with Underscore theme wordpress wordpress

How i can use scss with Underscore theme


You have to use a preprocessor to compile scss to css. The theme uses css, this will not change. You do your changes in scss - then scss compiles to css. A preprocessor can be part of your IDE, you can use programs like Koala, Scout, Prepros or you use the sass command line.

You should start reading here:http://sass-lang.com

Try compiling your first .scss files in a test directory with help of http://sass-lang.com/guide:

sass input.scss output.css

Then start tweaking _s.


I spent a few days how to change styles in Underscore Theme with scss files to css file. Earlier I worked with Gulp so I wanted to create gulpfile that will work. I created normal file with Gulp which at first didn't work - it worked in cmd, but on Wordpress nothing changed. But after adding a plugin WP-SCSS finally it works! So thanks a lot for your answer Jonathan and for helping me to find this plugin. Maybe it will help someone, so below I add the code from the gulpfile.

// gulpfile.jsvar gulp = require("gulp"),    sass = require("gulp-sass"),    postcss = require("gulp-postcss"),    autoprefixer = require("autoprefixer"),    cssnano = require("cssnano"),    sourcemaps = require("gulp-sourcemaps");function style() {    return (        gulp            .src(paths.source.src)            .pipe(sourcemaps.init())            .pipe(sass())            .on("error", sass.logError)            .pipe(postcss([autoprefixer(), cssnano()]))            .pipe(sourcemaps.write())            .pipe(gulp.dest(paths.source.dest))    );}// $ gulp styleexports.style = style;var paths = {    source: {        // By using styles/**/*.sass we're telling gulp to check all folders for any sass file        src: "sass/**/*.scss",        // Compiled files will end up in whichever folder it's found in (partials are not compiled)        dest: "."    }};function watch() {    gulp.watch("sass/**/*.scss", style);}    // $ gulp watchexports.watch = watch


You need to follow the steps from this page https://github.com/Automattic/_s

Setup

To start using all the tools that come with _s you need to install the necessary Node.js and Composer dependencies :

$ composer install$ npm install

Available CLI commands_s comes packed with CLI commands tailored for WordPress theme development :

  • composer lint:wpcs : checks all PHP files against PHP Coding Standards.
  • composer lint:php : checks all PHP files for syntax errors.
  • composer make-pot : generates a .pot file in the languages/ directory.
  • npm run compile:css : compiles SASS files to css.
  • npm run compile:rtl : generates an RTL stylesheet.
  • npm run watch : watches all SASS files and recompiles them to css when they change.
  • npm run lint:scss : checks all SASS files against CSS Coding Standards.
  • npm run lint:js : checks all JavaScript files against JavaScript Coding Standards.
  • npm run bundle : generates a .zip archive for distribution, excluding development and system files.