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

我的页面具有特定样式，适用于来自任何城市或州的人。因此，如果他们来自新泽西州，背景将是红色的。要做到这一点，现在我正在做这样的事情：将多个css类别分组到另一个类别

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之类的东西。

有没有更好的方法来做到这一点？我知道我可以使用颜色代码做一些数据库，并按照这种方式进行样式设计，但我更愿意在样式表上获得尽可能多的性能。

来源

2016-08-27 Kyle Dunne

为什么不写

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

而且颜色造型会自动拾取。

如果你想一些其他风格具体到中间条，而不是写

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

（比如字体重量）应写

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

来源

2016-08-27 08:25:23 Alohci

随着SCSS /上海社会科学院u能实现嵌套这些课程将帮助你达到你的目标。

$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可以使用你的类为.bg-col-white, .col-black, .col-black-darken

，只需安装NPM，然后使用编译器青菜

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

来源

2016-08-27 08:29:57 Mehow

我在这种情况下，我不能推荐使用CSS预处理器。有几个，SASS，LESS，手写笔等等。

本作写作长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

来源

2016-08-27 09:47:00

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

回答

相关问题