css - Using if statement on css selectors - SASS

Question

I am working on a stylesheet for a multisite.

I have to declare a font-size in one variable, and the variable would change depending on the selectors. Eg:

$newfont : 10px;

i am attempting this which of course is not working:

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

Can someone please point out what i am doing wrong?

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