Sass @media instruction

Time:2022-6-5

In this section, we learn the@mediaInstructions,@mediaThe command is used to set the style rules to different media types, which is similar to the use rules of CSS, but it is also different@mediaInstructions can be nested in sass selectors. It is similar to the JS bubble function, which bubbles to the top of the stylesheet.

@Use of media instruction

Example:
.xkd{
    width: 300px;
    height: 100px;
    @media screen and (orientation: portrait) {
      width: 500px;
    }
}

Compile to CSS code:

.xkd {
  width: 300px;
  height: 100px;
}
@media screen and (orientation: portrait) {
  .xkd {
    width: 500px;
  }
}

orientationUsed to define whether the height of the visible area of the page in the output device is greater than or equal to the width. There are two optional values,portraitIndicates that the height of the visible area of the page in the specified output device is greater than or equal to the width, exceptportraitValues exceptlandscape

@Media supports nesting

Example:

For example, we are in a@mediaNested in another@media

@media screen {
    .xkd {
      @media (orientation: landscape) {
        color: #ccc;
      }
    }
}

Compile to CSS code:

@media screen and (orientation: landscape) {
  .xkd {
    color: #ccc;
  }
}

Recommended Today

P3120 [USACO15FEB]Cow Hopscotch G

portal ideas A simple idea is a\(O(n^2m^2)\)transfer of: \[f_{i,j}=\sum_{x=1}^{i-1}\sum_{y=1}^{j-1}f_{x,y}*[a_{i,j}!=a_{x,y}] \] There are so many constraints, thinking about using cdq divide and conquer to optimize we consider theRowdivide and conquer\([l,mid]\) Then brute force enumerationList,use\([l,mid]\)to update\((mid,r]\) enumerate columns each time\(j\)After the transfer, the\(\sum_{i=l}^{mid}f_{i,j}\)add to\(sum\), and update\(s[a_{i,j}]\)(used to subtract the contribution of the same number) The equation for […]