Question

我有以下SCSS mixin，我可能写了太多多余的东西：

@mixin radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) {

    -moz-border-radius-topleft:     $topleft;
    -moz-border-radius-topright:    $topright;
    -moz-border-radius-bottomright: $bottomright;
    -moz-border-radius-bottomleft:  $bottomleft;
    -webkit-border-radius:          $topleft $topright $bottomright $bottomleft;
    border-radius:                  $topleft $topright $bottomright $bottomleft;

}

请注意，参数可以采用单个值来应用于所有边，也可以采用全部4个进行自定义。

Answer 1

我建议你使用

@import "compass/css3";
@include border-radius(3px);

Answer 2

您可以显式传递如下值：

@mixin radius($radius) {

-webkit-border-radius: $radius;
border-radius: $radius;
}

传递像这样的参数，

.selector {
    @include radius(0 0 5px 5px);
}

干杯！

Answer 3

您可以将前四行合并到：

-moz-border-radius: $topleft $topright $bottomright $bottomleft;

除此之外，如果您希望保留为不同边缘指定单独值并保持代码跨浏览器兼容的选项，则无法再执行任何操作来减少代码。

moz-borer-radius

的语法

-moz-border-radius: { { length | percentage }  1 to 4 values | inherit } ;

Answer 4

如果您使用taskrunner（如grunt）将sass文件转换为css，则可以使用autoprefixer添加所有供应商特定的前缀。

https://github.com/nDmitry/grunt-autoprefixer

这样你就可以摆脱mixin，只需写下你想要的边框半径。

private function SqlArrayReferenceValues($arr){
         if (strnatcmp(phpversion(),'5.3') >= 0) {
            $refs = array();
            foreach($arr as $key => $value)
            $refs[$key] = &$arr[$key];
            return $refs;
            }
        return $arr;
        }

public function insert($setType, $setTable, $setRow, $setValues) {

        $change = function($values) {
            return "?";
        };
        $row = join(",", $setRow);
        $setValuesCopy = $setValues;
        $done = join(",", array_map($change, $setValuesCopy));      
        $insert = $this->connect->prepare("INSERT INTO ".$setTable." (".$row.") VALUES (".$done.")");

        $mergedValues = array_unshift($setValues, $setType);
        //probably not needed but resetting array numerical indexing:
        $mergedValues = array_values($mergedValues); 
        call_user_func_array(array($insert, "bind_param"), $this->SqlArrayReferenceValues($mergedValues));
        $insert->execute();
        $insert->close();
        return $insert;     
    }

$currentLink = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]";
$objMysql->insert("sis", "url", array("id_transaction", "id_user", "url"), array($st, $ide, $currentLink));

这个漂亮的小东西会为你转换它，你最终会得到与mixin相同的输出。

如何简化这个SCSS边界半径Mixin？ - Sass初学者

4 个答案: