是否有更好的方法可以在/具有相同的媒体查询下组合样式?
这是我的示例代码:
//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;
}
}
感谢任何可以帮助我的人。