Was wondering if it is possible to lint my sass code on the fly with grunt-sass? Right now, I'm trying to remove ruby altogether from a project and it uses grunt-scss-lint for linting (which uses sass via ruby).
Thanks for any info/pointers.
sass-lint
All Node Sass linter!
A Node-only Sass linter for both sass and scss syntax!
https://www.npmjs.com/package/sass-lint
Note: I never used it. But seems to be what you are looking for.
Related
I am new to sass/scss and want to know how I can use sass file in my HTML project?
Do I have to first compile it into CSS with command line or anything else that compiles scss/sass runtime into css file at a time when webpage loads into browser?
So any help?
There are many options to create a Project working with SASS, but the most common is using Compass, I see you're new to it, I strongly recommend you read a Tutorial about Compass, after understanding this you should look others options to use the same SASS like working with gulp, gulp-sass, node-sass, browser-sync, and many other options to use the same Tool.
I'm trying to make a jekyll blog using foundation and sass, and I just can't seem to get the foundation sass to compile correctly. When I build jekyll, there are no errors, and the partial I wrote seems to load correctly, and foundation seems to import, but only the comments at the top.
My process so far was basically to run
npm install foundation-sites --save
move the foundation sass stuff out of the node_modules folder, and then include foundation in my scss file.
You can see the directory and the css file that is output in the following screenshots.
I'm kind of not sure what else I can try at this point any help would be appreciated! Thanks!
Edit: Here is a link to the branch and repo for this to see the code. https://github.com/samuraiseoul/kimchiChingu/tree/23-sass
Hmm.. it seems like all the partials imported in foundation.scss are just sass functions, mixins and variables. So there's no actual css output.
Alright so I figured it out. The problem is that I had to either include the foundation-everything mixin in my sass file or the specific modules I wanted.
just using #import 'foundation'; wasn't good enough, I had to also put #include foundation-everything; or list each component I wanted in case I didn't want everything.
I had similar issue even after adding
#include foundation-everything($flex: false);
I figured it out after updating my gulp-sass module.
We use Jenkins as our CI build server and every time a build is kicked off, compass clean is executed followed by compass compile. We do compass clean first as we have occasionally had Compass-related issues when we didn't do this beforehand. And I would like to NOT rely on running compass watch in the background for my Jenkins builds.
The issue is that as we add more and more SASS files, the build is taking longer and longer. I know LibSass is something I can look more into but that's not an option for me right now. I would like to be able to run compass clean > compass compile ONLY IF there is at least 1 SASS file that has not yet been processed by Compass.
Do you know if there is a way to accomplish this? The only thing I can think of doing is to do a timestamp comparison of Compass-processed CSS Vs. SASS files and determine if compass compile is necessary. However, I would like to think that there's a more elegant way of solving this problem.
If you're not using compass that much, why not search your code for the compass mixins you are using, and then cherry-picking those sass mixins from Compass's source code to reduce your compile time?
It was an interesting exercise for my own project--how much am I really using compass? Do I even need it? In my own project, we dropped support for IE9, so we didn't need compass to generate fallback SVG for background gradients for elements with rounded corners. And at that point, I asked myself, "Do I really need the full compass library to give me a mixin for corner radius?" The answer is no ...or maybe a partial yes--for those mixins I still really liked, I was able to browse their source code and grab just the functions and mixins I needed. If the mixins you're using aren't all that complicated, removing the dependency on compass completely will prove advantageous. The process to de-compassify your project with the aim to speed your compile time are these three steps.
1. Identify usages of compass in your source code.
I came up with comically large regex searches to find usages of compass-dependant syntax in my code. I used Sublime Text's flavor of regex, so these searches are unlikely to work in VS Code or other IDEs.
Regex to search for compass mixins that accept parameters:
\#include\s(adjust\-(font\-size\-to|leading\-to)|align\-(content|items|self)|alternating\-rows\-and\-columns|appearance|apply\-(origin|side\-rhythm\-border)|backface\-visibility|bang\-hack|baseline\-grid\-background|border\-bottom\-(left\-radius|radius|right\-radius)|border\-corner\-radius|border\-image|border\-left\-radius|border\-radius|border\-right\-radius|border\-top\-left\-radius|border\-top\-radius|border\-top\-right\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|sizing)|break\-(after|before|inside)|color\-interpolation\-filters|column\-(break\-?(before|after|inside)|count|fill|gap|grid\-background|rule|rule\-(color|style|width)|span|span|width)|columns|content|contrasted|create\-transform|debug\-vertical\-alignment|delimited\-list|display\-flex|each\-gradient\-prefix|ellipsis|establish\-baseline|filter|filter\-gradient|filter\-margin|filter\-margin\-bottom|filter\-margin\-left|filter\-margin\-right|filter\-margin\-top|flex|flex\-(basis|direction|flow|grow|shrink|wrap)|flexbox|float|flow\-(from|into)|font\-face|for\-legacy\-browse(r|rs)|grid\-background|h\-borders|has\-layout|hide\-text|horizontal\-borders|horizontal\-list|horizontal\-list\-item|hyphens|image\-property|inline\-bloc(k|k\-)(list|list\-item)|inner\-table\-borders|justify\-content|keyframes|leader|leading\-border|link\-colors|list\-style|list\-style\-image|margin\-leader|margin\-trailer|min\-(height|width)|opacity|order|outer\-table\-borders|padding\-leader|padding\-trailer|perspective|perspective\-origin|prefix\-prop|prefixed\-properties|pretty\-bullets|print\-utilities|replace\-text|replace\-text\-with\-dimensions|reset\-(baseline|display|display|float)|rhythm|rhythm\-(borders|margins|padding)|rotate|rotate(3d|X|Y|Z)|scale|scale(3d|X|Y|Z)|selection|simple\-transform|single\-box\-shadow|single\-text\-shadow|single\-transition|skew|skew(X|Y)|sprite|sprite\-(background|background\-position|background\-rectangle|column|dimensions|img|position|replace\-text|replace\-text\-with\-dimensions|row)|sprites|sticky\-footer|stretch(|\-x|\-y)|tag\-cloud|trailer|transform|transform\-origin|transform\-style|transform2d|transform3d|translate(|3d|X|Y|Z|)|underscore\-hack|user\-select|with\-browser\-ranges|with\-each\-prefix|with\-prefix|word\-break)\(
Regex search for compass mixins without parameters
\#include\s(animation\-?(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-?(clip|image|origin|size|with\-css2\-fallback)|box\-shadow|clearfix|comma\-delimited\-list|display\-box|float\-left|float\-right|force\-wrap|global\-reset|has\-layout\-block|has\-layout\-zoom|horizontal\-list\-container|hover\-link|hyphenation|inline\-block\-list\-container|inline\-list|input\-placeholder|legacy\-pie\-clearfix|nested\-reset|nested\-reset|no\-bullet|no\-bullets|nowrap|opaque|pie\-clearfix|reset\-(body|box\-model|box\-model|focus|focus|font|font|html5|html5|image\-anchor\-border|image\-anchor\-border|list\-style|list\-style|quotation|quotation|table|table|table\-cell|table\-cell)|squish\-text|table\-scaffolding|text\-shadow|trailing\-border|transition|transition\-(delay|duration|property|timing\-function)|transparent|unstyled\-link|with\-browser\-support\-debugging)
Regex Search for Compass functions:
\s(brightness|browser\-out\-of\-scope|build\-grid\-background|comma\-list|contrast\-color|default\-box\-shadow|display\-browser\-range|get\-baseline\-gradient|get\-column\-fluid\-grid|get\-column\-gradient|has\-browser\-subset|intersect\-browser\-ranges|is\-time|linear\-gradient|lines\-for\-font\-size|prefix\-identifier|prefixed\-for\-transition|prefixes\-for\-capability|rhythm|set\-arglist\-default|support\-legacy\-browser|transition\-map|use\-prefix)\(
RegEx to Search for Compass Variables
Leaving these in your source code would be harmless as they don't rely on a call to compass.
\$(animation\-support\-threshold|background\-(clip\-support\-threshold|origin\-threshold|size\-threshold)|base\-(font\-size|half\-leader|leader|line\-height)|border\-image\-support\-threshold|border\-radius\-threshold|box\-shadow\-support\-threshold|box\-sizing\-support\-threshold|browser\-minimum\-versions|browsers\-supporting\-old\-webkit\-gradients|browsers\-supporting\-svg\-but\-not\-gradients|compass\-extensions|contrasted\-(dark\-default|light\-default)|critical\-usage\-threshold|css\-sel2\-support\-threshold|current\-browser\-versions|current\-prefix|debug\-browser\-support|default\-(animation\-(delay|direction|duration|fill\-mode|iteration\-count|name|play\-state|timing\-function)|background\-(clip|origin|size)|border\-radius|box\-(align|direction|flex|flex\-group|lines|ordinal\-group|orient|pack|shadow\-(blur|color|box|h\-offset|inset|spread|v\-offset)|\-sizing)|has\-layout\-approach|origin\-(x|y|z)|rhythm\-border\-(style|width)|rotate|scale\-(x|y|z)|skew\-(x|y)|text\-shadow\-(blur|color|h\-offset|shadspread|v\-offset)|transition\-(delay|duration|function|property)|translate\-(x|y|z)|vector\-(x|y|z))|disable\-magic\-sprite\-selectors|filter\-support\-threshold|flexbox\-support\-threshold|graceful\-usage\-threshold|gradient\-support\-threshold|grid-background\-(baseline\-(color|height)|column\-(color|width)|force\-fluid|gutter\-(color|width)|offset|total\-columns)|has\-layout\-support\-threshold|hide\-text\-direction|hyphens\-support\-threshold|ie6\-attribute\-hack\-support\-threshold|inline\-block\-alignment|inline\-block\-support\-threshold|input\-placeholder\-support\-threshold|legacy\-float\-support\-threshold|min\-line\-padding|multi|support\-threshold|opacity\-usage\-threshold|owg\-threshold|prefix\-context|regions\-support\-threshold|rem\-with\-px\-fallback|rhythm\-unit|round\-to\-nearest\-half\-line|selection\-support\-threshold|show\-baseline\-grid\-backgrounds|show\-|grid\-backgrounds|show\-grid\-backgrounds|sprite\-(default\-margin|default\-size|image\-default\-(height|width)|selectors)|supported\-browsers|svg\-gradient\-shim\-threshold|(transform|transition)\-support\-threshold|transitionable\-prefixed\-values|use\-legacy\-gradient\-syntax|use\-mozilla\-ellipsis\-binding|userselect\-support\-threshold)
2. Import only the portions of compass you need.
Once you have found where you're using compass, do a search through compass's source code for the the mixin and functions used in your code. Some functions require heavier lifting than others, for some of these mixins, you'll find you're better off keeping the whole compass eco-system in place (like for PNG generation, etc)
https://github.com/Compass/compass/tree/stable/core/stylesheets/compass
Copy those into a new sass file ( maybe call it _compass-lite.scss?). Their license allows this, just be sure to comment a nice reference in your sass file:
// Portions of this software Copyright (c) 2009-2014 Christopher M. Eppstein
// Compass https://github.com/Compass/compass
// #license https://github.com/Compass/compass/blob/stable/LICENSE.markdown
3. Profit.
If, on the other hand you only want to run compass when needed as stated in your question, or if the mixins you need are too complex, the above searches will help you in this goal. When you find a mixin that needs compass you can use use the #import "compass" flag before the initialization of only those particular files.
Update: A cleaner route (maintenance-wise not processing-speed-wise) is to use the compass-mixins (If you're using npm compass-mixins is a library of just the compass sass mixins, beware he's using a modified MIT license if that is a concern).
For example:
// Compass SCSS Mixins for:
// #mixin background
// #mixin background
// #mixin border-image
// imports "shared", "../utilities/general/hacks", "../functions";
#import '../../../node_modules/compass-mixins/lib/compass/css3/images';
(...Then your first usage of the mixin)
Notes on the compass-mixins approach:
Your compiler will need to chew on more code than your are probably using, so if speed is the concern, cherry picking what you need is still the best way to go.
Notes on cherry picking your code:
If you're using an autoprefixer, you can dispense with much of what the compass mixins are doing, many of the lines that add the -moz, -ms, -o prefixes can be removed; your autoprefixer will handle those for you.
I am currently working on a project that uses Sass to compile my stylesheets. I have discovered that I would like to do some trigonometry in my CSS, however, and thus have turned to Compass for support.
In order to use the trig functions supported by Compass, must I use the framework to compile my stylesheets? (I.e. refactor my gulp workflow to use compass, instead of Sass, as my stylesheet manager?)
Given that Compass is built on top of Sass, do I understand correctly that there is no way for me to use compass' functionality (mixins, or trig functions, for example), while still using plain Sass plugins to manage my stylesheets (like gulp-ruby-sass)?
Thanks
I'm breaking your question up into two parts.
Can I use Compass mixins without Compass?
Yes. Compass mixins are just chunks of SASS that you can include in your project. For example, if you wanted to include the Compass border-radius mixins in your project, you could simply include the border-radius partial from the Compass core in your project. This will work without compiling through Compass.
Can I use Compass trig functions without Compass?
No. It looks like the trig functions rely on Ruby code in the Compass core. I'm not very familiar with Ruby, but I don't think there is a way to include that in your project without compiling through Compass.
I'm using sass to compile scss to css.
After each save it take a bout 15-20 seconds until it compile to scss file to css so I need to refresh few times to see the expected results. Is there a way to tell Sass to check for changes more often ?
This is the command I use:
sass --watch sass --watch app/scss/main/:app/css/
I am using Sass 3.3.8 (Maptastic Maple)
Please note that the scss are very short, I just started the project.
There is a performance issue in Sass 3.3. See the related issue on Github.
Sass is ruby based and therefore quite slow, nothing you can do about that. With that said, 15-20 seconds sounds way too slow.
You could try libsass instead, which is much faster.