需要在页面的一个部分中输入媒体查询才能在另一个部分中使用它吗?SCSS/SASS
我正在使用带有SCSS变量和mixin的标准webpack构建。出于某种原因,我无法在该站点的某个部分上的媒体查询中覆盖样式,除非我在使用断点的前一部分中放置了相同的媒体查询。这是我的密码: \u variables.scss需要在页面的一个部分中输入媒体查询才能在另一个部分中使用它吗?SCSS/SASS,css,sass,media,Css,Sass,Media,我正在使用带有SCSS变量和mixin的标准webpack构建。出于某种原因,我无法在该站点的某个部分上的媒体查询中覆盖样式,除非我在使用断点的前一部分中放置了相同的媒体查询。这是我的密码: \u variables.scss $sm-screen: 576px; $md-screen: 768px; $lg-screen: 992px; $xl-screen: 1200px; @mixin sm-screen { @media screen and (min-width: #{$sm-s
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
@mixin sm-screen {
@media screen and (min-width: #{$sm-screen}) {
@content;
}
}
@mixin md-screen {
@media screen and (min-width: #{$md-screen}) {
@content;
}
}
@mixin lg-screen {
@media screen and (min-width: #{$lg-screen}) {
@content;
}
}
@mixin xl-screen {
@media screen and (min-width: #{$xl-screen}) {
@content;
}
}
@mixin screen-size($screen) {
@media screen and (min-width: $screen) {
@content;
}
}
// ————————————————————————————————————————————————————————————
// COLORS
// ————————————————————————————————————————————————————————————
$grey-01: #181F2C;
$grey-02: #70849f;
$grey-03: #E0E5EE;
$blue-01: #A0AFC3;
$green-01: #0C7C25;
$green-01-hover: darken($green-01, 8%);
// ————————————————————————————————————————————————————————————
// GENERAL
// ————————————————————————————————————————————————————————————
$dur: 0.25s;
$skew: 32;
// ————————————————————————————————————————————————————————————
// BREAKPOINTS
// ————————————————————————————————————————————————————————————
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
body.home {
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: stretch;
.left-side,
.right-side {
width: 50%;
overflow: hidden;
position: relative;
background: $grey-01;
flex-grow: 1;
will-change: width;
transition: width $dur ease;
&.tap-active {
width: 150%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.hero-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: skew(#{$skew}deg);
transition: all $dur ease;
margin: 0 #{$skew}vh;
width: calc(100vw - 10%);
}
.hero-heading {
font-size: 22vw;
text-align: center;
line-height: 0.9;
.h-underline {
background: none;
}
}
.hero-btn {
margin-top: 30px;
@media screen and (max-width: $lg-screen - 1px) {
&.btn-disabled {
pointer-events: none;
}
}
}
.hero-img {
background: transparent center center/cover no-repeat;
background-blend-mode: luminosity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skew(#{$skew}deg);
transition: all $dur ease;
}
.left-side {
transform: skew(-#{$skew}deg);
margin-left: -#{$skew}vh;
margin-right: 1px;
.hero-content {
right: -#{$skew}vh;
margin: 0 #{$skew}vh 0 0;
}
.hero-btn {
margin-bottom: 20vh;
}
.hero-img {
right: -#{$skew}vh;
}
}
.right-side {
transform: skew(-#{$skew}deg);
margin-right: -#{$skew}vh;
margin-left: 1px;
.hero-content {
left: -#{$skew}vh;
}
.hero-heading {
margin-top: 20vh;
}
.hero-img {
left: -#{$skew}vh;
}
}
@include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
@include lg-screen {
.left-side,
.right-side {
.hero-content {
margin: 0;
}
&:hover {
width: 70%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
width: 50vw;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.left-side {
.hero-content {
margin-left: -#{$skew}vh;
}
.hero-btn {
margin-bottom: 0;
}
}
.right-side {
.hero-heading {
margin-top: 0;
}
}
}
@include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// CLIENT LOGOS
// ————————————————————————————————————————————————————————————
#client-logos {
padding: 15px 0;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 25%;
max-width: 100px;
top: 0;
z-index: 1;
pointer-events: none;
}
&:before {
left: 0;
background: linear-gradient(to right, white, white 15%, rgba(white, 0));
}
&:after {
right: 0;
background: linear-gradient(to left, white, white 15%, rgba(white, 0));
}
.glide__slides {
align-items: center;
}
.glide__slide {
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
display: block;
max-width: 100%;
max-height: 15vw;
}
@include screen-size(800px) {
padding: 25px 0;
.client-logo {
max-height: 70px;
max-width: 125px;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
background: $grey-01 center center/cover no-repeat;
padding: 60px 0;
color: white;
text-align: center;
.intro-heading {
margin-bottom: 30px;
}
.intro-text {
margin-bottom: 40px;
}
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
.icon-wrapper {
display: block;
padding-top: 75px;
background: center top/65px no-repeat;
margin-bottom: 25px;
position: relative;
&:not(:last-of-type):after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
width: 45px;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
.icon-heading {
padding-bottom: 0;
}
}
.icon-heading {
padding-bottom: 25px;
}
}
@include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
&:before,
&:after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:before {
width: 1px;
height: 80%;
}
&:after {
width: 80%;
height: 1px;
}
}
.icon-wrapper {
margin: 30px;
&:not(:last-of-type):after {
display: none;
}
.icon-heading {
padding: 0;
}
}
}
@include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
&:before,
&:after {
display: none;
}
}
.icon-wrapper {
margin: 0;
padding-right: 60px;
padding-left: 60px;
&:not(:last-of-type):after {
display: block;
height: 45px;
width: 1px;
left: 100%;
bottom: 50%;
transform: translate(0, 50%);
}
}
}
}
// ————————————————————————————————————————————————————————————
// FEATURED VIDEO
// ————————————————————————————————————————————————————————————
#featured-video {
position: relative;
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 4;
@include flex-center;
text-align: center;
// background: url(../assets/images/video-poster.jpg) center bottom/cover no-repeat $orange-01;
}
.fancy-title {
display: none;
}
h2 {
display: none;
}
.play-video-btn {
// @extend .btn-text;
cursor: pointer;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
margin-top: 26px;
&:before {
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 26px solid white;
margin-bottom: 32px;
margin-right: -9px;
}
&:after {
content: "";
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.2s ease;
top: -27px;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
&:after {
transform: translateX(-50%) scale(1.1);
}
}
}
@include sm-screen {
h2 {
display: block;
color: white;
font-size: 10vw;
margin-bottom: 5%;
}
}
@include md-screen {
.fancy-title {
display: inline-block;
}
}
@include xl-screen {
h2 {
font-size: 8rem;
}
}
}
}
\u mixins.scss
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
@mixin sm-screen {
@media screen and (min-width: #{$sm-screen}) {
@content;
}
}
@mixin md-screen {
@media screen and (min-width: #{$md-screen}) {
@content;
}
}
@mixin lg-screen {
@media screen and (min-width: #{$lg-screen}) {
@content;
}
}
@mixin xl-screen {
@media screen and (min-width: #{$xl-screen}) {
@content;
}
}
@mixin screen-size($screen) {
@media screen and (min-width: $screen) {
@content;
}
}
// ————————————————————————————————————————————————————————————
// COLORS
// ————————————————————————————————————————————————————————————
$grey-01: #181F2C;
$grey-02: #70849f;
$grey-03: #E0E5EE;
$blue-01: #A0AFC3;
$green-01: #0C7C25;
$green-01-hover: darken($green-01, 8%);
// ————————————————————————————————————————————————————————————
// GENERAL
// ————————————————————————————————————————————————————————————
$dur: 0.25s;
$skew: 32;
// ————————————————————————————————————————————————————————————
// BREAKPOINTS
// ————————————————————————————————————————————————————————————
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
body.home {
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: stretch;
.left-side,
.right-side {
width: 50%;
overflow: hidden;
position: relative;
background: $grey-01;
flex-grow: 1;
will-change: width;
transition: width $dur ease;
&.tap-active {
width: 150%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.hero-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: skew(#{$skew}deg);
transition: all $dur ease;
margin: 0 #{$skew}vh;
width: calc(100vw - 10%);
}
.hero-heading {
font-size: 22vw;
text-align: center;
line-height: 0.9;
.h-underline {
background: none;
}
}
.hero-btn {
margin-top: 30px;
@media screen and (max-width: $lg-screen - 1px) {
&.btn-disabled {
pointer-events: none;
}
}
}
.hero-img {
background: transparent center center/cover no-repeat;
background-blend-mode: luminosity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skew(#{$skew}deg);
transition: all $dur ease;
}
.left-side {
transform: skew(-#{$skew}deg);
margin-left: -#{$skew}vh;
margin-right: 1px;
.hero-content {
right: -#{$skew}vh;
margin: 0 #{$skew}vh 0 0;
}
.hero-btn {
margin-bottom: 20vh;
}
.hero-img {
right: -#{$skew}vh;
}
}
.right-side {
transform: skew(-#{$skew}deg);
margin-right: -#{$skew}vh;
margin-left: 1px;
.hero-content {
left: -#{$skew}vh;
}
.hero-heading {
margin-top: 20vh;
}
.hero-img {
left: -#{$skew}vh;
}
}
@include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
@include lg-screen {
.left-side,
.right-side {
.hero-content {
margin: 0;
}
&:hover {
width: 70%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
width: 50vw;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.left-side {
.hero-content {
margin-left: -#{$skew}vh;
}
.hero-btn {
margin-bottom: 0;
}
}
.right-side {
.hero-heading {
margin-top: 0;
}
}
}
@include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// CLIENT LOGOS
// ————————————————————————————————————————————————————————————
#client-logos {
padding: 15px 0;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 25%;
max-width: 100px;
top: 0;
z-index: 1;
pointer-events: none;
}
&:before {
left: 0;
background: linear-gradient(to right, white, white 15%, rgba(white, 0));
}
&:after {
right: 0;
background: linear-gradient(to left, white, white 15%, rgba(white, 0));
}
.glide__slides {
align-items: center;
}
.glide__slide {
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
display: block;
max-width: 100%;
max-height: 15vw;
}
@include screen-size(800px) {
padding: 25px 0;
.client-logo {
max-height: 70px;
max-width: 125px;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
background: $grey-01 center center/cover no-repeat;
padding: 60px 0;
color: white;
text-align: center;
.intro-heading {
margin-bottom: 30px;
}
.intro-text {
margin-bottom: 40px;
}
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
.icon-wrapper {
display: block;
padding-top: 75px;
background: center top/65px no-repeat;
margin-bottom: 25px;
position: relative;
&:not(:last-of-type):after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
width: 45px;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
.icon-heading {
padding-bottom: 0;
}
}
.icon-heading {
padding-bottom: 25px;
}
}
@include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
&:before,
&:after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:before {
width: 1px;
height: 80%;
}
&:after {
width: 80%;
height: 1px;
}
}
.icon-wrapper {
margin: 30px;
&:not(:last-of-type):after {
display: none;
}
.icon-heading {
padding: 0;
}
}
}
@include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
&:before,
&:after {
display: none;
}
}
.icon-wrapper {
margin: 0;
padding-right: 60px;
padding-left: 60px;
&:not(:last-of-type):after {
display: block;
height: 45px;
width: 1px;
left: 100%;
bottom: 50%;
transform: translate(0, 50%);
}
}
}
}
// ————————————————————————————————————————————————————————————
// FEATURED VIDEO
// ————————————————————————————————————————————————————————————
#featured-video {
position: relative;
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 4;
@include flex-center;
text-align: center;
// background: url(../assets/images/video-poster.jpg) center bottom/cover no-repeat $orange-01;
}
.fancy-title {
display: none;
}
h2 {
display: none;
}
.play-video-btn {
// @extend .btn-text;
cursor: pointer;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
margin-top: 26px;
&:before {
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 26px solid white;
margin-bottom: 32px;
margin-right: -9px;
}
&:after {
content: "";
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.2s ease;
top: -27px;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
&:after {
transform: translateX(-50%) scale(1.1);
}
}
}
@include sm-screen {
h2 {
display: block;
color: white;
font-size: 10vw;
margin-bottom: 5%;
}
}
@include md-screen {
.fancy-title {
display: inline-block;
}
}
@include xl-screen {
h2 {
font-size: 8rem;
}
}
}
}
main.scss(导入文件的位置)
\u home.scss(这里是问题所在) …如您所料,字体大小会正确覆盖: 当我在本节中使用相同的mixin时,中间断点会覆盖xl断点:
下面是踢球者: 当我在
英雄部分
代码中添加一个中等断点时,断点在简介部分
中的工作与预期一样:
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
.hero-heading {
font-size: 2rem;
}
@include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
@include md-screen {
.hero-heading {
font-size: 5rem;
}
}
@include lg-screen {
.hero-heading {
font-size: 6.5rem;
}
}
@include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
@include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
}
@include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
}
}
}
这是为什么
编辑: 这是我的整个
\u home.scss
和\u variables.scss
文件。当我注释掉所有的英雄部分
,其他一切都正常。英雄部分肯定有一个bug,但我就是没发现
\u variables.scss
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
@mixin sm-screen {
@media screen and (min-width: #{$sm-screen}) {
@content;
}
}
@mixin md-screen {
@media screen and (min-width: #{$md-screen}) {
@content;
}
}
@mixin lg-screen {
@media screen and (min-width: #{$lg-screen}) {
@content;
}
}
@mixin xl-screen {
@media screen and (min-width: #{$xl-screen}) {
@content;
}
}
@mixin screen-size($screen) {
@media screen and (min-width: $screen) {
@content;
}
}
// ————————————————————————————————————————————————————————————
// COLORS
// ————————————————————————————————————————————————————————————
$grey-01: #181F2C;
$grey-02: #70849f;
$grey-03: #E0E5EE;
$blue-01: #A0AFC3;
$green-01: #0C7C25;
$green-01-hover: darken($green-01, 8%);
// ————————————————————————————————————————————————————————————
// GENERAL
// ————————————————————————————————————————————————————————————
$dur: 0.25s;
$skew: 32;
// ————————————————————————————————————————————————————————————
// BREAKPOINTS
// ————————————————————————————————————————————————————————————
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
body.home {
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: stretch;
.left-side,
.right-side {
width: 50%;
overflow: hidden;
position: relative;
background: $grey-01;
flex-grow: 1;
will-change: width;
transition: width $dur ease;
&.tap-active {
width: 150%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.hero-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: skew(#{$skew}deg);
transition: all $dur ease;
margin: 0 #{$skew}vh;
width: calc(100vw - 10%);
}
.hero-heading {
font-size: 22vw;
text-align: center;
line-height: 0.9;
.h-underline {
background: none;
}
}
.hero-btn {
margin-top: 30px;
@media screen and (max-width: $lg-screen - 1px) {
&.btn-disabled {
pointer-events: none;
}
}
}
.hero-img {
background: transparent center center/cover no-repeat;
background-blend-mode: luminosity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skew(#{$skew}deg);
transition: all $dur ease;
}
.left-side {
transform: skew(-#{$skew}deg);
margin-left: -#{$skew}vh;
margin-right: 1px;
.hero-content {
right: -#{$skew}vh;
margin: 0 #{$skew}vh 0 0;
}
.hero-btn {
margin-bottom: 20vh;
}
.hero-img {
right: -#{$skew}vh;
}
}
.right-side {
transform: skew(-#{$skew}deg);
margin-right: -#{$skew}vh;
margin-left: 1px;
.hero-content {
left: -#{$skew}vh;
}
.hero-heading {
margin-top: 20vh;
}
.hero-img {
left: -#{$skew}vh;
}
}
@include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
@include lg-screen {
.left-side,
.right-side {
.hero-content {
margin: 0;
}
&:hover {
width: 70%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
width: 50vw;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.left-side {
.hero-content {
margin-left: -#{$skew}vh;
}
.hero-btn {
margin-bottom: 0;
}
}
.right-side {
.hero-heading {
margin-top: 0;
}
}
}
@include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// CLIENT LOGOS
// ————————————————————————————————————————————————————————————
#client-logos {
padding: 15px 0;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 25%;
max-width: 100px;
top: 0;
z-index: 1;
pointer-events: none;
}
&:before {
left: 0;
background: linear-gradient(to right, white, white 15%, rgba(white, 0));
}
&:after {
right: 0;
background: linear-gradient(to left, white, white 15%, rgba(white, 0));
}
.glide__slides {
align-items: center;
}
.glide__slide {
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
display: block;
max-width: 100%;
max-height: 15vw;
}
@include screen-size(800px) {
padding: 25px 0;
.client-logo {
max-height: 70px;
max-width: 125px;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
background: $grey-01 center center/cover no-repeat;
padding: 60px 0;
color: white;
text-align: center;
.intro-heading {
margin-bottom: 30px;
}
.intro-text {
margin-bottom: 40px;
}
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
.icon-wrapper {
display: block;
padding-top: 75px;
background: center top/65px no-repeat;
margin-bottom: 25px;
position: relative;
&:not(:last-of-type):after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
width: 45px;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
.icon-heading {
padding-bottom: 0;
}
}
.icon-heading {
padding-bottom: 25px;
}
}
@include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
&:before,
&:after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:before {
width: 1px;
height: 80%;
}
&:after {
width: 80%;
height: 1px;
}
}
.icon-wrapper {
margin: 30px;
&:not(:last-of-type):after {
display: none;
}
.icon-heading {
padding: 0;
}
}
}
@include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
&:before,
&:after {
display: none;
}
}
.icon-wrapper {
margin: 0;
padding-right: 60px;
padding-left: 60px;
&:not(:last-of-type):after {
display: block;
height: 45px;
width: 1px;
left: 100%;
bottom: 50%;
transform: translate(0, 50%);
}
}
}
}
// ————————————————————————————————————————————————————————————
// FEATURED VIDEO
// ————————————————————————————————————————————————————————————
#featured-video {
position: relative;
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 4;
@include flex-center;
text-align: center;
// background: url(../assets/images/video-poster.jpg) center bottom/cover no-repeat $orange-01;
}
.fancy-title {
display: none;
}
h2 {
display: none;
}
.play-video-btn {
// @extend .btn-text;
cursor: pointer;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
margin-top: 26px;
&:before {
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 26px solid white;
margin-bottom: 32px;
margin-right: -9px;
}
&:after {
content: "";
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.2s ease;
top: -27px;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
&:after {
transform: translateX(-50%) scale(1.1);
}
}
}
@include sm-screen {
h2 {
display: block;
color: white;
font-size: 10vw;
margin-bottom: 5%;
}
}
@include md-screen {
.fancy-title {
display: inline-block;
}
}
@include xl-screen {
h2 {
font-size: 8rem;
}
}
}
}
\u home.scss
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
@mixin sm-screen {
@media screen and (min-width: #{$sm-screen}) {
@content;
}
}
@mixin md-screen {
@media screen and (min-width: #{$md-screen}) {
@content;
}
}
@mixin lg-screen {
@media screen and (min-width: #{$lg-screen}) {
@content;
}
}
@mixin xl-screen {
@media screen and (min-width: #{$xl-screen}) {
@content;
}
}
@mixin screen-size($screen) {
@media screen and (min-width: $screen) {
@content;
}
}
// ————————————————————————————————————————————————————————————
// COLORS
// ————————————————————————————————————————————————————————————
$grey-01: #181F2C;
$grey-02: #70849f;
$grey-03: #E0E5EE;
$blue-01: #A0AFC3;
$green-01: #0C7C25;
$green-01-hover: darken($green-01, 8%);
// ————————————————————————————————————————————————————————————
// GENERAL
// ————————————————————————————————————————————————————————————
$dur: 0.25s;
$skew: 32;
// ————————————————————————————————————————————————————————————
// BREAKPOINTS
// ————————————————————————————————————————————————————————————
$sm-screen: 576px;
$md-screen: 768px;
$lg-screen: 992px;
$xl-screen: 1200px;
body.home {
// ————————————————————————————————————————————————————————————
// HERO SECTION
// ————————————————————————————————————————————————————————————
#hero-section {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: stretch;
.left-side,
.right-side {
width: 50%;
overflow: hidden;
position: relative;
background: $grey-01;
flex-grow: 1;
will-change: width;
transition: width $dur ease;
&.tap-active {
width: 150%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.hero-content {
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: white;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: skew(#{$skew}deg);
transition: all $dur ease;
margin: 0 #{$skew}vh;
width: calc(100vw - 10%);
}
.hero-heading {
font-size: 22vw;
text-align: center;
line-height: 0.9;
.h-underline {
background: none;
}
}
.hero-btn {
margin-top: 30px;
@media screen and (max-width: $lg-screen - 1px) {
&.btn-disabled {
pointer-events: none;
}
}
}
.hero-img {
background: transparent center center/cover no-repeat;
background-blend-mode: luminosity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: skew(#{$skew}deg);
transition: all $dur ease;
}
.left-side {
transform: skew(-#{$skew}deg);
margin-left: -#{$skew}vh;
margin-right: 1px;
.hero-content {
right: -#{$skew}vh;
margin: 0 #{$skew}vh 0 0;
}
.hero-btn {
margin-bottom: 20vh;
}
.hero-img {
right: -#{$skew}vh;
}
}
.right-side {
transform: skew(-#{$skew}deg);
margin-right: -#{$skew}vh;
margin-left: 1px;
.hero-content {
left: -#{$skew}vh;
}
.hero-heading {
margin-top: 20vh;
}
.hero-img {
left: -#{$skew}vh;
}
}
@include sm-screen {
.hero-heading {
font-size: 5rem;
}
}
@include lg-screen {
.left-side,
.right-side {
.hero-content {
margin: 0;
}
&:hover {
width: 70%;
.hero-content {
visibility: visible;
opacity: 1;
margin: 0 #{$skew}vh;
width: 50vw;
}
.hero-img {
opacity: 0.12;
background-color: $grey-01;
}
}
}
.left-side {
.hero-content {
margin-left: -#{$skew}vh;
}
.hero-btn {
margin-bottom: 0;
}
}
.right-side {
.hero-heading {
margin-top: 0;
}
}
}
@include xl-screen {
.hero-heading {
font-size: 6.5rem;
}
}
}
// ————————————————————————————————————————————————————————————
// CLIENT LOGOS
// ————————————————————————————————————————————————————————————
#client-logos {
padding: 15px 0;
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
height: 100%;
width: 25%;
max-width: 100px;
top: 0;
z-index: 1;
pointer-events: none;
}
&:before {
left: 0;
background: linear-gradient(to right, white, white 15%, rgba(white, 0));
}
&:after {
right: 0;
background: linear-gradient(to left, white, white 15%, rgba(white, 0));
}
.glide__slides {
align-items: center;
}
.glide__slide {
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
display: block;
max-width: 100%;
max-height: 15vw;
}
@include screen-size(800px) {
padding: 25px 0;
.client-logo {
max-height: 70px;
max-width: 125px;
}
}
}
// ————————————————————————————————————————————————————————————
// INTRO SECTION
// ————————————————————————————————————————————————————————————
#intro-section {
background: $grey-01 center center/cover no-repeat;
padding: 60px 0;
color: white;
text-align: center;
.intro-heading {
margin-bottom: 30px;
}
.intro-text {
margin-bottom: 40px;
}
.icon-group {
list-style: none;
padding: 0;
margin-bottom: 50px;
}
.icon-wrapper {
display: block;
padding-top: 75px;
background: center top/65px no-repeat;
margin-bottom: 25px;
position: relative;
&:not(:last-of-type):after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
width: 45px;
height: 1px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
.icon-heading {
padding-bottom: 0;
}
}
.icon-heading {
padding-bottom: 25px;
}
}
@include md-screen {
.icon-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
&:before,
&:after {
content: '';
display: block;
background: $blue-01;
opacity: 0.6;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
&:before {
width: 1px;
height: 80%;
}
&:after {
width: 80%;
height: 1px;
}
}
.icon-wrapper {
margin: 30px;
&:not(:last-of-type):after {
display: none;
}
.icon-heading {
padding: 0;
}
}
}
@include xl-screen {
.icon-group {
display: flex;
max-width: none;
justify-content: center;
&:before,
&:after {
display: none;
}
}
.icon-wrapper {
margin: 0;
padding-right: 60px;
padding-left: 60px;
&:not(:last-of-type):after {
display: block;
height: 45px;
width: 1px;
left: 100%;
bottom: 50%;
transform: translate(0, 50%);
}
}
}
}
// ————————————————————————————————————————————————————————————
// FEATURED VIDEO
// ————————————————————————————————————————————————————————————
#featured-video {
position: relative;
.video-poster {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 4;
@include flex-center;
text-align: center;
// background: url(../assets/images/video-poster.jpg) center bottom/cover no-repeat $orange-01;
}
.fancy-title {
display: none;
}
h2 {
display: none;
}
.play-video-btn {
// @extend .btn-text;
cursor: pointer;
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 1rem;
margin-top: 26px;
&:before {
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 26px solid white;
margin-bottom: 32px;
margin-right: -9px;
}
&:after {
content: "";
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
border: 2px solid white;
transition: all 0.2s ease;
top: -27px;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
&:after {
transform: translateX(-50%) scale(1.1);
}
}
}
@include sm-screen {
h2 {
display: block;
color: white;
font-size: 10vw;
margin-bottom: 5%;
}
}
@include md-screen {
.fancy-title {
display: inline-block;
}
}
@include xl-screen {
h2 {
font-size: 8rem;
}
}
}
}
我能够使用一个类名和其中包含的所有
@include
实现这一点。这将按照声明的线性顺序呈现每个@media
查询块
英雄部分{
.英雄头像{
字号:2rem;
@包括sm屏幕{
字体大小:5rem;
}
@包括lg屏幕{
字体大小:6.5rem;
}
@包括xl屏幕{
字体大小:6.5rem;
}
}
}
#介绍部分{
.图标组{
列表样式:无;
填充:0;
边缘底部:50px;
@包括md屏幕{
显示:网格;
网格模板列:重复(2,1fr);
最大宽度:600px;
左边距:自动;
右边距:自动;
位置:相对位置;
}
@包括xl屏幕{
显示器:flex;
最大宽度:无;
证明内容:中心;
}
}
}所有scss文件都可以使用您的变量吗?是的,它们在导入之前就开始工作了(从Chrome inspector屏幕截图中可以看到)。不要发布代码、数据、错误消息等的图像-复制或在问题中键入文本@AndyHoffman,这是一个直接引用,包括粗体和大写,来自我链接到的SO规则。如果你不同意SO管理员的意见,就和他们谈谈。@Rob我仍然觉得为新访客服务太难了。我们可以改变规则,不是吗?这正是我所期望的。如果您可以看一下的话,我刚刚在原始问题中添加了
\u variables.scss
和\u home.scss
的所有代码。这可能是主页部分的一个bug。@Koshua将结构更改为我正在使用的结构,使jsFiddle
从您在原始文章(编辑之前)开始工作。人们是否愿意调试您的整个SCSS
文件是值得怀疑的。这不是SO的真正目的。好吧,对SO来说还是有点陌生。我可以更改它,使媒体查询直接位于节中,而不是特定类()中。它仍然有效,但出于某种原因,除非我将@include md screen{}
添加到HERO部分,否则它不是我的代码吗。我知道它应该如何工作(在我们的小提琴中),但这个bug不是我以前在我的代码中遇到的应该工作的bug,我已经把它解决了。当我注释掉英雄部分的@include xl屏幕
媒体查询时,简介部分的图标组
会正常工作。仍然不确定原因。在计算的CSS中,md屏幕
媒体查询在CSS文件中的输出晚于xl屏幕
媒体查询。这就是问题所在。你知道这是什么原因吗?这与mixin的编译方式有关吗?