将多个CSS类组合到另一个类中

Question

我的页面根据访问者所在的城市或州使用特定的样式。例如，如果他们来自新泽西州，则背景将是红色的。目前，我正在做如下操作：

HTML/PHP

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top-Bar">Name</div>
    <div class="Bottom-Bar">Location</div>
  </div>
</div>

CSS

.New.Jersey .Top-Bar, 
.New.Jersey .Bottom-Bar {
  background-color: red;
}

.Pennsylvania .Top-Bar, 
.Pennsylvania .Bottom-Bar {
  background-color: blue;
}

当我想要添加一个有颜色的新元素到页面时，我必须在每一行中物理地添加像.Pennsylvania .Middle-Bar这样的内容以适应每个位置。

有没有更好的方法来做到这一点？我知道我可以通过一些包含颜色代码的数据库来实现样式，但出于性能考虑，我更愿意将尽可能多的东西放在样式表中。

- Kyle Dunne

Answer 1

为什么不写？

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top Bar">Name</div>
    <div class="Bottom Bar">Location</div>
  </div>
</div>

And

.New.Jersey .Bar
  background-color: red;
}

.Pennsylvania .Bar
  background-color: blue;
}

然后，如果你想要另一个元素，你可以写上，例如：

<div class="Middle Bar">Population</div>

颜色样式将自动应用。

如果您想要一些其他的样式（比如字体加粗）只针对中间条，而不是编写

.Pennsylvania .Middle-Bar
  font-weight: bold;
}

您需要编写

.Pennsylvania .Middle.Bar
  font-weight: bold;
}

- Alohci

Answer 2

使用scss/sass可以实现嵌套类，这将帮助您达到目标。

$pallete: ( white: #fff, black: #000, red: #d43862, green: #00a665, orange: #ff9100, blue: #008acd, ghost: rgb(129, 129, 129) );

@each $palleteColor, $color in $pallete {
    .col-#{$palleteColor} {
        color: $color;
        &-darken {
            color: darken($color, 20% );
        }
    }
    .bg-col-#{$palleteColor} {
        background-color: $color;
        &-darken {
            background-color: darken($color, 20% );
        }
    }
}

你可以使用你的类作为.bg-col-white, .col-black, .col-black-darken

如果你想编译这个，只需安装npm，然后使用sass编译器

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

这里有完整的Gulp指南

如果您想使用Webpack

var webpack = require('webpack'),
    autoprefixer = require('autoprefixer'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path = require('path');

var SRC_DIR = path.resolve(__dirname, 'src');
var DIST_DIR = path.resolve(__dirname, 'dist');
var config = [{
    name: 'styles',
    context: __dirname,
    entry: {
        styles: SRC_DIR + "/scss/styles.scss",
        framework: SRC_DIR + "/scss/bulkenny/index.scss"
    },
    devtool: debug ? "inline-sourcemap" : null,
    exclude: '/node_modules/',
    output: {
        path: DIST_DIR + '/css',
        filename: '[name].min.css'
    },
    module: {
        loaders: [
            { test: /\.(scss|sass)$/, loader: ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader', 'sass-loader']) }
        ]
    },
    postcss: function(webpack) {
        plugins: [autoprefixer,
            require('postcss-combine-duplicated-selectors'),
            require('css-mqpacker'),
            require('postcss-discard-unused')
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].min.css')
    ]
}];

module.exports = config;

然后，使用你的PHP做一些像这样的事情（当然没有测试过，但可以看出应该是什么样子）

<?
function countryColor($countryName){
$colors = array('Minesota'=> 'red', 'Sosnowiec'=>'pink');
return $colors[$countryName];
}

$users = array(
   array("username"=> "Adam", "location"=>"Minesota"),
   array("username"=> "Paul", "location"=>"Sosnowiec")
);


foreach ($users as $index=>$user){

?>
<div class="bg-col-<?php echo countryColor($user['location']); ?>">
  <div class="Container">
    <div class="Top-Bar">Name</div>
    <div class="Bottom-Bar">Location</div>
  </div>
</div>
<?php
}
?>

- Mehow

Answer 3

在这种情况下，我强烈推荐使用CSS预处理器。有几种选择，如SASS、LESS、Stylus等。

它们使得编写长的CSS变得更加容易和快捷，尽管你应该意识到它们并不一定会减少输出的CSS量。

它们拥有各种巧妙的功能，其中之一可以帮助你解决这个问题。

在SASS中，它们被称为Maps。

所以，这样的代码：

$states-bg: (
  pa: red,
  nj: blue,
  ny: green,
  ca: orange,
  tx: rebeccapurple
);


@each $state, $bg-color in $states-bg {
  .#{$state} .state-bg-color {
    background: $bg-color;
    }
}

实际上输出的是：

.pa .state-bg-color {
  background: red;
}

.nj .state-bg-color {
  background: blue;
}

.ny .state-bg-color {
  background: green;
}

.ca .state-bg-color {
  background: orange;
}

.tx .state-bg-color {
  background: rebeccapurple;
}

我们通过给它一个名字$state-bg来定义我们的地图，然后地图中的每个“状态”项都有相应的颜色值。

如果我们为背景颜色使用单个类名，这将自动输出。

只需维护一个列表，可以根据需要进行扩展。

您可以在此处尝试：Sassmeister。

- Paulie_D