You’ll add new modules as needed based on the design. The modules directory will ultimately contain the majority of the code in your project. _typography.scss – global typography classes.
#Prepros scss skin#
_skin.scss – global skin styles like gradients, colors and box-shadows. _layout.scss – global layout styles like margin, padding or floats. _base.scss – global defaults for base level tags like or. _utilities.scss – global placeholders, extends, mixins, functions and utility classes. _settings.scss – global variables and maps. The global directory is where we will keep all of the utility code that will be used across the entire project. _library-variable-overrides.scss – override any third party library variables in this file. Add libraries like Bootstrap, Foundation or Bourbon here. The libs directory will house all third-party library code. We’ll break our styles up into partial files, and then use to bring all of the partial files into the main application.scss file. We can use this technique to create an organizational structure for our project. So, application.scss will get a matching application.css file, but _my-partial-file.scss will not. However, if we prefix our file names with an underscore, Sass will not create a matching CSS file. When Sass compiles, it will create a matching CSS file for any file with a. 
We’ve got a pretty good build process set up, but instead of having one giant Sass file, lets look at how we can better organize our code using Sass partials.
gulp-phantomcss – CSS regression testing.gulp-sass-lint – jshint style linting for Sass.Some Additional Gulp TasksĪ few other Gulp tasks that you might consider adding into your build process are: Breaking down the gulpfile.js is outside of the scope of this post, but if you’d like a good tutorial, check out Todd Gandee’s Journey into Gulp post. When there is a change in our Sass file, the styles task will:įinally, the reload task will reload our browser.įor a look at exactly how this is set up, check out the project’s gulpfile.js.
0 kommentar(er)
