小编big*_*ile的帖子

我有两个 SCSS 数组（$color_options和$object_options）。

我想使用 SCSS 循环遍历两个数组以组合它们的值。

我创建了一个函数来执行此操作，一切正常。但是，有时我只想循环颜色数组并忽略对象数组。我怎样才能做到这一点？

这是我的代码（*）：

@function generic-avatar-hidden($color_options: $color_options, $object_options: $object_options) {
    $bg: compact();

    @each $ov in $object_options {
        $o-css-selector: nth($ov, 1);

        @each $cv in $color_options {
            $c-css-selector: nth($cv, 1);
            $assetname: $o-css-selector + $c-css-selector;

            $bg: join($bg, image-url("#{$root-directory}/#{$brand}/#{$product}/#{$type}/#{$product}-#{$type}-#{$path-pre}#{$assetname}#{$path-post}.#{$ext}"), comma);
        }
        // Close CV
    }
    // Close OV
    @return $bg;
}

我尝试将与 object_options 相关的所有代码包装在@if $object_options != null. 这是可行的，但是当$object_options应该使用时，该函数只会循环遍历$object_options数组中的最后一项。

代码示例

(*) 这是我的代码的精简版本。完整的示例可以在这里找到：

完整版没用过@if $object_options != null

更新版本为 …

默认情况下,在Drupal 7中,字段描述显示在字段下方.无论如何将它们移到场上？

在Drupal 6中,您可以将以下代码粘贴到template.php中以移动描述.但是,代码在Drupal 7中不起作用:

/**
 * Place CCK Options above field .
 */

function ThemeNAME_form_element($element, $value) {
  $output  = ' <div class="form-item"';
  if(!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }  
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'.t('This field is required.').'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id'])) {
      $output .= ' <label for="'. $element['#id'] .'">'. t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label> \n";
    }
    else {
      $output .= ' <label>'. …

在我的CSS中,我必须创建引用"头发颜色"和"发型"的类.

我写了一个mixin来帮助我提高CSS编写效率:

@mixin hair($hair, $colour) {
    .hair-#{$colour} .#{$hair}  { 
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, 
image-url("xsppsheadgrey.svg") center top no-repeat, 
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
}


}

@include hair(spikyboy, blonde);    
@include hair(curlyafroboy, blonde);    

这会产生以下CSS

.hair-blonde .spikyboy {
  background: url('../images/xsppsfhairspikyboyblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhairspikyboyblonde.svg?1348682005') center top no-repeat;
}

.hair-blonde .curlyafro {
  background: url('../images/xsppsfhaircurlyafroblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhaircurlyafroblonde.svg?1348682005') center top no-repeat;
}

这很棒,但由于我总共有35种头发颜色和发型,我的结局太多了@includes.

在这个页面上,它说SASS有一个@each,可用于遍历列表.有一个进一步的例子在这里.但是,这两个示例仅显示循环到1列表.是否可以遍历两个列表？

我尝试了很多代码,但似乎都没有.我认为以下肯定会有效,但我只是得到一个关于$ color未定义的错误消息.

$hairstyle: (red, blonde, ltbrown);
$haircolour: (red, blonde, ltbrown);

    @each …

我正在使用CSS来创建发型和颜色的目录.我有55种不同颜色和发型的组合.每种发型和颜色都有自己的图像SVG文件,我需要将它们全部组合成一个背景(使用CSS3的多重背景功能).

我写了这个混合来生成多个背景:(这是基于这篇文章中的mixin )

@mixin style-matrix($colors, $styles) {
    @each $s in $styles {
        @each $c in $colors {


                url("pps#{$s}#{$c}.svg"),
        }
    }
}



$colors: blonde, red, dkbrown, ltbrown, black;
$styles: hairboy1, hairboy2, hairboy3, hairboy4, hairboy5, hairgirl6, hairgirl1, hairgirl4, hairgirl2, hairgirl3, hairgirl5;

