gulp.task('frontend_sprite', function(){
// тело функции
});
gulp.task('frontend_img', ['frontend_sprite'], function(){ // будет ждать пока выполнится 'frontend_sprite' перед запуском
// тело функции
});
gulp.task('frontend_css', ['frontend_sprite'], function(){ // будет ждать пока выполнится 'frontend_sprite' перед запуском
// тело функции
});
gulp.task('frontend_css', ['union_css'], function(){ // будет ждать пока выполнится 'union_css' перед запуском
// тело функции
});
gulp.task('frontend_js', function(){
// тело функции
});
gulp.task('build', ['frontend_sprite', 'frontend_img', 'frontend_css', 'union_css', 'frontend_js']);
.mobile .flash,
.tablet .flash {
display: none;
}
Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries.Комбинирует одинаковые медиа запросы в один медиа запрос. Полезно для CSS сгенерированного с помощью препроцессоров с использованием вложенных медиа запросов. - (примерный перевод)
<div class="box">
<div class="block block_1">block # 1</div>
<div class="block block_2">block # 2</div>
<div class="block block_3">block # 3</div>
</div>
.box{
width: 400px;
margin: 50px auto;
}
.box:before {
background-color: rgb(100, 250, 100);
display: block;
content: "full";
}
.block {
width: 33.3333%;
height: 100px;
border: 1px dotted black;
box-sizing: border-box;
display: inline-block;
}
.block_1 {
float: none;
}
.block_2 {
float: left;
}
.block_3{
float: right;
}
@media (max-width: 600px) {
.box:before {
background-color: rgb(150, 150, 250);
content: "mobile";
}
.block_1 {
width: 100%;
}
.block_2 {
width: 50%;
}
.block_3{
width: 50%;
float: left;
}
}
.icon:after {
content: "";
font-size: 16px;
}
<div>
<div class="block1"></div>
</div>
<div>
<div class="block2"></div>
</div>
.block1 {
width: 100px;
height: 100px;
border: 1px solid black;
}
.block2 {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
left: 200px;
top: 10px;
}
.block2.when_block1_hover {
background-color: #333;
}
$(function(){
$('.block1').hover(function(){
$('.block2').addClass('when_block1_hover');
}, function(){
$('.block2').removeClass('when_block1_hover');
})
});
$(function(){
$('.some_block').height($('.some_block').width()/2.5);
$(window).resize(function(){
$('.some_block').height($('.some_block').width()/2.5);
});
});