时间戳

首页 > 解决方案 > Sass : 根据@media 设置 $vars

sass - Sass : 根据@media 设置 $vars

问题描述

我希望根据当前屏幕宽度更改一些列宽度，我希望 DRY 方法是根据匹配的（当前）@media 选择设置一些全局 Sass 变量。

我似乎错误地假设变量会随着匹配的@media 语句的变化而被重新评估——例如设备旋转。没有。

我想最终只得到一组类（@media 部分之外），它们使用适当的值进行@media 选择，而不是必须在每个单独的 @media 部分中重述类，例如

th.employee-name {
   width: $column_employee_name;
}

我看到的是所有媒体宽度都调用了@mixin，最后一次调用它决定了变量的最终值。

问题：有没有办法实现我想要做的 - 即 DRY 解决方案？

@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; // }
}

标签： sass

解决方案

我已经想出了如何保持这个干燥。在下面的示例中，根据屏幕宽度变化的宽度可变的 和 类在@mixin 列定义中列出一次

有两个@media 查询，首先设置每个变体所需的变量，然后是@include 列定义

顺便说一句 - 我已经为不响应地改变它们的宽度的列使用了全局变量。

简单！

$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; }
}

推荐阅读