Phaser using SASS Compass Sprites - css

I'm building a game using the Phaser javascript framework and want to use my compass-generated sprite classes from the SASS/CSS.
Can I use my generated classes on Phaser, and if so how would I go about doing this?

Since a Phaser game is one single <canvas> element, you can't use CSS to style specific game objects.
BUT, while I don't know much about SASS, maybe you can manage somehow to convert your sprite classes to base64 images ; if so it seems like you could import them with a game.cache.addImage('key', null, imageData);.

Related

what is the benefit of using styled components over using css class for the components

We write css when we use styled components, and I dont understand the benefit of using it why we just dont use the css we write as a classname for the components. In styled components we have wrappers of the components and when we use plain css we have class names. what is the advantage of wrapping components with styled components
The reason styled components is pushed in React web development is to encapsulate styles to only those components. There is no risk of bleeding css into other components. Rather than learn a new css organisation structure new developers can onboard more quickly.
That being said, it is restrictive, slower to develop with, and adds some page weight by applying same styles you could have shared.
I have found the fastest way to work is create static html webpages with pure css, and organise it in a way you are going to import it into your framework. Then you can have boilerplate html designs that can be tested independently of the compiler, which is so much faster to test in Internet Explorer, Firefox, chrome, mobile devices and all the varying screen sizes.
If you want to use styled components, you can either use this npm plugin to convert your static css into variables to use with style components -
https://www.npmjs.com/package/#inspiraller/create-css-vars
or just don't. Nextjs does not support css imports unless its global, so webpack compiling option is a more universal solution.
Main benefits of styled-components are listed in the Motivations page on their website.
styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.
Apart from the improved experience for developers, styled-components provides:
Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.
With styled components it's possible to "enhance" CSS classes with JavaScript code because are written in JS.
const Input = styled.input`
color: ${props => props.hasError ? 'red' : 'black'};
`;
Opposed to writing 2 separate CSS classes and control which to show with JS.
.text {
color: black;
}
.text--danger {
color: red;
}
<input className={`text ${hasError ? 'text--danger' : ''}`} />
On the long run it can produce more maintainable code, but it's a matter of personal opinion if it's better to use it or not.
With styled components you can add logic programming

best practices for keeping html canvas styling in sync with css stylesheet classes/variables

I have a site which makes heavy use of html5 canvas (actually createjs/easeljs). While canvas supports css-compatible strings for property values such as font or color, I'm not aware of any way to specify these values in one place so that they can be shared between the css and canvas code.
It would seem that I need to duplicate my efforts and create a styles_common.css and styles_common.js, and manually keep them in sync.
Does anyone know of a good way to avoid such duplication? I'm not currently using a css pre-processor such as scss. I hoping that a perhaps a css processor could import a .js file and substitute values, but I'm open to any solution which isn't hackish. Otherwise, I suppose I'm stuck duplicating my efforts.
Thanks in advance,
-Scott

Angular 2+, rtlcss integration

I have a task to add rtl support to the site by using some kind of a library to modify css which will swap left to right and vice versa and append [dir=rlt] [dir=ltr] to all selectors accordingly.
What I have done so far:
called ng eject
added rtlcss processor as postcss plugin, but it does not fit my requirements. I need it to append [dir=*] to selectors.
tried other plugins but they did not work.
Possible solutions:
make two css files and dynamically load them. (but then you need to add ViewEncapsulation.None to all components) BAD, not so much work, but can break layout
make two css files and run as two different applications. One for rtl, one for ltr. BAD, no resources for that
make rtl by hand. BAD, too much work
forget about rtl processors and make sass mixins. BAD, too much work
make one css file with correct prefixes generated, [dir=ltr] and [dir=rtl] which will result in a doubly sized css but it will eventually work. GOOD but no idea how to do it
create custom library to do this, or fork existing to modify
find working processor
Currently, I am trying to find working processor with no luck.
Are there any ideas on how to accomplish this?

Creating CSS sprites using Sass without Compass?

Update - 20140614:
After not getting any answers to this question, or on github,
I decided to come up with my own solution to the problem.
I was using Compass for a number of things,
but its main utility was in its ability to generated image sprites.
Most other things could be accomplished using pure SCSS.
Thus, I wrote broccoli-sprite.
This, used in conjunction with ember-cli's built in support for SCSS
using broccoli-sass,
was able to meet my needs.
You can read more about the process here.
Original question:
With Sass, but without Compass, is it possible to create CSS sprites?
I am looking for a way to accomplish the equivalent output as this Sass + Compass would accomplish:
#import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
#import"icon/*.png";
#include all-icon-sprites;
#import"compass/css3/images";
Essentially this would comprise of two things:
Joining several images together
Generating the CSS classes such that background-image would point to the joined image, and the coordinates and dimensions for it to show just the right section of the joined image.
The latter, generating the CSS classes should be do-able using Sass, however, is the former, joining several images, possible? If so, how can this be done?
NOTE: Am not sure if anyone has done this before, mainly because googling "image sprites with sass without compass" and "image sprites with sass -compass" simply did not return any relevant results.
Sass itself will not help you with sprites generation.
You'll have to use a task runner to achieve that. As you're not willing to use Compass, i assume you're in a Node environment.
The most popular (but not the best there is) task runner is Grunt.
Grunt has a number of recipes for sprite generation. I managed to google up some for you (in no particular order):
https://www.npmjs.org/package/grunt-sprite
https://www.npmjs.org/package/grunt-imagine
https://www.npmjs.org/package/grunt-sprite-generator
https://www.npmjs.org/package/grunt-spritesmith
https://www.npmjs.org/package/grunt-sprite-packer

Suggest how to convert wirefy css framework to bootstrap css framework

In our project we are using WIREFRAME( Base 16 columns) css framework, we want to change the framework to Bootstrap, IS there any easy way to change, or do we need to re write entire css again.
You shouldn't have to convert to Bootstrap unless there are particular styles that Bootstrap offers that Wirefy doesn't. Wirefy is meant to work as a foundation that you can build your entire app on. This means that you can include additional frameworks or stylized classes on top of it without having to convert.
If you still feel you need to convert then it really depends on the types of classes you've included into your wireframe and how they align with that of Bootstrap.

Resources