I'm using usemin when building with grunt, and I use the following tasks on css: sass, concat, cssmin.
Is it possible to have a map file in the end in order to debug the code after it's built?
Thanks.
All these tasks support a map (usually through a sourceMap option), but it only maps their own output to their own input, so you would end up with at least 3 maps (if you manage to avoid naming conflicts):
one from minified css to concatenated css
one from concatenated css to separate css files
one from each css file to the original sass files
I understand you're looking for 1 map from the minified css to the original sass files, correct? Unfortunately, afaik there is no support for that in the tools.
Related
My team hates a convention that we need to use. We need to export all css in alphabetical order, but we can work in our SCSS and we don't need to share it, so what its matters is css being orderded.
There is a way in gulp (we work with gulp-sass) to reorder when css is processed?
Note: I think alphabetical order is horrible even to readibility, its better to group by type (eg: box-model properties, text properties, ...)
You need
gulp-csscomb
Probably with this option after you have your css:
.pipe(csscomb({"sort-order-fallback": "abc"}))
See sort-order configuration for csscomb
I am using SASS on my Symfony2 and I read few articles about recommended architecture of sass.
base/ – contains global styles, such as resets, typography, colors,
etc.
components/ – contains each self-contained component in its own .scss
partial
layout/ – contains styling for larger layout components; e.g. nav,
header, footer, etc.
pages/ – contains page-specific styling, if necessary
themes/ – contains styling for different themes
utils/ – contains global mixins, functions, helper selectors, etc.
vendors/ – contains 3rd-party styles, mixins, etc.
main.scss – output file that brings together all of the above parts
In examples they are loading all of files at the same time, but I am concerned that I should separate different page styles and their loading.
I wanted to ask if loading all of .scss files at once doesn't slow the page? Why separation is not mentioned? Inheritance of variables? Why?
Separation of files makes for easier development - not having to search through hundreds or even thousands of lines of SCSS whenever you want to make a minor change is much better - but don't worry; it won't slow down your pages.
When SASS compiles it merges the SCSS files into one CSS file and often minifies it at the same time.
I am using sass to generate a source map which is output to a file. Then I generate a sourcemap for another CSS file using PostCSS. I am trying to concat both sourcemaps using applySourceMap in this sourcemap node module but it does work https://github.com/mozilla/source-map/blob/master/lib/source-map/source-map-generator.js
Does anyone know how to easily concat two source map files together?
I am creating a new CK Editor plugin, and want to split the javascript code to more than one .js file
Currently I do not see a way to load my second .js file.
My structure:
plugin.js --> this is the main file containing the plugin structure/code
manip.js --> contains text manipulation functions, that are called by the plugin (800+ lines)
Is this possible? What is your recommendation - put all code into plugin.js or would you also split code to two files?
Splitting your code makes sense only if it isn't required from the very beginning. E.g. CKEditor loads dialogs' code on demand and the same happens with paste from word filter. These files very often are big (>1k LOC) and it's not critical to load them at the beginning.
If you want to load your file on demand check this part of pastefromword plugin: https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/pastefromword/plugin.js#L95-L108
Here's the documentation: CKEDITOR.scriptLoader, CKEDITOR.getUrl.
I've created a project with compass+foundation
I have multiple .scss on my page and I want to use foundation mixins in all of them.
If I do the import settings, import foundation. It copies all the settings in each files, which is taking a lot of unnecessary space. I'm sure I'm doing something wrong here.
If you need to use Foundation's mixins in your own scss files you should indeed use the #import directive. However you shouldn't import the foundation.scss file.
Sass has a naming convention for files that are meant to be imported
(called “partials”): they begin with an underscore.
Only import the partials you need (I would be surprised that you need every single one).
For example I needed to use the "css-triangle" mixin from _foundation-global.scss in one of my files.
MyStyles.scss
#import "../foundation/foundation-global"; (no need for the leading underscore)
.myClass{
#include css-triangle(5px, #fff, top);
}
I'm sure you have read this, but I'll put the link just in case.