Join Morten Rand-Hendriksen for an in-depth discussion in this video Setting up Sass tasks, part of WordPress: Developing with Sass and Grunt.js.
- In the previous movie we created the framework…for the Grunt file and we also created this watch task.…Now we need to create the Sass task that will take…all of these SCSS files that are in the _sass theme…and convert them into a singular style.css file…that WordPress can use.…Now before we create the task,…let's just take a quick look at what the SCSS files…look like inside our new theme.…Let's scroll down here, you'll see the Sass folder.…If I open the Sass folder,…you can see as I've told you before,…that the Sass folder contains a bunch of what's…known as partials, which are individual small files…with a small bit of Sass inside.…
If we look at style.scss,…we can quickly see this is meant to be…the initial style file.…Here at the top we have the commented out section…that's required for WordPress to recognize this…as a theme.…And all the license information.…Then we have a table of contents…for all the different components.…And then we have a long list of these at import calls…that call different folders and different files…
Author
Released
4/28/2015Note: This course doesn't teach Sass itself. To learn more about the language, watch CSS with LESS and Sass.
- Setting up your development environment
- Installing Node.js, Ruby, Grunt, and Sass
- Setting up Grunt and Sass on Mac and Windows
- Adding support to Grunt, Sass, Watch, and Autoprefixer in WordPress
- Building custom themes with _s and Sass
Skill Level Intermediate
Duration
Views
Related Courses
-
Responsive CSS with Sass and Compass
with Ray Villalobos3h 22m Intermediate -
CSS Flexbox First Look
with James Williamson2h 3m Beginner -
CSS with LESS and Sass
with Joe Marini1h 57m Intermediate
-
Introduction
-
Welcome1m 12s
-
Who is this course for?2m 2s
-
-
1. Preparatory Steps
-
Using Grunt as a task runner1m 56s
-
2. Setting Up Grunt and Sass on Windows
-
Installing Grunt and Sass1m 20s
-
Installing Node.js2m 16s
-
Installing Ruby2m 49s
-
Starting and stopping Grunt1m 39s
-
-
3. Setting Up Grunt and Sass on Mac
-
Starting and stopping Grunt1m 25s
-
4. Building Themes from Scratch with _s and Sass
-
Preparatory setup2m 8s
-
Getting Sass version of _s4m 38s
-
Creating a .gitignore file4m 33s
-
Creating a package file3m 54s
-
Setting up Sass tasks5m 39s
-
Testing the setup3m 55s
-
Wiring up the theme for Sass5m 26s
-
-
Going further
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Setting up Sass tasks