Question

我的页面具有针对该人所在城市或州的特定样式。因此，如果他们来自新泽西州，背景将是红色的。要做到这一点，我现在做的事情是：

HTML / PHP

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

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

CSS

.Pennsylvania .Middle-Bar

当我想要将新元素添加到有色的页面时，我必须转到每一行，并为我所拥有的每个位置添加<div>之类的内容。

有更好的方法吗？我知道我可以使用颜色代码做一些数据库并按照这种方式进行操作，但我更喜欢在样式表上使用相同的性能。

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>

并且

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

.Pennsylvania .Bar
  background-color: blue;
}

然后，如果你想要另一个元素，你可以写，比如说

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

将自动拾取颜色样式。

如果你想要一些特定于中间栏的其他样式（比如font-weight）而不是写

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

你要写

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

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']);
});

here is complete guide for 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做这样的事情（ofc未经测试，但你可以得到它应该是什么样子）

<?
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
}
?>

Answer 3

在这种情况下，我不建议使用足够的CSS预处理器。有一些，SASS，LESS，Stylus等。

make 写长CSS更容易，更快，但你应该知道不要必然减少输出的CSS数量。

他们有各种各样的聪明功能，其中一个可以帮助你。

在SASS中，它们被称为地图。

所以这个：

$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

将多个css类分组到另一个类

3 个答案: