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.
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.
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.
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.
I would like to start using Compass and Sass to speed up development. At the moment, I have installed Sass on a mac and instructed it to watch a Scss file for input, and a CSS file for generated output.
From many articles, Sass is used with Compass, I'm wondering why that is the case and just what does Compass add that Sass comes without? If you can give an example, the better.
From Sass and Compass in Action, by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis:
1.3 What is Compass?
Compass helps Sass authors write smarter stylesheets and empowers a community
of designers and developers to create and share powerful frameworks. Put simply,
Compass is a Sass framework, designed to make the work of styling the web
smooth and efficient. Much like Rails as a web application framework for Ruby,
Compass is a collection of helpful tools and battle-tested best practices for Sass.
(emphasis added)
Compass is an extension of Sass (as in Compass requires Sass). It has its own compiler (instead of sass --watch, you use compass watch). It has a large collection of mixins and functions that you'll find incredibly useful (while commonly pointed to for generating vendor prefixed CSS3 properties, it can do things like automatically generate spritemaps and the CSS to go with them).
Compass is also built in such a way that you can bundle your own bootstrap type library for easily deploying in multiple projects without the need to copy/paste the source for it in each one.
Is there a CSS minifier tool that can resolve #import statements?
I'd like to be able to load multiple CSS files on my local machine but have them all resolved into one file when the website gets pushed out into production.
I recently started using LESS, beyond imports allows you to use:
Variables
Mixins
Parametric Mixins
Nested rules
Operations
Color functions
Namespaces
Scope
Comments
Escaping
So far I'm glad with my experience using LESS.
It's easy to use and the page is documented with good examples.
You can use SASS, with the SCSS syntax. SASS is much more than a minifier: it is actually a CSS preprocessor which adds some goodies like variables or macros to the CSS syntax. But you can choose to simply ignore these features (although I advise you to have a look): any valid CSS file is actually valid SCSS.
SASS can then compile your SCSS in valid CSS, and it can manage multiple files and output a single minified .css file.
You can try it just as a minification tool for now, and start using the advanced features when you feel like experimenting.
css-compressor (based on yuicompressor) inlines #import statements - in fact that is its primary purpose:
https://github.com/samilyak/css-compressor
Granule library supports #import in CSS.
You can look it here http://code.google.com/p/granule/