I've been looking for many hours at how to use SCSS in the Underscore theme that I downloaded with _sassify.
When I open the folder and I see the style.css and the folder with scss files, the theme use css but I want change and use the scss file.
I don't understand how to use it.
What is the process to use scss? Can someone help me with this?
Thanks
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.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
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.
I'm not sure about the Underscore theme specifically, but I have used this plugin in the past and I really like it. It lets you use SCSS with any theme and automatically compiles the files for you.
Related
I'm currently discovering modules with npm, and I went to use bootstrap-sass. Now that the modules were downloaded, I was looking for a solution to compile scss into the static folder of the application, and also the js bootstrap files.
But according to npmjs documentation of the modules, I can't found a simple solution which is not to move the js files myself and compile the scss bootstrap files from node_modules with something like node-sass.
What is the simplest way to use this module correctly and with the possibility to custom ?
Edit :
For now, I am using the following scripts/files :
"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"
app.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
main.js
global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');
I've never used bootstrap-sass before, but the documentation implies that a build tool to preprocess the SCSS is a prerequisite for using this module. While it's no longer the shiniest tool in the shed, Gulp is very capable of handling this task as well as moving the files from node_modules to your project root directory for you.
Here's a breakdown of one approach to implement this:
Create three subfolders in your project root directory and call them sass, css and javascript.
Create a file in the sass folder and call it app.scss. Open it and paste this: #import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';. When the file is converted into CSS, all of the Bootstrap modules will be there. Beneath the #import statement on line 1, feel free to write whatever style rules you want.
Assuming you have already run npm init and have a package.json file in your project directory, run npm install gulp -D in your terminal. This installs gulp (my task runner of choice!).
Run npm install gulp-sass --save-dev. This installs the gulp plugin that will preprocess the Bootstrap SASS into CSS.
Create a file in your root directory (not in any of the subfolders) called gulpfile.js
Copy and paste this text into gulpfile.js:
(note: for this to work, your SASS and CSS folders must be called sass and css, respectively, unless you change their names in the following code.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Lastly, run the command gulp in your terminal to execute the gulpfile, which will do two things:
Preprocess and move all of the SASS into your css folder.
Copy bootstrap.min.js from node_modules into your project's javascript folder.
Of course, don't forget to link to these assets in your HTML.
I whipped up this gulpfile on the fly and it works on my machine, but if you decide to try this approach then feel free to ask if something throws an error. Best of luck on your project.
I installed Bootstrap CSS with SASS from the following repo:
https://github.com/twbs/bootstrap-sass
I ran the command "bower install bootstrap-sass" on the command line and this successfully installed the folder bower_components on my project folder. (Incidentally - I have nothing else present yet, I want to learn to bootstrap the CSS compiling first).
OK, here's what I want to accomplish:
I want to be able to add .scss files to the folder I create called resources/assets/sass/
I want to provision/manage so that .scss files I add to this directory are in turn compiled to public/build/css/that_file_name.css
More practically, I would like to compile all of the .scss files into one large .css file.
My question(s) are:
What does the compiling?
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
What does the compiling?
Compiling Sass files transforms stylesheets with Sass-specific syntax like selector nesting and mixins into normal CSS that can be parsed by browsers.
How do I instruct it to compile the .scss files in the folder above in the public/build/css/ folder?
Since you're already using Bower which is a Node.js package, I assume that you have no problem using the Node.js package node-sass instead of the original Ruby version.
First, install the package using npm i -D node-sass. Then, create a new script inside your project's package.json:
"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"
main.scss is now your entry point where you import Bootstrap and your other stylesheets.
// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
#import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
/* Your custom SCSS */
Finally, to actually run the compilation, execute npm run compile-sass in your terminal.
Must I configure new .scss files or can I set it so as to just add them to that sass folder?
Since you never tell node-sass to "compile everything inside this folder" and instead use an entry point file (main.js), when you want to include a new file you simply add an #import directive with a relative path to it.
Bonus, how do I tell it to minify the output file, or not (so I can experiment with both ways)?
To minify the resulting main.css file, I recommend csso. You can install its CLI package using npm i -D csso-cli and then add another script to your package.json:
"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"
You can then run that script using npm run minify-css. The minified file will be outputted as main.min.css.
For all the question asked, the answer can be found above. But if you are just looking to compile .scss file to .css using command line, use below,
sass source/stylesheets/index.scss build/stylesheets/index.css
Make sure you have "node JS/npm" and Sass compiler installed.
If not, use this to install Node.js and npm - https://www.npmjs.com/get-npm
And use this to install Sass - https://sass-lang.com/install
Enjoy ;)
How can I use preprocessors in my ng2 app? I'm using angular-cli and the original docs are not clear enough for me. Besides, I want to use the styles globally, not only component-wide.
Install your CSS compiler: Search npm for your preffered extension language.
Tested and recommended for SASS: npm install node-sass --save-dev
Add your "to be processed" file to src/assets/css (with the normal file extension, e.g. .sass)
Add the style ref to the index.html file:
<link rel="stylesheet" href="assets/css/whatever.css"> - note the .css file extension.
Update your build file (angular-cli-build.js) with the folder of your "to be processed" files. This object HAS to be placed before the vendorNpmFiles-array.:
sassCompiler: { //(lessCompiler or stylusCompiler)
includePaths: [
'app/assets/css' //Only the folder, not your file!
]
}
Bonus answer: Why don't I use direct paths to files instead of the includePath? Because you may want to use variable files, so it could get really messy with absolute paths!
The Angular CLI has built in support for Sass/SCSS, Less, and Stylus. See here.
As of the Webpack update to the CLI, there are no extra steps other than renaming your stylesheets with the appropriate extension.
For the previous System.js/Broccoli versions, it was also necessary to install the preprocessor packages to your app, like so: npm install node-sass --save-dev.
It will automatically process the stylesheets within and under the src folder.
i wanted to ask, how can i continue working on existing project, while having no experience on compass/sass used here?
I always use Grunt and Less, but now i have to face Compass and Sass.
Here, i created screenshot of files structure.
My problem is, how setup system to get this all work. For example i see this code in compass/scss/style.scss:
#import "compass";
#import "bootstrap";
#import "mixins";
#import "defaults";
#import "layouts/forms";
#import "layouts/header-footer";
#import "layouts/home";
For example, i see #import compass, but there is no directory like this, and i dont know how can i attach - install compass, to get this work.
And another question, with grunt all i needed, was gruntfile configured, then i just type "grunt observe", and all changes in less files was converted to one css file.
But here, i can't find starting point. I have installed Ruby, and i have tried various commands in command line, but nothing works.
For example, from compass page, i have tried :
$ cd /path/to/project
$ compass watch
But this does nothing, just show some info in command line, that compass is watching for changes...
So in general, how to continue this project without installed components to work with ?
For Using Sass and Compass,
You are required to Install Ruby, sass and compass,
Then move to the project folder path where the config.rb file lies,
Then run the compass watch here
you can see like the following on your terminal / bash / command prompt
>>> Compass is watching for changes. Press Ctrl-C to Stop.
After this If there is no css file created, You have to simply make some changes on one of the scss files or partial files(_filename) that you have imported to style.scss.
The link will guide you to proper installation and creating project folder setting up.
http://compass-style.org/install/
I have installed node.js/stylus/nib on my mac and I can manually compile .styl file to .css on the command line. I also know there is this stylus.middleware() things that keeps coming up when I search for how to setup auto-compiling when the .styl changes, however I have no idea how I am supposed to implement it (I have never used node.js before).
What file do I put that code in?
How do I start this code so it is always run?
I think I am missing a few things on the node side to be able to set this up.
From the command line you can use:
stylus -w folder/
or just for another example:
stylus -w styl/*.styl -o css/
It will watch for changes and compile all *.styl files that live under that folder.
If you installed stylus as a global package (npm install stylus -g) you have a stylus binary on your system.
$ stylus -h
Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help [<type>:]<prop> Opens help info at MDC for <prop> in
your default browser. Optionally
searches other resources of <type>:
safari opera w3c ms caniuse quirksmode
Options:
-i, --interactive Start interactive REPL
-u, --use <path> Utilize the stylus plugin at <path>
-U, --inline Utilize image inlining via data uri support
-w, --watch Watch file(s) for changes and re-compile
-o, --out <dir> Output to <dir> when passing files
-C, --css <src> [dest] Convert css input to stylus
-I, --include <path> Add <path> to lookup paths
-c, --compress Compress css output
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, --line-numbers Emits comments in the generated css
indicating the corresponding stylus line
--include-css Include regular css on #import
-V, --version Display the version of stylus
-h, --help Display help information
This briefly covers some Node basics.
0. Organizing code. It is a convention to put your main Node application code into a file called app.js in the project root.
Inside app.js things are grouped into two general parts:
synchronous initializations: require modules, build directories, read configs, db connections, etc. Things that block, so they must exist or die quickly.
asynchronous app tasks: start server, background processes, auto-compile CSS & JS, routing, i/o, etc. Things that are in the event loop.
1. Compile Stylus to CSS when you build the app. We need to require the stylus module. Usually this is done at the top of the app.js to keep dependencies together.
var stylus = require('stylus');
The first time that Node runs app.js, you need this JS module to build your CSS. This is the basic idea:
stylus.render(stylus-code-string, function(err, css) {
if (err) throw err;
console.log(css);
});
Here is the official Stylus Javascript API.
To use the power of Node, you should read a stylus file using fs module into a buffer, then convert it to a string, and finally pass it into stylus.render(). Then, send the result into a destination file. Since this is part of the build process, it can be synchronous. But this is not really your question...
2. Auto-compile CSS with Stylus as a background process.
This function spawns a child_process that watches a single .styl file and compiles the included .styl files into a .css file. You do not need a module for this, only install the stylus executable so that it runs on the command line. (You have already done this). This example was made with stylus version 0.5.0. Also, the folder paths that you use (ex. build/styles and styles) need to exist.
function watchStyles(sourcefile, destinationfolder) {
var Stylus = child_process.spawn('stylus', ['--sourcemap', '-w', sourcefile, '--out', destinationfolder]);
Stylus.stdout.pipe(process.stdout); // notifications: watching, compiled, generated.
Stylus.stderr.pipe(process.stdout); // warnings: ParseError.
Stylus.on('error', function(err) {
console.log("Stylus process("+Stylus.pid+") error: "+err);
console.log(err);
});
// Report unclean exit.
Stylus.on('close', function (code) {
if (code !== 0) {
console.log("Stylus process("+Stylus.pid+") exited with code " + code);
}
});
}
Next, you need to call this function sometime after you start your app. Pass in your master .styl file as the source. Then the destination directory where you want your CSS to go.
// check that you passed '-w' parameter
if (process.argv[2] && (process.argv[2] == "-w")) {
watchStyles('styles/app.styl', 'build/styles');
}
Start the app by running:
$ node app.js -w
It helps to organize your .styl files under one app.styl so that the contents of your app.styl looks like this:
#import 'layout'
#import 'header'
#import 'main'
#import 'footer'
#import 'modal'
#import 'overrides'
** I end up here yesterday and didn't find the right answer. So this follow up is for anyone else who follows the same path as me... **
I had a problem setting stylus command line up too. I kept trying to install stylus globally
$ npm install -g stylus
and would get errors. I had it working in one project with grunt-contrib-stylus but via command line I wasn't getting anything to work.
Even $stylus --version didn't return anything. I tried to update npm and it broke npm, so I ended up reinstalling node to reinstall npm. Then I was able to do a fresh install of $ sudo npm install -g stylus and could get the --version.
I also had to reinstall grunt and everything else I had installed globally via npm...
First, install stylus locally npm install stylus --save-dev if you haven't.
Create a startup script that builds your stylesheet and rebuilds whenever change detected in your main stylus file:
startup.js
var fs = require('fs')
var stylus = require('stylus')
// Define input filename and output filename
var styleInput = __dirname + '/dev/stylus/main.styl'
var styleOutputFilename = 'main.css'
var styleOutput = __dirname + '/static/' + styleOutputFilename
var stylusPaths = [__dirname + '/dev/stylus', __dirname + '/dev/stylus/libs']
// Build stylesheet on first execute
buildStyles(styleInput, styleOutput, stylusPaths)
// Watch stylus file for changes.
fs.watch(styleInput, function(eventType, filename) {
if (filename) {
buildStyles(styleInput, styleOutput, stylusPaths)
} else {
console.log('no filename found. probably platform doesnt support it.');
}
});
function buildStyles(input, output, paths) {
stylus(fs.readFileSync(input, 'utf-8'))
.set('paths', paths)
.set('include css', true)
.set('watch', true)
.render(function(err, css) {
if (err) throw err;
fs.writeFile(output, css, (err) => {
if (err) throw err;
console.log('👍 Stylesheet built successfully.');
});
});
}
Type node startup.js in the terminal. You will see a message "Stylesheet built successfully." whenever you change your main stylus file.
There is good documentation about stylus javascript api in their website.
OK I edited my answer because you do not want to make a homepage and then connect-assets makes no sense and can not help you... but maybe this,...
http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language
on that site you find at the bottom a video which shows close to the end how to use stylus via command line...
HTH and sorry for the misunderstanding...