<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam est fugit mollitia nisi quam qui! Aliquam aliquid consequatur dolorem ea, expedita ipsam laborum, mollitia praesentium, quidem sed voluptas?</div>
<style>
#test {
color: red;
}
#test:hover {
color: green;
transition: color 3s ease;
}
</style>
#test {
color: black;
transition: color 1s ease;
}
#test:hover {
color: red;
transition: color 5s ease;
}
gulp.watch('./dist/scss/*.scss'
/dist
/scss
main.scss - отслеживается
/blocks
header.scss - не отслеживается
gulp.watch('./dist/scss/**/*.scss', gulp.series('sass'));
<div class="section">
<div class="container">
<div class="slider">
</div>
</div>
</div>
.section {
overflow: hidden;
}
.container {
width: 1000px;
margin: auto;
padding: 10px 0;
background: green;
}
.slider {
height: 100px;
background:red;
width: calc(50% + 50vw);
}
<div class="div">75</div>
.div {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 30px;
}
.div::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 20px solid red;
border-color: red red green green;
border-radius: 100%;
transform: rotate(45deg);
pointer-events: none;
}
<meta name="color-scheme" content="only light">
@media (prefers-color-scheme: dark) {
.selector { }
}
:root {
--small-screen: 500px;
}
.sidebar { background: red; }
@media (max-width: var(--small-screen)) {
:root {
--small-screen: 1000px;
}
.sidebar { background: green; }
}
dist/
css/
style.css
images/
image.png
src/
images/
image.png
sass/
blocks/
logo.scss
styles.scss
.logo { background: url(../images/image.png); }
.logo { background: url(../../images/image.png); }
.logo { background: url(/images/image.png); }
%cursor-pointer {
cursor:pointer;
}
.product {
&.grid .grid-product__text:not(._price),
&.grid .grid-product__text._price,
&.grid .grid-product__text .grid-product__text_inner {
color: inherit !important;
}
&._photo-name-transition {
._name,
._image {
@extend %cursor-pointer;
}
}
&._name-transition {
._name {
@extend %cursor-pointer;
}
}
&._photo-transition {
._image {
@extend %cursor-pointer;
}
}
}
.product._photo-name-transition ._name,
.product._photo-name-transition ._image,
.product._name-transition ._name,
.product._photo-transition ._image {
cursor: pointer;
}
.product.grid .grid-product__text:not(._price),
.product.grid .grid-product__text._price,
.product.grid .grid-product__text .grid-product__text_inner {
color: inherit !important;
}