Question

我正在为多站点设计样式表。

我必须在一个变量中声明一个font-size，并且变量会根据选择器而改变。例如：

$newfont : 10px;

我正在尝试这当然不起作用：

@if ( #header ) {
    $newfont: 30px;
}@ else if ( #footer ) {
    $newfont: 25px;
}

有人可以指出我做错了吗？

Answer 1

对不起，你为什么不用

#header{
    font-size: 30px;
}
#footer{
    font-size:25px;
}

并且如下面的评论所指出，你可以使用mixin。

Answer 2

我不确定你想要实现什么，但@if需要一个SassScript表达式。你传递的是一个选择器。如果你想为不同的容器应用不同的字体大小，我建议使用函数或mixin。例如：

@function get-font-size($type) {
    @if $type == "header" {
        @return 30px;
    } @else if $type == "footer" {
        @return 25px;
    }
}
#header {
    font-size: get-font-size("header");
}
#footer { 
    font-size: get-font-size("footer"); 
}

代码产生：

#header {
  font-size: 30px;
}
#footer {
  font-size: 25px;
}

您甚至可以在实际尝试时使用变量控制过程：

$newfontsize: 30px;
@mixin update-font-size($size) {
    $newfontsize: $size;
}
@function get-font-size() {
    @return $newfontsize;
}

#header {
    font-size: get-font-size();
}
@include update-font-size(15px);
#footer { 
    font-size: get-font-size(); 
}

Answer 3

最简单的解决方案是使用更多变量。这就是大多数主流图书馆的做法。

$header-font-size: 30px !default;
$footer-font-size: 25px !default;

#header{
    font-size: $header-font-size;
}
#footer{
    font-size: $footer-font-size;
}

在css选择器上使用if语句 - SASS

3 个答案: