複数の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のようなものを追加してください。

これを行うより良い方法はありますか？私は色のコードでデータベースをやることができ、そのようにスタイルを行うことができますが、私はパフォーマンスのためにスタイルシートを好むでしょう。

Answer 1

なぜ、あなたは別の要素が必要な場合は、あなたが書くことができ、

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

とカラースタイリングを自動的にピックアップされますと言う

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

を書きません。

あなたには、いくつかの他のスタイリング（例えばフォントの太さを）したい場合は中央のバーに固有の代わりの

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

を書いてあなたは、uは、ネストされた達成することができますSCSS/SASSで

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

Answer 2

を記述します。あなたの目標に達するのを助けるクラス。

$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%); 
 
     } 
 
    } 
 
}

uはあなたがこれをコンパイルしたい場合は、単に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

のためのコンパイラを使用 .bg-col-white, .col-black, .col-black-darken

として、あなたのクラスを使用することができます

そして、あなたはあなたのPHPで、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; 

そして使用したい場合は、私がこのような何か（OFCテストが、uはどのように見えるか、それがすべき取得することができません）

<? 
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 Pre-processorを十分に使用することはお勧めできません。 SASS、LESS、Stylusなどがいくつかあります。

メイク長いCSSを書いはるかに簡単かつ迅速にあなたが必ずしもが出力されているCSSの量を減少させないことに注意する必要がありますが。

さまざまな機能があり、そのうちの1つがここで役立ちます。

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を与えることによって、私たちのマップを定義し、マップ内の各「状態」の項目は、対応する色の値を持っています。

私たちが背景色に単一のクラス名を使用すると、自動的にスピットアウトします。

これは、必要に応じて拡張できる1つのリストです。

ここで遊ぶことができます：Sassmeister