Question

我在_sassify下载的Underscore主题中一直在寻找如何使用SCSS的几个小时。

当我打开文件夹并看到style.css和带有scss文件的文件夹时，主题使用css但我想要更改并使用scss文件。我不明白如何使用它。

使用scss的过程是什么？有人可以帮我弄这个吗？

谢谢

Answer 1

您必须使用preprocessor将scss编译为css。主题使用css，这不会改变。你在scss中进行了更改 - 然后scss编译为css。预处理器可以是IDE的一部分，您可以使用Koala，Scout，Prepros等程序，也可以使用sass命令行。

你应该从这里开始阅读： http://sass-lang.com

尝试在http://sass-lang.com/guide的帮助下编译测试目录中的第一个.scss文件：

sass input.scss output.css

然后开始调整_s。

Answer 2

我花了几天的时间来将Underscore Theme中的样式从scss文件更改为css文件。早先我与Gulp合作，所以我想创建一个可以工作的gulpfile。我用Gulp创建了普通文件，起初没有用-在cmd中可以用，但是在Wordpress上没有任何变化。但是添加插件WP-SCSS后，它终于可以工作了！因此，非常感谢乔纳森（Jonathan）的回答，并帮助我找到了this plugin。也许会对别人有帮助，所以下面我从gulpfile中添加代码。

// gulpfile.js
var 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 style
exports.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 watch
exports.watch = watch

Answer 3

我不确定Underscore主题，但我过去曾使用过this plugin而且我非常喜欢它。它允许您将SCSS与任何主题一起使用，并自动为您编译文件。

Answer 4

您需要按照此页面https://github.com/Automattic/_s

中的步骤进行操作

设置

要开始使用_s随附的所有工具，您需要安装必要的Node.js和Composer依赖项：

$ composer install
$ npm install

可用的CLI命令 _s附带了专为WordPress主题开发量身定制的CLI命令：

composer lint：wpcs：对照PHP编码标准检查所有PHP文件。
composer lint：php：检查所有PHP文件是否存在语法错误。
composer make-pot：在language /目录中生成一个.pot文件。
npm run compile：css：将SASS文件编译为CSS。
npm run compile：rtl：生成RTL样式表。
npm run watch：监视所有SASS文件，并在更改时将它们重新编译为css。
npm run lint：scss：对照CSS编码标准检查所有SASS文件。
npm run lint：js：对照JavaScript编码标准检查所有JavaScript文件。
npm run bundle：生成用于分发的.zip存档，不包括开发文件和系统文件。

我如何使用scss与Underscore主题

4 个答案: