SCSS - 最好的方式来组织

林与SCSS工作，我想proberly结构代码.. 在不到它不是一个问题，但你会说这是正常构建像下面的代码..SCSS - 最好的方式来组织

想象那个按钮有它自己的文件。

@mixin button-basic { 
    .button { 
     font-size: 14px; 
    } 
} 

@mixin button-max-480 { 
    .button { 
     color: red; 
    } 
} 


@mixin button-max-767 { 
    .button { 
     color: green; 
    } 
} 

@mixin button-max-959 { 
    .button { 
     color: blue; 
    } 
} 

@mixin button-min-960 { 
    .button { 
     font-size: 34px; 
     color: purple; 
    } 
} 


@media print, screen { 
    @include button-basic(); 
}

在我的媒体查询文件..（想象一下，有多个包括每个媒体查询类型之内。）

@media (min-width: 960px) { 
    @include button-min-960(); 
} 

@media (max-width: 959px) { 
    @include button-max-959(); 
} 

@media (max-width: 767px) { 
    @include button-max-767(); 
} 

@media only screen and (max-width:480px) { 
    @include button-max-480(); 
}

来源

2016-11-15 Ghost1

我想说的是去代码审查堆栈交换这一个伴侣。 –

概览我可以建议将第二，第三和第四个mixin合并成一个单独的mixin，并将参数传递给它。根据参数，使用'@ if'语句可以更改颜色。就像'@mixin button-max（$ size）{' –

你可以用@mixins工作，但我不会推荐这种方法，因为这变得非常混乱。

我建议对每个变体使用修饰符类，并在声明中使用media-query。

.button { 

    &--red { 
     color: red; 
    } 

    &--green { 
     color: green; 
    } 

    &--blue { 
     color: blue; 
    } 

    @media (min-width: 768px) { 
     font-size: 1.125rem; 
    } 

    @media (min-width: 960px) { 
     font-size: 1.25rem; 
    } 

}

这样你就有了一个非常干净的代码库，并且可以将每个组件/模块分成它自己的文件。

来源

2016-11-15 14:32:31 marcobiedermann

'但是接下来我会为每个主要类我都有@media .. 它不仅仅是一个颜色的问题，也可以是容器的大小等。 I看到你的方式，即时通讯只是不确定它的“更好”的方式？：/ – Ghost1

这取决于...我绝对明白你的观点，我在那里。我强烈建议使用多个@media规则。正如我所提到的，这样你可以分割你的模块并单独测试每一个模块。特别是在较大的代码基础上，这对于可伸缩性和可维护性来说是完美的。也许这个会帮助你完成你的项目：https：//sass-guidelin.es/ – marcobiedermann

SCSS - 最好的方式来组织

回答

相关问题