Question

我想使用saas中的变量管理图像的高度，而不是使用百分比，我想根据不同的颜色定义不同的值

如何在saas文件中执行此操作？

我这样做了，但是我收到了错误信息

Invalid CSS after "only screen ": expected media query list, was "{ $ratio: 24px }" on line 10

这是我做的：

// Small screens
@media only screen { $ration: 24px } 

@media only screen and (max-width: 40em) { $ration: 14px }

// Medium screens
@media only screen and (min-width: 40.063em) { $ration: 22px } 
@media only screen and (min-width: 40.063em) and (max-width: 64em) {$ration: 4px }


// Large screens
@media only screen and (min-width: 64.063em) {$ration: 24px } 

@media only screen and (min-width: 64.063em) and (max-width: 90em) {$ration: 24px } 

// XLarge screens
@media only screen and (min-width: 90.063em) { $ration: 24px } 

@media only screen and (min-width: 90.063em) and (max-width: 120em) { $ration: 24px } 

// XXLarge screens
@media only screen and (min-width: 120.063em) { $ration: 24px }

更新

//mobile:  320px,
//tablet:  740px,
//desktop: 980px,
//wide:    1300px


@function test() {
    @if ($HOW_TO_Get_WIDTH == 320px ) {

        return 22px;
    } @else if ($HOW_TO_Get_WIDTH == 740px) {
        @return 24px
    }
}

Answer 1

这是不可能的。触发器@media only screen发生在客户端。你可以像这样手工制作：

@media only screen and (min-width: 64.063em){
      $ration: 24px; // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $ration e.g.
      #wrapper{
          width: $ration; //or your needed property
      }
 }

@media only screen and (min-width: 40.063em){
    $ration: 22px;
    #wrapper{
        width: $ration;
    }   
}

示例http://jsfiddle.net/h3604jsr/2/

如何在CSS SASS上的不同屏幕上定义具有不同值的变量

1 个答案: