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

我正在为一个多站点制作样式表

我必须在一个变量中声明字体大小，该变量将根据选择器的不同而变化。例如：

$newfont : 10px;

我正在尝试这一点，当然这是行不通的：

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

---

有人能指出我做错了什么吗？

对不起，你为什么不使用

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

---

正如下面的评论所指出的，你可以使用mixin。很抱歉，你为什么不使用mixin呢

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

---

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

我不确定你想要实现什么，但是@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(); 
}

---

我不确定你想达到什么目的，但是@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(); 
}

---

最简单的解决方案就是使用更多的变量。大多数主题库就是这样做的

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

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

---

最简单的解决方案就是使用更多的变量。大多数主题库就是这样做的

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

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

---

我猜，因为如果你使用这种方法，你想把25px改成27px，你应该检查所有的代码并替换所有的值。使用函数或mixin更灵活，但我们不能将所有值都设置为变量或mixin。如果字体大小不同，可以将值放在那里。如果是变量，我会做一些类似于

$big\u font:30px$小字体：25px。设置一个与选择器相关的值，这实际上只是简单的CSS。我想，因为如果你使用这种方法，并且你想将那些25px更改为27px，你应该检查所有的代码并替换所有的值。使用函数或mixin更灵活，但我们不能将所有值都设置为变量或mixin。如果字体大小不同，可以将值放在那里。如果是变量，我会做一些类似于
$big\u font:30px$小字体：25px。设置一个相对于选择器的值，这实际上只是简单的CSS。