Menu
There are many different ways to compile SCSS, one of the two syntaxes supported by SASS. In this post we will explore the utilization of the node-sass npm package. We'll also look at how we can use the clean-css npm package to minify and optimize the generated output after compiling SCSS into CSS. Both of these techniques are similiar to how Bootstrap handles the compilation and minification of its SCSS files. Please make sure you have Node.js and npm installed first.
./.scss: This is a more extreme version of the. pattern that matches any file ending with.scss in the root folder and any child directories.!not-me.scss: The! Indicates that Gulp should exclude the pattern from its matches, which is useful if you had to exclude a file from a matched pattern. Browsers don't interpret it themselves, however, so SCSS files need to be converted into normal CSS before use. Using in a theme. Moodle includes a built in SCSS compiler so to use SCSS in your theme, you only need to set the theme scss variable, in your theme's config.php file, to point to the main scss file for your theme. How to compile scss to css with node-sass. Ask Question Asked 4 years, 8 months ago. Active 4 months ago. Viewed 22k times 7. I have a master.scss with many imports from other.scss files. If I change a.scss file master.css is generated automatically. I use only the NPM, no Gulp or Grunt! $ scss -help Usage: scss OPTION. INFILE OUTFILE Compile INFILE or standard input, to OUTFILE or standard output. Options: -version show program's version number and exit -h, -help show this help message and exit -c, -cache Create and use cache file. Sass -watch style.scss:style.css When ever it notices a change in the.scss file it will update your.css. This only works when your.scss is on your local machine. Try copying the code to a file and running it locally.
SCSS
First an SCSS file is needed, and it can be placed in root of the project folder. To illustrate the preprocessing of our SCSS file into CSS let's add some style rules that are intentionally utilizing the enhanced SCSS sytnax. We'll look to the Sass Basics guide for some code snippets.
Now that we have an SCSS file to process, the next step involves configuring the package.json install the necessary dependencies and provide a way to compile SCSS with Node.js by adding custom scripts.
package.json
Using the scripts section of an npm package.json file we can execute a series of commands to carry out the compilation of SCSS and optimize the resulting CSS output. A package.json file is required, and can be created running the command npm init in the project folder and following the prompts, or copying below.
Next we'll need to add two packages into the devDependencies of out project. To do so run the following command npm install node-sass clean-css-cli --save-dev. What will occur is that the node-sass and clean-css npm packages will be installed to the devDependecies of the project. You should also see a node modules folder appear in the root of the project, and there should also be a package-lock.json file that was created.
Your package.json file should look like this:
If for some reason your file looks different, you can copy the above and run the command npm install. This will reinstall both packages.
Compile Sass to CSS using node-sass
With the dependencies available we can add a script to compile the SCSS file created earlier with the node-sass npm package.
Unfortunately, multi-line npm scripts are not supported so the script is quite long, and there are quite a few parameters passed. Luckily the node-sass command line documentation can provided detailed info on all of the possible parameters that are supported.
Airradar 5 2 1 download free. In this case parameters are used to indicate source maps should be generated (for debugging purposes), the amount of decimal precision is capped at 6, and the scss source file to process is styles.scss, which will be processed and output to a file named styles.css in a new folder named dist, located in the root of the project. The name of the dist folder can be changed if needed, and it will be created when the script runs if it does not already exist.
At this point we can run the compile styles by running the command npm run compile-styles. However, this is only running node-sass and isn't minifying the css output, so we need to add another script to carry out the css optimization.
Minify CSS with clean-css
Like the node-sass package, we installed the clean-css package in the first step. To utilize it we'll add an additional script to the package.json file.
Similiar to the compile-stylesscript, the css-minify script is also quite long with many parameters. More info on all the parameters can be found at the clean-css-cli GitHub repo. The parameters being passed in here indicate to run clean-css with a certain level of optimization, line break formatting, and to include source maps with the optimized output. The file to optimize is the styles.css file located in the dist folder that was generated by the compile-styles command, and the optimized output will be written to styles.min.css in the same folder.
Now that all the required scripts have been added to the package.json file we can first running the command npm run compile-styles followed by the command npm run css-minify. Then looking in the dist folder that was created there should be four files:
- styles.css
- styles.css.map
- styles.min.css
- styles.min.css.map
The two files we are most interested in are styles.css and styles.min.css. These are the browser compatible style sheets that can now be linked in any HTML file.
CSS
To make sure everything worked correctly your styles.css file should look like this:
You can also verify the styles.min.css file because it should have identical content with all of the whitespace removed. Also take note that a comment is included at the bottom for the source map file. This can be left as is and allows for seeing the style rules in the original SCSS file from the browser's dev tools.
run npm scripts sequentially
With the output being generated correctly, there is one additional step we can do to simplify the SCSS processing into one command. Looking back to the scripts section of the package.json file, let's add one more script to combine the other two.
Now by running the command npm run process-styles, the compile-styles and css-minify scripts will run in series, and it is no longer necessary to execute both scripts seperately. The process-styles script is repsonsible for both compiling the SCSS into css output and minifying it for optimal use.
Leave a Reply
Jump to: navigation, search
Moodle 3.2
- 2Using in a theme
- 2.2Advance usage
Scss Compiler For Windows
Overview
SCSS or SASS Sass (Syntactically Awesome Stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. It's an advanced way of writing CSS that we use in some themes within Moodle.
Browsers don't interpret it themselves, however, so SCSS files need to be converted into normal CSS before use.
Using in a theme
Moodle includes a built in SCSS compiler so to use SCSS in your theme, you only need to set the theme scss variable, in your theme's config.php file, to point to the main scss file for your theme:
Moodle will look for a file named 'main.scss' in the 'theme/themename/scss' folder and compile it. If you don't see the affect of your changes right away, try purging the caches or enabling theme designer mode.
Scss Compiler Visual Studio
Inheriting from a parent
Even if your theme is inheriting from a parent, the SCSS file itself will not inherit from anything, this is something you should do manually. For instance, if you want your SCSS file to include all of the SCSS code provided by theme_boost, usually to change the variables, you need to manually import the file like this:
The path needs to be relative and not absolute. You would use it like this:
Advance usage
On-the-fly injections
The following settings allow themers to point to a function which will either prepend, or append, SCSS code to content gotten from $THEME->scss.
The functions will receive the theme config as first argument.
![Scss Scss](https://img.litmuscdn.com/images/next/team/david-smalley.jpg?1502150875)
Dynamic $THEME->scss
Rather than giving the name of your SCSS file in $THEME->scss, you can make it a function which returns the SCSS content.
Example
Moodle's Boost theme has rules written using SCSS.
See also
- Using 'sassc' binary sass compiler as an alternative to Moodle PHP sass compiler. MDL-61394 ($CFG->pathtosassc)
Retrieved from 'https://docs.moodle.org/dev/index.php?title=SCSS&oldid=57641'