Как создать приложение для использования SCSS?

Angular — это популярный JavaScript-фреймворк для создания веб-приложений. Он предоставляет набор инструментов и библиотек для создания клиентских приложений с использованием современных веб-технологий.

Sass (Syntactically Awesome Style Sheets) — это препроцессор CSS, который добавляет в CSS мощные функции, такие как переменные, примеси и функции. Стили Sass написаны с использованием специального синтаксиса, называемого SCSS (Sass CSS), который является надмножеством CSS. Файлы SCSS имеют расширение.scss и компилируются в обычные файлы CSS, которые можно использовать в веб-приложениях.

В этой статье мы рассмотрим пошаговый процесс, объясняющий, как создать приложение Angular и использовать Sass для стилизации. Мы начнем с создания нового проекта Angular и установки Sass. Затем мы настроим Angular для использования Sass и создадим файл Sass. Наконец, мы импортируем файл Sass в компонент Angular и запустим приложение для тестирования стилей Sass. Прежде чем начать, убедитесь, что у вас есть следующие предварительные условия:

• Node.js и npm установлены на вашем локальном компьютере. Вы можете скачать последнюю версию Node.js с официального сайта.
• Angular CLI (интерфейс командной строки) устанавливается глобально на вашем локальном компьютере. Вы можете установить Angular CLI, выполнив следующую команду в своем терминале:

npm install -g @angular/cli

Мы создадим приложение для использования scss, реализуя их двумя разными методами.

Способ 1. Установите и используйте SCSS после инициализации проекта Angular.

Шаг 1: Создайте новый проект Angular

Чтобы создать новый проект Angular, откройте терминал и перейдите в каталог, в котором вы хотите создать проект. Затем выполните следующую команду Angular CLI:

ng new my-project

Замените my-project на имя вашего проекта. Эта команда создаст новый каталог с именем вашего проекта и создаст в нем все необходимые файлы и папки для проекта Angular.

Шаг 2: Установите Sass

Чтобы использовать Sass в своем проекте Angular, вам необходимо установить пакет node-sass. Перейдите в каталог вашего проекта и выполните следующую команду:

npm install sass

Это установит пакет node-sass в качестве зависимости разработки в вашем проекте.

Шаг 3. Настройте Angular для использования Sass

Чтобы настроить Angular для использования Sass, вам нужно изменить файл angular.json в корне вашего проекта. Откройте файл и найдите раздел проекты > [имя проекта] > архитектор > сборка > параметры. Затем добавьте следующее свойство:

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
}

Это укажет Angular искать файлы Sass в каталоге src/styles.

Шаг 4: Создайте файл Sass

Теперь, когда вы настроили Angular для использования Sass, вы можете создать файл Sass в своем проекте. Создайте новый файл с расширением.scss в каталоге src/styles (или любом другом каталоге, который вы указали в свойстве stylePreprocessorOptions в файле angular.json). Например, вы можете создать файл с именем styles.scss.

Шаг 5: Импортируйте файл Sass в ваш компонент Angular

Чтобы использовать файл Sass в вашем компоненте Angular, вам необходимо импортировать его в свойство styleUrls компонента. Например, если у вас есть компонент с именем MyComponent, вы можете импортировать файл Sass следующим образом:

import { Component } from '@angular/core';
@Component({
   selector: 'app-my-component',
   templateUrl: './my-component.component.html',
   styleUrls: ['./styles.scss']
})
export class MyComponent {
   // component code goes here
}

Шаг 6: Запустите приложение Angular

Чтобы запустить приложение Angular, перейдите в каталог проекта в своем терминале и выполните следующую команду:

ng serve --open

Это запустит сервер разработки и будет обслуживать ваше приложение Angular. Теперь вы можете просматривать приложение в своем браузере.

Пример: В этом примере описывается создание приложения Angular для реализации scss.

• component.html

<div class="center">

    <h1 style="color: green;">

        GeeksforGeeks

    </h1>

    <h3>

        How do you create an angular application to use scss?

    </h3>

    <h4>

        Method 1: Install and use SCSS, after initializing 

        the Angular project.

    </h4>

</div>

 

<button (click)="toggleList()">

    Show Steps

</button>

<div *ngIf="showList">

    <ul>

        <li>

            Create a new Angular project

        </li>

        <li>

            Install Sass

        </li>

        <li>

            Configure Angular to use Sass

        </li>

        <li>

            Import the Sass file in your Angular component

        </li>

        <li>

            Run the Angular application

        </li>

    </ul>

</div>

• app.component.scss

CSS

$main-background-color: green;

$main-text-color: white;

$main-font-size: 16px;

$main-border-radius: 4px;

 

@mixin button-style {

  padding: 8px 16px;

  background-color: $main-background-color;

  color: $main-text-color;

  border: none;

  border-radius: $main-border-radius;

  font-size: $main-font-size;

  cursor: pointer;

}

 

body {

  margin: 0;

  padding: 0;

}

 

button {

  @include button-style;

}

 

ul {

  list-style: inside;

  padding: 5;

  margin: 10;

}

 

li {

  padding: 5px;

  font-size: $main-font-size;

  color: gray;

}

• app.component.ts

Javascript

import { Component } from '@angular/core';

 

@Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

    styleUrls: ['./app.component.scss']

})

export class AppComponent {

    title = 'scss-app';

    showList: boolean = false;

    toggleList() {

        this.showList = !this.showList;

    }

}

Выход:

 

Способ 2. Используйте или настройте SCSS в проекте Angular во время инициализации с установленным флагом стиля для использования SCSS.

Шаг 1: Создайте проект Angular с помощью CLI с флагом стиля.

Приведенная ниже команда создаст новый проект с именем «имя проекта» и включит SCSS в качестве языка стилей по умолчанию.

ng new project-name --style=scss

Теперь вы можете создать новый компонент, и он будет иметь файл.scss с тем же именем, что и компонент. Например, мы создали приведенный ниже проект с флагом стиля, установленным в scss.

Структура проекта: После успешной установки появится следующий проект:

Пример: это еще один пример, который реализует SCSS с приложением Angular.

• app.component.html

HTML

• app.component.scss

CSS

$button-bg-color: blue;

$button-text-color: white;

$modal-bg-color: rgba(0, 0, 0, 0.5);

 

@mixin button-style {

  background-color: $button-bg-color;

  color: $button-text-color;

  border: none;

  border-radius: 5px;

  padding: 10px 20px;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

 

  &:hover {

    background-color: lighten($button-bg-color, 10%);

  }

}

 

button {

  @include button-style;

}

 

.modal {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: $modal-bg-color;

  display: flex;

  justify-content: center;

  align-items: center;

}

 

.modal-content {

  background-color: white;

  width: 50%;

  height: 50%;

  border-radius: 10px;

  box-shadow: 0px 0px 10px grey;

  padding: 20px;

}

 

li {

  padding: 10px;

  font-size: 16px;

  font-weight: bold;

  color: grey;

}

• app.component.ts

Javascript

import { Component } from '@angular/core';

 

@Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

    styleUrls: ['./app.component.scss']

})

export class AppComponent {

    title = 'scss-app';

    showModal: boolean = false;

    openModal() {

        this.showModal = true;

    }

 

    closeModal() {

        this.showModal = false;

    }

}

Выход: