- This is my first dabble into Sass mixins and includes.
我希望根据当前屏幕宽度改变一些列宽,我希望DRY方法是根据匹配(当前)@media选择设置一些全局Sass变量 .
我似乎错误地认为变量将在匹配的@media语句改变时重新评估 - 例如设备旋转 . 不 .
我想最终得到一组类(在@media部分之外),它们使用@media选择的适当值, rather than 必须在每个单独的@media部分重述类,例如:
th.employee-name {
width: $column_employee_name;
}
我看到的是@mixin被调用所有媒体宽度,并且最后一次调用它确定变量的最终值 .
Question: Is there a way of achieving what I am trying to do - ie a DRY solution?
@mixin column-definitions($app) {
@if $app == "mobile" {
$column_employee_name : 130px !global;
$column_business_role : 135px !global;
$column_company : 020px !global;
$column_company_heading: 'Tel' !global;
$column_dept : 075px !global;
$column_extension : 085px !global;
$column_personal : 150px !global;
$column_nextofkin : 150px !global;
$table_width : $column_business_role + $column_company + $column_employee_name !global;
}
@else {
$column_employee_name : 200px !global;
$column_business_role : 250px !global;
$column_company : 150px !global;
$column_company_heading: 'S & B Mobile' !global;
$column_dept : 075px !global;
$column_extension : 085px !global;
$column_personal : 150px !global;
$column_nextofkin : 150px !global;
$table_width : $column_business_role + $column_company + $column_dept + $column_extension + $column_employee_name + $column_personal + $column_nextofkin + 20px !global;
}
}
@media only screen and (max-width: 420px) {
$app : mobile !global;
@include column-definitions($app);
// a.mobile-number { // display: none; // }
}
@media only screen and (min-width:421px) {
$app : pc !global;
@include column-definitions($app);
// a.mobile-icon { // display: none; // }
}
1 回答
我已经想出如何保持这种干燥 . 在下面的示例中,根据更改的屏幕宽度可变宽度的和类在 @mixin column-definitions 中列出一次
有两个 @media queries ,首先设置每个变量所需的变量,然后 @include column-definitions
顺便说一句 - 我已经使用了全局变量用于不会相应改变其宽度的列 .
Simples!