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

No-Code Low-Code против разработки программного обеспечения на заказ Программирование и разработка

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.

Читайте также:  Символьные типы данных C++

Шаг 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

<div class="center">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>
        How do you create an angular application to use scss?
    </h3>
    <h4>
        Method 2: Use or configure SCSS in your 
        Angular project at the time of initialization
        with the style flag set to use SCSS.
    </h4>
</div>
 
<button (click)="openModal()">
     Show Steps
</button>
 
<div class="modal"
     *ngIf="showModal">
    <div class="modal-content">
        <span (click)="closeModal()">
            ×
        </span>
        <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>
</div>
  • 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;
    }
}

Выход:

mpone

Оцените статью
bestprogrammer.ru
Добавить комментарий