Sass:基于@media设置$vars 这是我第一次涉足Sass混合和包含。
我希望根据当前屏幕宽度更改一些列宽,我希望采用干式方法,根据匹配的(当前)@媒体选择设置一些全局Sass变量 我似乎错误地认为,当匹配的@media语句发生变化时,变量将被重新计算,例如设备旋转。没有 最后,我只想提供一组类(在@media部分之外),这些类为@media选择使用适当的值,而不是必须在每个单独的@media部分中重述这些类,例如Sass:基于@media设置$vars 这是我第一次涉足Sass混合和包含。,sass,Sass,我希望根据当前屏幕宽度更改一些列宽,我希望采用干式方法,根据匹配的(当前)@媒体选择设置一些全局Sass变量 我似乎错误地认为,当匹配的@media语句发生变化时,变量将被重新计算,例如设备旋转。没有 最后,我只想提供一组类(在@media部分之外),这些类为@media选择使用适当的值,而不是必须在每个单独的@media部分中重述这些类,例如 th.employee-name { width: $column_employee_name; } 我看到的是@mixin是为所有媒体宽度调用
th.employee-name {
width: $column_employee_name;
}
我看到的是@mixin是为所有媒体宽度调用的,最后一次调用它决定了变量的最终值
问题:有没有一种方法可以实现我想做的事情(即干法解决方案)?
@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; // }
}
我已经知道如何保持这个干燥。在以下示例中,根据不断变化的屏幕宽度,宽度可变的和类在@mixin列定义中列出一次 有两个@媒体查询,首先设置每个变量所需的变量,然后@包括列定义 顺便说一句,我已经为列使用了全局变量,这些列不会相应地改变其宽度 傻瓜
$column_dept : 075px !global;
$column_extension : 085px !global;
$column_personal : 150px !global;
$column_nextofkin : 150px !global;
@mixin column-definitions($column_employee_name, $column_business_role, $column_company, $column_company_heading) {
th.employee-name,
td.employee-name {
width : $column_employee_name;
max-width: $column_employee_name;
min-width: $column_employee_name;
}
td.business-role,
th.business-role {
max-width: $column_business_role;
min-width: $column_business_role;
}
td.company-mobile,
th.company-mobile {
max-width: $column_company;
min-width: $column_company;
}
th.company-mobile::before {
content: $column_company_heading;
}
}
@media only screen and (max-width: 420px) {
$column_employee_name : 130px !global;
$column_business_role : 135px !global;
$column_company : 020px !global;
$column_company_heading: 'Tel' !global;
@include column-definitions($column_employee_name, $column_business_role, $column_company, $column_company_heading);
$table_width : $column_business_role + $column_company + $column_employee_name !global;
a.mobile-number { display: none; }
}
@media only screen and (min-width:421px) {
$column_employee_name : 200px !global;
$column_business_role : 250px !global;
$column_company : 150px !global;
$column_company_heading: 'S & B Mobile' !global;
@include column-definitions($column_employee_name, $column_business_role, $column_company, $column_company_heading);
$table_width : $column_business_role + $column_company + $column_dept + $column_extension + $column_employee_name + $column_personal + $column_nextofkin + 20px !global;
a.mobile-icon { display: none; }
}