问:媒体查询SASS / SCSS-将代码与相同的媒体查询一起/在同一媒体查询下(媒体查询重复)

时间:2019-08-12 14:20:45

标签: css sass media-queries

是否有更好的方法可以在/具有相同的媒体查询下组合样式?

这是我的示例代码:

//Variables
$scr_small:450px;
$scr_mid:950px;
$scr_big:450px;

//Mixins
@mixin media_Q($width...){
    @if length($width) == 1{
        @media screen and (max-width: nth($width,1)){
            @content;           
        }
    }
    @if length($width) == 2{
        @media screen and (min-width: nth($width,1)) and (max-width: nth($width,2)){
            @content;
        }
    }
}

//SASS SCCS Code//

@media screen and (min-width: 1px){ 
  .class1 {
    position: fixed;
    background-color: red;

    @at-root (without: media){
    @include media_Q($scr_small+1,$scr_mid){
    background-color: blue;}}
  }

  .class2 {
    position: relative;
    max-width: 500px;

    @at-root (without: media){
    @include media_Q($scr_small+1,$scr_mid){
    max-width: 500px + 200px;}}

    @at-root (without: media){
    @include media_Q($scr_mid+1,$scr_big){
    max-width: 500px + 400px;}}
  }
  .class3 {
    position: absolute;
    font-size: 40px;

    @at-root (without: media){
    @include media_Q($scr_small+1,$scr_mid){
    font-size: 40px * 2;}}

    @at-root (without: media){
    @include media_Q($scr_mid+1,$scr_big){
    font-size: 40px * 2.5;}}
  }
}

我尝试使用@extend和占位符为%xx{ @at-root (without: media){@content;};的变量来替换代码中的变量,但是会显示错误消息。

我正在使用Dreamweaver 2019(支持SASS和SCSS)。我读到LESS不支持...但是这篇文章的日期是2017年,今天有什么变化吗?

我在这里找到了一个不错的解决方案:
https://medium.com/front-end-developers/the-solution-to-media-queries-in-sass-5493ebe16844#.5wquz66sn
但是有没有更好的代码可以自动执行此操作?

我希望最终的CSS像这样:

@media screen and (min-width: 1px) {
  .class1 {
    position: fixed;
    background-color: red;
  }
  .class2 {
    position: relative;
    max-width: 500px;
  }
  .class3 {
    position: absolute;
    font-size: 40px;
  }
}

@media screen and (min-width: 451px) and (max-width: 950px) {
  .class1 {
    background-color: blue;
  }

  .class2 {
    max-width: 700px;
  }
}
@media screen and (min-width: 951px) and (max-width: 450px) {
  .class2 {
    max-width: 900px;
  }
  .class3 {
    font-size: 100px;
  }
}

感谢任何可以帮助我的人。

0 个答案:

没有答案
相关问题