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
Related
I'm using SASS as my CSS preprocessor.
I would like to use a feature that is not available in SASS - for example, I want to create a function that accepts a reference to an image and will return its width in pixels.
Something like this:
get-image-width('src/images/logo.png')
And the same for the image height.
This is just an example. Obviously it can't be done with CSS, so I'm looking for a way to extend SASS and add functionality.
P.S.
I know that Compass supports this feature, but I don't want to use Compass as it's not supported anymore.
Does anyone knows if this is achievable?
I think the short answer is no, there isn't an easy way.
If you find a module/plugin that works with your current Sass compilation workflow, you could theoretically be able to get the pixel dimensions of an image source and then use certain values somewhere before compiling the final CSS file.
For example, if you are using Gulp, there's the image-size package that returns the width/height dimensions. So in a custom Gulp function, you could read the contents of the Sass file, get the dimensions for the image sources you need, use them in whatever context you need, and finally compile the stylesheet.
(Probably no single answer can tell the whole truth regarding your question, so think of this as an extended comment.)
Is there a way to use just one file with variables and use it within a sass and a less CSS-framework?
In my react project I use semantic UI (less) and kendo react (sass). For comfortability reasons, I want to write only one file including variables like colors, paddings, gaps ...
in kendo theming is pretty easy.
I've found a way to use variables / theming within semantic too.
Here is the link
but now I can't get both frameworks working with just a single var file together as one is using sass and one less.
could find any solution online too.
// semantic site.variables
#fontName: 'Lato';
//kendo variables.scss
$niceBgColor: pink;
#width: 10px;//less
$theme1-PEOGCS:#615149;//SASS dark grey
They have different way of declaring variables and you should
completely separate LESS From SASS, for best practice.
It is bad practice to use both on the same project unless you really
have to do so.
SASS and LESS have a slightly different syntax, you would end up
having to maintain each separately.
Good practice would be for example:
Add Main Folder to project name it: SASS
File: main.scss
inside of SASS create Helper Folder name it: Helper
inside of it add these Files:
_mixins.scss,_variables.scss,_placeholder.scss
To make the code easy to maintain and reuse. Same with less(similar)
If there is a way to do what you want I don't recommend doing it, that's IF. Good luck
How many variables do you have?
The potential problems with this will be much bigger than manually maintaining two files with a dozen of variables in each.
Kendo has older, less-based themes, although of inferior quality. Semantic UI has a sass port. Even converting Semantic UI's less files yourself will be better than mixing less and sass.
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?
We currently use SASS to pre-compile CSS which consists of various SCSS files.
How does one remove the implementation of SASS so that CSS files are managed directly?
As a side question, is using SASS just personal preference or is it best practice for smallish projects? Why would I want to work in several files when I can just work out of one in a syntax that I'm familiar with?
Cheers
Just remove the sourceMappingURL in your main css will do.
You can also, should you wish, reconstruct traditional CSS by looking at what was being accomplished in the SASS files and rebuilding from scratch. This is cleaner than beginning with the compiled CSS ... but it is not for the faint-hearted: it's kind of like picking out stitches. But if the number of SASS files is few, you'll be better off.
CSS preprocessors (sass/less) were always a solution in search of a problem, in my opinion. They were likely designed by developers who were given sloppy CSS from designers who may not have had good coding practices - but in general, there is very little reason for them, and they add one more bit of unnecessary tooling. I've used them, don't like them, and will never use them again. Totally unnecessary. Good structure in one's CSS will always win.
Using sass helps you organize your code in a better way. And ease the development by using nested selectors and using mixins,variables and much more which you code once and re-use many times.
One will simply go to concerned file and change the contents easily if it divided to multiple meaningful files.
And coming to your question, you can move away from sass very simply. Generate a css file once and from next time onwards start coding in your css local copy rather than extending your sass files again . :)
If you just want to move away from SASS to return to the pure CSS, you have to use the compiled stylesheet. If you compile it via command line, then you would have got the compiled CSS. Anyway, you can use an online tool to compile it, such as this.
Once a time you have the compiled CSS, you just have to import that rather than the SASS stylesheet you've been including in the HTML previously. Just insert this in your <head>.
<link rel="stylesheet" type="text/css" href="Your pure CSS stylesheet URL">
Lets say that youre using Twitter Boostrap and you have their generic boostrap.css and other boostrap associated css files, and you want your own classes to have identical attributes to some of the given boostrap classes. To my understanding, you would not want to directly modify the css bootstrap files, but you would want to extend them by creating a custom.css file.
So without touching the boostrap files. How would I replicate a boostrap class for my own class? Would the only way be to copy and paste from the boostrap.css file. Or is there a way to do
.myownclass {
-- some command to replicate class 'alert alert-error' without repeating the CSS that has already been written
}
You could use a css preprocessor. Other ways already cited by other users are fine but using a css preprocessor is the best way.
Bootstrap is built using LESS, so you can use LESS. Take a look at here: http://bootstrap.lesscss.ru/less.html.
Also SASS can be used. According to me SASS is better. You find a tutorial here: http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-1/
What are CSS preprocessors?
A browser can only understand CSS, as the styling technique for any DOM element being rendered. CSS, as a language has its own feature set, which at times might not be enough to create a clean and reusable chunk of rules. Eg. Not being able to reuse a collection of rules in multiple selectors, unavailability of variables which may lead to ambiguous pieces of data across the stylesheet. To overcome most of these limitations, the concept of a preprocessor was born – offering an advanced way of writing CSS, which extends the basic functionalities. This advanced code is later compiled as normal CSS code using respective compilers (which depends on what preprocessor you are using), which the browser will understand.
Should you use preprocessors?
The decision of adopting preprocessors for your next project, in my opinion, should be made after much analysis and solely depending on your expertise level and most importantly the project requirement and workflow of the team as a whole. Here are some tips that might help you come to a decision:
Not for beginners: If you are a beginner and starting to explore the fantastic world of CSS, I would suggest you get your hands dirty with normal CSS before moving into a framework or preprocessor of any sorts. It’s really important to understand and be able to use the core concepts of any language that you work with, and that’s true for CSS as much as any other programming language.
Are you a team of front end developers? As a team of front end developers, adopting preprocessors will be a great move. But only if somebody on the team really knows how to handle huge CSS files and structure them accordingly. By making use of the powerful features offered by the language, it is important to first structure the whole CSS into reusable chunks and define a strategy for CSS organization. Eg. Are you going with multiple CSS files for typography, forms, layout etc. Are you going for theme-able UI, where you might need to use variables extensively, etc.
Are you willing to cross the barrier? Adopting preprocessors means you are going to be implementing more programming concepts into your CSS coding approach. There will be a lot of concepts that are native to any basic programming language, which you might want to learn and implement, by using a preprocessor. This means, you will definitely need to brush-up your programming skills and might forever change the way you see a CSS code. If you are willing to cross this barrier, and feel ready to embrace the change confidently, this is for you.
In CSS this is not possible. The only way to do it, is to chain the classes in your html tags.
<div class="alert alert-error myownclass"></div>
If you are using less you can do it like this:
.myownclass {
.alert
.alert-error;
}
This will copy the settings from one class to another. The result will be the same as if you copy the contents of the class directly.
If you are using Sass you can do it without copying the class contents. Just reference the classes as shown below. This will not copy the contents, instead it will reference your custom class at the right position in your css code.
.myownclass {
#extend .alert;
#extend .alert-error;
}
Ref: Sass #extend
You would have to use LESS to avoid copy/paste:
.myClass {
.bootstrapClass;
}
Or you could use any of the other CSS preprocessors TBS has been ported to (Sass has one, not sure on the others).
You could give the element two classes - the original Bootstrap class, and then one of your own making. Then you would target it like this:
HTML
<h1 class="original_class myownclass">Hello</h1>
CSS
.original_class.myownclass {
// css code
}
Here's a little jsfiddle illustrating the concept: http://jsfiddle.net/ApEpr/
This does not require the use of a CSS preprocessor - it's just regular old CSS.