A
A
Alexander2015-08-26 23:25:03
css
Alexander, 2015-08-26 23:25:03

How to set up sass (compass) relative paths?

Hello.
gulpfile.js

gulp.task('compass', function() {
  gulp.src(['./app/styles/*.sass', '!app/styles/lib/_*.sass'])
    .pipe(compass({
        css: 'public/css',
        sass: 'app/styles',
        style: 'compact',
        images_dir: 'app/img/', 
        images_path: 'f:/progect/app/img/',
        generated_images_dir: 'public/img/',
        generated_images_path: 'f:/progect/public/img',
    }))
    .pipe(gulp.dest('public/css/'))
    .pipe(connect.reload());
});

Did everything as indicated on the site.
_mixins.sass
$icons: sprite-map("public/img/icons/*.png", $spacing: 10px)

// sized sprites
=image-size($path)
  width: image-width($path)
  height: image-height($path)

=sized-sprite($map, $sprite)
  background: sprite($map, $sprite) no-repeat
  @include image-size(sprite-file($map, $sprite))

=s($sprite, $map: $icons)
  background: sprite($map, $sprite) no-repeat
  //background-image: inline-image('icons/'+$sprite+'.png','image/png'); to switches sprites to base64, elegant
  @include image-size(sprite-file($map, $sprite))

$icons: sprite-map("public/img/icons/*.png", $spacing: 10px)
- That's just with this path, he finds png, regardless of the config. Tried all options. Otherwise it throws an error.
+s(button) - directly insert the mixin itself in the right place to get the effect. After compilation, we get:
url('../img/public/img/icons-s19c8d80a14.png')
But it also generates an image with the following nesting: public/img/public/imj/...png
Despite all this, it works.
To fix nesting we don't need, I change generated_images_path: 'f:/progect/public/', to generated_images_path: 'f:/progect/',
and as a result I get rid of nesting. I put the picture where it needs to be, but here is the relative path:
url('../.../public/img/icons-s19c8d80a14.png')As a result, the browser does not see the picture, because after leaving the styles folder it tries to find the Public folder.
6d11e102e41a408591ab5259a5b54f9c.JPG
This is for clarity, where and how I have everything located. Help set up such a powerful tool.
How do you set up nesting here, or a relative path to the image? In order not to edit everything by hand, but to give the finished project to work.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question