.hidden {
background: @include style-matrix($colors, $styles) url("base.svg);
}

(见codepen)

但是,每次运行mixin时,都会收到以下错误消息:

Invalid CSS after "...            url": expected "{", was "("pps#{$s}#{$c}..."

如何使用mixin生成多个背景？

Enquire.js 是一个Javascipt,它为Javascripts重新创建CSS媒体查询.这意味着您可以将Javascripts包装在Media Queries中.(就像你在媒体查询中包装CSS一样).

我不太清楚如何使用它.本教程说明了这一点:

enquire.register("max-width: 960px", function() {
  // put your code here
});

但是,当我遵循它时,我的代码停止工作.

以下是一些没有Enquire.JS的Jquery选项卡示例.它工作正常.

这是相同的选项卡,但添加了Enquire.JS.现在它停止工作了.

我已经尝试了不同的代码变体,但它们都不起作用.我究竟做错了什么？

我想你可能已将Jquery Tab代码放在一个单独的文件中,然后从Enquire.Js中链接到该文件,但我不知道你会怎么做.(虽然我知道它会让你的脚本更加可重用,但它会很方便.)

PS.这不是对Enquire.Js的批评.我知道问题在于我缺乏Javascript的熟练程度!我确实花了几个小时寻找解决方案,但找不到任何东西.

谢谢你的帮助!

我想制作一个由1px线组成的CSS3渐变.

我怎样才能做到这一点？

我尝试了以下代码,但生成的渐变太厚:

background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);

(见这里)

如何使线条更小,所以它只有1px宽？百分比值似乎控制了线的位置,但无论我调整多少,我都无法达到1px宽!

(基本上,我使用该行作为'人造列'背景[即在视觉上分隔左右列.(虽然,为了保持jsFiddle简单,我已删除列)]我知道还有其他方法做列,但这种方法对我的情况是最好的)

编辑:只是为了澄清,这是一个稍微奇怪的用例,其中宽度必须是100%,并且不能使用psudeo元素.

我正在创建一个头像创建者.用户有一个链接列表,他们必须单击这些链接来自定义头像选项.

在列表下,是一个提交按钮.我只希望当用户点击所有链接时出现提交按钮(这是一个响应式设计,所以这只会在Mobile上发生).

如何使用Jquery检查是否已单击所有链接,然后将"活动"类应用于包装器以显示提交按钮.

注意:链接是内容滑块的一部分,因此它们不链接到外部页面(单击链接隐藏/显示当前页面上的内容).

<div class="wrapper not-active">

<ul>
    <li><a href="#">HairColour</a></li>
    <li><a href="#">EyeColour</a></li>
    <li><a href="#">SkinColour</a></li>
    <li><a href="#">HairStyle</a></li>
</ul>


<a href="#" class="submit">SUMBIT CHOICES</a>

</div>

我有一个JSFIDDLE在这里,但我没有添加任何Jquery代码,因为我不确定使用哪个函数来检查是否已经点击了所有链接.(我省略了内容滑块的代码以保持清晰).

最近在使用Sass时,我一直在扩展类作为变量的替代.

例如:

- 使用变量

$small-font: 12px

p {
font-size: $small-font
}

- 扩展课程

.small-font {
font-size:12px;
}

p {
@extend .small-font;
}

扩展类的优点是可以更轻松地使代码响应.例如,我可以包装 .small-font媒体查询,这对于变量是不可能的.

我的问题是:以这种方式使用扩展类是否有任何缺点？我知道输出倾向于将所有类混合在一起(这会使调试变得更加繁琐),但是还有其他潜在的问题吗？

我有一组PHP变量(以它开头$cta).我使用PHP'If'测试,根据其他变量的值更改这些变量的值.

我在PHP文件的几个位置使用这些变量(并根据位置将变量包装在不同的HTML代码中),所以我想在函数中存储'If'测试代码.

这样,我的代码将更有效,因为'If'测试将在一个地方.

这是我的功能:

function calltoaction {

 if ($cta_settings == 'cta_main') {
                $cta_prompt = 'We are ready for your call';
                $cta_button = 'Contact Us';
            }
($cta_settings == 'cta_secondary') {
                $cta_prompt = 'Call us for fast professional service';
                $cta_button = 'Call Us';
            }
}

现在我有了这个函数,如何访问里面的$ cta变量呢？

例如以下不起作用:

<?php 
calltoaction();
print '<p>' . $cta_prompt . '</p>;
print '<span>' . $cta_button . '</span>;
?>

(上面给出的示例是一个缩减版本,我的完整代码有点复杂).