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;
}
$(function(){ obj.show(); });
$(function(){
function() {
$('body').on('mouseover', 'div',
function() {
$('.name', $(this)).show();
}
);
}
});
var obj = {
show: function() {
$('body div').mouseover(function() {
$('.name', $(this)).show();
} );
}
}
var obj = {
show: $('body').on('mouseover', 'div',
function() {
$('.name', $(this)).show();
}
);
}
<div class="hover_me">hover_me</div>
.hover_me {
width: 300px;
margin: 0 auto;
border: 10px solid grey;
padding: 20px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
transition: padding .5s 2s; //<= padding - свойство на которое влияет этот транзишон,
//.5s - время анимации, 2s - задержка анимации
//в данном случае получается, что при потере ховера
//в течении 2х секунд блок не будет возвращаться
//к первоначальному размеру, если в течении двух
//секунд опять будет ховер на блоке, то возврата
//к начальному состоянию не будет
}
.hover_me:hover {
transition: padding .5s; //<= здесь же не надо указывать задержку, чтобы анимация
//происходила сразу, хотя правильней буджет сказать, что
//тут указана задержка в 0 секунд (по дэфолту), при этом
//свойство указывать нужно иначе будет использовано
//свойство из обычного состояния объекта
padding: 60px 20px;
}