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.
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.
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 new to Cakephp and I have been developing a website for my client. I'm not satisfied with the look of the website and I've been trying to figure out how to use Bootstrap with Cakephp. I have been introduced to Sass and it seems like this is a great way to write css. So I want to use Bootstrap-sass. But after seraching a lot I still cannot find a good tutorial on how to approach this matter. Most of the tutorials are for Ruby on Rails with Bootstrap even the official Bootstrap-sass Github page https://github.com/twbs/bootstrap-sass
I would be gratful if someone could guide me through this or if this is not the way to go, which Bootstrap should I use If I want to have the sass functionality as well.
Also there is another doubt that I have:
Is it possible to overwrite Bootstrap css without using LESS or SASS?
That is more than one question.
SASS and CakePHP, easy. First of all, understand there are 2 SASS dialects. Original SASS tries to use the minimum of characters and is indent-sensitieve like Python. SASS 3 brought SCSS, which is more like CSS on steroids and easier to use. Then - outside of Ruby - you need a SASS compiler. SCOUT for SASS - Windows and Mac - is dead simple and does the job. You indicate your source SCSS folder, sits in webroot in my CakePHP, a target folder, the CakePHP CSS folder and a temp folder sitting in CakePHP/tmp for me. That is all it takes, save a SCSS file and Scout watches this and generates the CSS.
Bootstrap. Not easy to integrate in CakePHP templates. Additionally it uses some questionable JavaScript. Take a look at Compass, the same thing integrated in Scout.
If you want Bootstrap for a responsive grid, use SimpleGrid instead. As the name says simple and CSS only. Drupal is based on it.
Remember SCSS is a CSS superset; copy your CSS to your SCSS folder and start adding to it.
Good luck, André Hartman, Belgium.
Or what is the best practice to "import" a less file in sass files?
I'm building a rails project with SASS as the solution for writing syntactic css. The SASS parts worked fine, until I find out that the styles of some open source projects are written in LESS and I really want to reuse their artwork.
Should I just let Rails precompile all LESS and SASS files, and require the result css files in a specified order?
The license of these third party projects are different. Understanding all the details about intellectual property laws seems to be too much work for the small project I'm doing (e.g. should I keep a css file MIT licensed if I changed 90% of it and just used the color palette?), this project will be open sourced as well, so I would like to keep the codes untouched for now.
Update: A easy way of translating all LESS files to SASS files would be nice as well.
From my understanding, LESS & SASS are compiled differently (although are similar)
Would you be able to translate the LESS files you wish to include?