Why doesn't :first-child work with SCSS (SASS)?

M

MaksSmag2020-11-02 14:17:57

css

MaksSmag, 2020-11-02 14:17:57

Good day to all.
I have never worked with SCSS (SASS), please help, for some reason the first class does not want to be selected relative to the parent. For obvious reasons (lack of SCSS compiler), I post the code and the current result here:
index.php (just in case):

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Блог, самоучитель по программированию</title>
  <?php chdir($_SERVER['DOCUMENT_ROOT']); chdir('..'); include (getcwd() . '/main.php');?>
        //autov() - обновление кеша у пользователя, если кеширируемый файл изменён
  <script src="<?php autov('/scripts/jquery_min.js'); ?>"></script>
  <script src="<?php autov('/scripts/jquery_ui_min.js'); ?>"></script>
  <link href="<?php autov("/scripts/jQueryFormStyler/jquery.formstyler.css"); ?>" rel="stylesheet">
  <link href="<?php autov("/scripts/jQueryFormStyler/jquery.formstyler.theme.css"); ?>" rel="stylesheet">
  <script src="<?php autov("/scripts/jQueryFormStyler/jquery.formstyler.min.js"); ?>"></script>
  <link rel='stylesheet' href='<?php autov("/styles/mainpage.css"); ?>'>
</head>
<body>
  <div id="menu">
    <a class="logotype"></a>
    <a class="item">Главная</a>
    <a class="item">Документация</a>
  </div>
</body>
</html>

mainpage.scss (the compiled version (.css) is named and located in the same directory):

$blue1: #5268D1;
$blue2: #2E4094;
body {
  margin: 0px;
  padding: 0px;
}
#menu {
  display: flex;
  align-items: center;
  background: $blue1;
  width: 100%;
  height: 80px;
  border: {
    bottom: 2px solid $blue2;
  }
  padding: {
    top: 4px;
    bottom: 4px;
    left: 6px;
    right: 6px;
  }
  a.logotype {
    display: inline-block;
    background-color: white;
    width: 150px;
    height: 100%;
    margin: {
      left: 20px;
    }
  }
  a.item {
    $fontsize: 52px;
    $padding: 4px;
    $border: 2px;
    display: inline-block;
    padding: $padding;
    font: {
      size: $fontsize;
      family: 'RobotoCondensed-Light';
    }
    text-decoration: none;
    color: white;
    border: 2px solid white {
      radius: 26px;
    }
    margin-left: 20px;
    &:first-child { margin-left: 100px; }
  }
}
//Шрифты:
@font-face {
  font-family: 'RobotoCondensed-Light';
  src: url('/fonts/RobotoCondensed-Light.ttf');
}

The result of the execution (the "Home" should have a left indent of 100px, not 20px):

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

I

iBird Rose, 2020-11-02
@MaksSmag

scss(sass) has nothing to do with it. read more about :first-child htmlbook.ru/css/first-child

The :first-child pseudo-class applies styling to the first child element of its parent.

the first child you have there is .logotype

F

FeST1Val, 2020-11-02
@FeST1Val

because the first element is logotype and it's not about scss