代码之家 › 专栏 › 技术社区 › Jesse Orange

基于元素存在性向scss中的元素添加颜色类

sass laravel css

Jesse Orange · 技术社区 · 6 年前

我有一个类似这样的文章块:

此框的SCS在这里:

/* 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 改变内部元素的颜色,或者我必须有一个单独的风格束?

另外,你是隐藏特色图片框还是重新定义整个块?

我基本上希望能够有许多主题的文章块,在其中我可以附加一个类来控制颜色。

这可能很简单,但我撞到了墙

2 回复 | 直到 6 年前

muecas 6 年前

您可以将聚合类添加到 .article 类使用 & :

#news-grid {
    .article {

        // Your current styles and nested classes...

        // When .article.dark
        &.dark {

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

    }
}

我构建了一个工作编译示例 here . 注意,我在顶部添加了一些变量,只是为了让代码工作。

希望有帮助。

wiiiiilllllll 6 年前

这似乎是个很好的用途 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;
}