Question

我有一个看起来像这样的文章块：

此框的SCSS位于：

/* Styling for all articles on index page */

#news-grid {
    .article {
        margin: 0px;
        text-align: left;
        border: none;
        .article-featured-image-box {
            position: relative;
            .featured-image {
                max-width: 100%;
                height: auto;
                display: block;
                position: relative;
                width: 100%;
                object-fit: cover;
            }
        }
        .article-meta-information {
            color: #cacacd;
            font-size: 15px;
            font-family: $balto-font;
            font-weight: 300;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 5px;
        }
        .article-content {
            padding: 30px 30px 30px 30px;
            background-color: #ffffff;
        }
        .article-title {
            font-family: $circular-font;
            color: $newable-navy;
            font-size: 24px;
            font-weight: 500;
            margin-top: 10px;
            margin-bottom: 10px;
            word-wrap: break-word;
            a {
                color: $newable-navy;
            }
        }
        .article-body {
            line-height: 24px;
            font-family: $balto-font;
            font-size: 18px;
            font-weight: 300;
            p {
                line-height: 24px;
                font-family: $balto-font;
                color: $newable-dark-grey;
                font-size: 18px;
                font-weight: 300;
                word-wrap: break-word;
                a {
                    color: $newable-blue;
                }
            }
            a {
                color: $newable-blue;
            }
            .article-excerpt p {
                line-height: 24px;
                font-family: CircularStd;
                color: $newable-navy;
                font-size: 21px;
                font-weight: 500;
                word-wrap: break-word;
            }
        }
        .article-footer {
            padding-top: 15px;
            border-top: 1px solid $newable-grey;
            padding-bottom: 30px;
        }
        .interactions-panel {
            width: auto;
            float: right;
        }
        .sticker {
            background-color: #fff;
            background-color: rgba(255, 255, 255, 0.92);
            text-transform: uppercase;
            font-size: 12px;
            line-height: 18px;
            color: #282C35;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            display: inline-block;
            top: 0px;
            right: 0px;
            height: 45px;
            width: 45px;
        }
    }
}

我要做的是添加一个指示颜色的类，例如，如果没有提供图像我希望新闻文章有一个黑暗的主题。

此课程.dark将更改背景颜色，文字颜色和标题颜色。

使用foreach循环生成文章

@foreach($articles as $article)

    <div class="grid-item element-item {{ str_slug($article->category) }}">

        <div class="article">

            <div class="article-featured-image-box">

                @if($article->featuredVideo != NULL) 

                    {!! $article->featuredVideo !!} 

                @else

                    <img class="featured-image" style="width: 100%; height:auto;" src="{{ $article->featuredImage }}" alt="{{ $article->title }}"> 

                @endif 

                @if($article->featuredArticle)

                    <div class="sticker yellow">
                        <span class="icon icon-news"></span>
                    </div>

                @endif

            </div>

            <div class="article">
                <div class="article-content">

                    <div class="article-meta-information">
                        {{ $article->created_at->format('d F Y') }} | {{ $article->author }}
                    </div>

                    <div class="article-title">
                        <a href="{{ action('ArticleController@show', [$article->id, str_slug($article->title)]) }}">{{ $article->title }}</a>
                    </div>

                    <div class="article-body">
                        <p>{{ $article->excerpt }}</p>
                    </div>

                </div>
            </div>

        </div>
    </div>

@endforeach

在foreach的顶部，我可以检查是否有特色图片并将<div class="article">重新定义为<div class="article dark">

在SaSS中是否有一种方法可以说如果类是.article .dark改变内部元素的颜色，或者我必须有一组单独的样式？

另外，您是否只是隐藏精选图像框或重新定义整个块？

我基本上希望能够为文章块提供许多主题，我可以在其中附加一个类来控制着色。

这可能很简单，但我已经碰壁了

Answer 1

您可以使用.article：

将汇总类添加到&班级

#news-grid {
    .article {

        // Your current styles and nested classes...

        // When .article.dark
        &.dark {

            // Your custom overrides
            .article-title {
                color: white;
            }
        }

    }
}

我构建了一个工作编译示例here。请注意，我在顶部添加了一些变量，以使代码正常工作。

希望它有所帮助。

Answer 2

这似乎是Sass maps的好用法。

您可以将两个主题（浅色和深色）创建为地图，然后在mixin中使用它们，通过将参数传递给mixin来切换主题。例如：

// All styles for .article go here
@mixin article($theme) {
  background-color: map-get($theme, main-bg);

  .article-title {
    color: map-get($theme, title-col);
  }
}

// Colours stored as Sass maps
$theme--light: (
  main-bg: gainsboro,
  title-col: dimgrey
);

$theme--dark: (
  main-bg: darkslategrey,
  title-col: whitesmoke
);

// Finally, here we call the mixin, passing name of the correct map
.article {
  @include article($theme--light);
}

.article.dark {
  @include article($theme--dark);
}

它编译为：

.article {
  background-color: gainsboro;
}

.article .article-title {
  color: dimgrey;
}

.article.dark {
  background-color: darkslategrey;
}

.article.dark .article-title {
  color: whitesmoke;
}

基于元素的存在将颜色类添加到scss中的元素

2 个答案: