I want to add images as base64 in sass. I have been locking at Compass but it feels way to bulky and really not what I'm looking for. Is there a good way to include images or other files inline in css without using compass?
If you use grunt, you can just use the grunt-data-uri task in order to achieve the conversation of regular url() string to base64.
dataUri: {
dist: {
src: ['dist/styles/*.css'],
dest: 'dist/styles/',
options: {
target: [
'img/low-res/embeded/*.*'
],
fixDirLevel: true
}
}
},
Essentially, the task will look for every images contained inside the embeded folder in your .css. From there, it will convert the url() into base64.
Compass is Open Source, just get the part of the code that suit you.
Here is the ruby source on Github
Related
Is there a way to add hash values to images that are referenced in CSS when you compile using Webpack?
I'm using React, and have separate scss files for each component file (e.g header.js & header.scss). Within some of the scss files, I have a background image. However, my server has super high caching levels, and is caching the images within the compiled css files.
What I'd like to do is, during the css compilation, add a hash value to each image reference, which would update on every build. So for example, it would compile to this:
.background-class {
background-image: url('images/my-image.jpg?0adg83af0');
}
I've tried to use the url-loader, but because these images aren't being referenced in the JS files, I don't think they're being picked up?
I ended up using a combination of PostCSS and PostCSS CacheBuster. If anyone wants to add this to their webpack setup, you need to run npm i postcss-loader postcss-cachebuster, then in your webpack.config.js, add const PostCssCacheBuster = require('postcss-cachebuster'); to the top of your file, and add the following loader config in between css-loader and sass-loader (obviously if you use this setup):
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [
PostCssCacheBuster({
imagesPath: "/src/Frontend",
cssPath: "/" + distributionPath,
supportedProps: [
'background',
'background-image'
],
paramName: 'v='
})
]
}
},
Can someone please tell me if it is worth using Sass/SCSS with React?
I finally set up SCSS to work with Create-React-App without ejecting, but it doesn't seem to work well since it is recommended to use CSS modules with each component.
How would I go about sharing variables, mixins, etc. Is it better just to use CSS?
Any help would be greatly appreciated.
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. For further instructions, check out the documentation. If you need an example, check out this application's Navigation component.
I highly recommend using scss, as you can still use CSS-Modules with SCSS.
I'm not familiar with the create react app setup, but usually you'd configure webpack with style-loaders like so:
{
test: /\.scss$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } },
'sass-loader',
],
exclude: [srcDir + '/assets/scss/']
},
The loaders will execute backwards, starting with the sass-loader which will transpile your scss to normal css, then with the css-loader and the option "modules: true" these styles will be made available to use as modules.
Of course it could look a bit different but that would be the basic approach to use css modules with scss.
To share variables and mixins I always use a global scss file, which will be required in the app (e.g. in the app.js). However you'll still have to import that file/s in every component-scss where you need the variables and mixins.
// GLOBAL STYLES
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
],
include: [srcDir + '/assets/scss/']
},
Alternatively you could use PostCSS-Properties to make your components even more flexible (e.g. to provide different themes for your app, without explicitly importing the files in your component styles) but afaik those are not supported by IE and would require you to add specific postcss loaders.
see http://cssnext.io/features/#custom-properties-var
The flexibility and maintainability that SASS provides is very useful for big projects especially with react.
However, don't let yourself be influenced by my or the opinion of others - you're free to use the things you're most comfortable with and should always question the way things are done.
create-react-app V2 corresponding section doc: (support out of the box)
https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
Using Sass/SCSS is pretty much completely unlinked to React. Sass is compiled to regular CSS, and then you use it as such within your HTML or React.
As for sharing variables, when you use #import it basically just takes everything from the file your importing and pastes it in, so you could just make a _variables.sccs file and import it into each file where you want to use your global variables.
//variables.scss
$primary: red;
$secondary: blue;
//main.scss
#import 'variables';
body {
background-color: $primary;
color: $secondary;
}
After having create a Sass file, I would like to create a copy of this file with only the structure (only the class and the id, but not the css properties).
Is it possible ? And how ?
Google doesn't help me ...
Thanks a lot
If you want to keep your selectors, you can put CSS comment inside your differents blocks.
They will be present in your compiled stylesheet.
this-selector {
// will not be present
}
but-this-one {
/* will */
}
For an automatic parsing, you should try with postcss and, for exemple, a node.js script.
Compass has a lovely command that will watch and compile all scss in a given directory:
compass watch *foldername*
However, the Ruby-based compass is kind of slow and the C-based SASSC, wrapped in the form of node-sass, is much faster. Thing is, I haven't been able to replicate this seemingly simple feature using node-sass.
I followed the directions given here: http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/, which do a great job of setting up node-sass with grunt to watch for file changes, but it doesn't seem to support watching and converting an entire folder, agnostic of the file names within.
I've tried changing the
sass: {
dist: {
files: {
'css/styles.css': 'sass/styles.scss'
}
}
}
values to the folders, amongst many other things, and nothing seems to work. I'll admit that I don't really know anything about grunt. Is there a way to replicate
compass watch *folder*
or
sass --watch *folder*:*folder*
that I haven't tried, or does this not exist?
Yaniv was on the right track, but the magic seemed to be in "expand". Here's what ended up working:
sass: {
dist: {
files: [{
expand: true,
src: ['sitecontent/**/*.{scss,sass}'],
ext: '.css'
}]
}
}
This compiles all sass files in the sitecontent folder and all subfolders and puts the css next to the sass file - it doesn't compile them to some other folder.
You will need to use grunt-sass in combination with grunt-contrib-watch to get the same affect. The ruby version uses a separate gem to accomplish the file watching functionality, so you can imagine how difficult that is to do cross platform in C++.
You can use something like this:
sass: {
dist: {
files: [{
src: ['*.scss'],
dest: '../public',
ext: '.css'
}]
}
}
Hope that was what you were looking for
I'm trying to create a sprite for regular use by a large team. I want to automate the creation of it, so that anyone can just drop new icons into the /source folder and run a task to update the sprite and corresponding CSS file.
I've been using grunt-spritesmith, which works fine, except that it doesn't support automagically adding :hover rules. I also tried grunt-iconizr and grunt-svg-sprite. The latter supports hovers (by naming your files like foo.png, foo~hover.png) but only works with SVG files as input (which I don't have).
I also tried installing Glue but I couldn't get it to install and run properly on my machine.
Can anyone recommend a solution that works with only PNG files as input, and supports pseudo-classes on the output sprite/css?
This is exactly what Compass Sprites does. It creates a sprite image from a folder of .png images and it supports pseudo-classes by naming your files star.png and star_hover.png
I have solved this, naming the images that be hover with suffix -on
example: arrow-on.png
and in gruntfile.js I have created a rule "CssVarMap" that controls if the suffix "-on" exists.
If true then adds ":hover" to the css output:
//spritesmith
sprite:{
all: {
src: 'srcfolder/*.png',
dest: 'dest/skin.png',
destCss: 'css/skin.css',
cssVarMap: function (sprite) {
if(sprite.name.substr(-3)=="-on"){
sprite.name = sprite.name.substr(0, sprite.name.length -3)
sprite.name = sprite.name + ":hover";
}
},
}
}