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.