logo标签列表

指南针精灵 - 在包含精灵时避免使用extends

csssasscompass-sass
4

我正在使用Compass来生成我的精灵图，它运行得非常完美，但我遇到了一个小问题。当在另一个@include（例如媒体查询mixin）内部时，我无法使用@include语句包含单个精灵图，而我通常会使用这种方式。我的精灵图SCSS如下：

.sp {
    background-repeat: no-repeat;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    text-indent: 100%;
    border: 0;
}

$sp-sprite-dimensions: true;
$sp-sprite-base-class: '.sp';
$sprite-layout: smart;
@import "sp/*.png";
@include all-sp-sprites;

在另一个位置，我正在尝试做这件事：
.logo {
    a {
        @include break($break1) {
            @include sp-sprite(logo-small);
        }
    }
}

嵌套的@include语句在SCSS中是可以使用的，但是它不允许在@include语句内部使用@extend语句，而显然sprite @include会在幕后生成一个@extend语句，而我不想要这个。有人知道如何解决这个问题吗？
编辑：
@lolmaus指出，真正的问题是我在媒体查询内部嵌套了@extend语句。我猜这是不允许的，有什么解决办法吗？
你似乎在做一些奇怪的事情。sp-sprite是你编写的混合器吗？请提供完整的代码。 - Andrey Mikhaylov - lolmaus
@lolmaus 不是的，这是由compass自动生成的mixin。在这里查看“选择器控制”：http://compass-style.org/help/tutorials/spriting/ - jordancooperman
问题在于可以在另一个mixin中使用foo-sprite mixin。这个Gist编译得很好。这就是为什么我认为你已经覆盖了mixin。请提供完整的代码和错误文本，以便我们可以将报告的错误行与代码匹配。使用http://gist.github.com同时共享多个大文件。 - Andrey Mikhaylov - lolmaus
1
哦，我明白了。问题不在于你的扩展是在混合中，而是它在媒体查询中！ - Andrey Mikhaylov - lolmaus
哦，我明白了，我想那就是问题所在，感谢您的跟踪。有什么解决办法吗？ - jordancooperman
3个回答
6
你如何使用自定义mixin？我尝试了，它被包含了。但我可能做错了什么。 - Matthias Wegtun
3
  1. 将mixin放在一个局部文件中，例如 _get-sprite.scss。
  2. 在代码开头的某个位置导入该局部文件。
  3. 这样应用mixin：.element { @include get-sprite(...); }。确保正确提供所有参数。
  4. 编译代码。如果结果不满意，请分享：a）你的SASS代码；b）生成的CSS代码；c）解释你想要实现什么，以及结果与你的期望有何不同之处。
 - Andrey Mikhaylov - lolmaus
噢，来吧，好好学习它，它很简短！PS 别忘了接受答案。 - Andrey Mikhaylov - lolmaus
0
以下代码描述了如何实现它：
要点：在 @media 查询中扩展 Compass 精灵 
/*
 * A simple way to extend Compass sprite classes within media queries.
 * Based on the knowledge gained here: http://www.sitepoint.com/cross-media-query-extend-sass/
 * I admit it's nowhere near as clever, but it does work :)
 */


/*
 * Set-up sprites for each media size
 */

// default
@import "icons-sm/*.png"
@include all-icons-sm-sprites

// corresponding sprites for larger devices
// notice that @import is within the @media query
// that's critical!

@media (min-width: $large)
  @import "icons-lg/*.png"
  @include all-icons-lg-sprites

/*
 * Now you can do something like this
 */

// an example mixin

@mixin social-links($size)
  $socials: facebook, twitter, youtube
  @each $social in $socials
    &.#{$social}
      @extend .icons-#{$size}-#{$social}

/*
 * Put to use
 */

// assuming you've got mark-up like this

<p class="social">
  <a href="#" class="facebook">facebook</a>
  <a href="#" class="twitter">twitter</a>
  <a href="#" class="youtube">youtube</a>
</p>

// you can do this                          
.social
  a
    @include social-links(sm)
    width: 25px
    height: 25px
    @media (min-width: $large)
      @include social-links(lg)
      width: 50px
      height: 50px
0
这是一个用于生成可以与媒体查询一起使用的精灵声明块的SASS（SCSS）mixin。 SCSS： 
// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

  //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map);

  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
  $sprite-position: sprite-position($map, $sprite);

  // Returns background
  background: $sprite-map $sprite-position $repeat;

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants height returned
  @if $height == true {
    // Gets the height of the sprite-image
    $sprite-height: image-height($sprite-image);
    // Returns the height
    height: $sprite-height; }

  // http://compass-style.org/reference/compass/helpers/image-dimensions/
  // Checks to see if the user wants height returned
  @if $width == true {
    // Gets the width of the sprite-image
    $sprite-width: image-width($sprite-image);
    // Returns the width
    width: $sprite-width; }
}

用法：

$icons: sprite-map("sprites/icons/*.png"); // define a sprite map 

// ... later

@media only screen and (max-width: 500px) {
    .video .overlay {
        @include get-sprite($icons, play-btn-large);
    }
}

来源：GitHubGist - brubrant / get-sprite.scss

这个能够工作的唯一原因是你把媒体查询放在了mixin之外。我正在寻找一种方法将其保留在内部。 - jordancooperman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接