Народ, всем привет. В своих проектах я давно использую модульную систему (о ней как-нибудь в другой раз) и SCSS (Sassy CSS) – это один из синтаксисов препроцессора Sass (Syntactically Awesome Stylesheets), который расширяет стандартный CSS, добавляя в него возможности программирования. И если говорить проще, он просто позволяет делать стили более структурированными, удобными в использовании и легко поддерживаемыми (хотя с последним я бы еще поспорил). А если еще проще говорить – стили писать просто легче и быстрее, даже если не использовать все возможности на полную катушку.
И SCSS является наиболее популярным синтаксисом Sass, так как он очень похож на обычный CSS, но при этом обладает дополнительными возможностями. И сели вы делить по пунктам, то по итогу, перейдя на SCSS вы заметите большие изменения:
- у вас станет более чистый и структурированный код, так как SCSS как бы делит код на некие отдельные блоки (а точнее, деревья).
- станет меньше дублирования кода за счет переменных, миксинов и @extend`ов (хот я я их не всегда использую)
- опять же, SCSS добавляет возможности программирования в CSS (функции, условия, циклы), но это используется только в больших проектах и легко можно обойтись и без этого.
Кстати, Вам может быть это интересно:
Как использовать SCSS?
По сути, все, что вам необходимо, это скомпилировать ваш написанный файл SCSS в обычный CSS перед тем, как применять стили на сайте. Как вы будете писать сам SCSS вообще не важно, хоть в блокноте. но по понятным причинам браузеры такой формат читать не умеют. Поэтому нужно просто «переделать» один формат в другой. Это можно сделать разными способами:
1. Через командную строку с помощью sass:
sass styles.scss styles.css
2. Через автоматические сборщики, такие как Webpack, Gulp или Parcel.
3. С помощью онлайн-компиляторов – некоторые сайты позволяют писать SCSS и сразу видеть скомпилированный CSS.
А теперь давайте поговорим про основные особенности SCSS, возможности, функции, переменные и прочее. Я коротенько, без подробностей, просто для того, чтобы вы понимали, зачем он вам нужен. А уже более подробно вы сможете изучить сами в документации, ну либо посмотрев обучающие ролики в интернете. Их полно.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
Переменные
SCSS поддерживает переменные, что позволяет хранить повторяющиеся значения (например, цвета, шрифты, размеры) и использовать их по всему файлу стилей. Это делает код более удобным в поддержке и изменении.
$primary-color: #3498db;
$secondary-color: #2ecc71;
body {
background-color: $primary-color;
color: $secondary-color;
}
Если в будущем нужно изменить цветовую схему, достаточно поменять значение переменной, а не искать и редактировать каждый отдельный стиль.
Вложенность
SCSS позволяет вкладывать селекторы друг в друга, что делает код более читабельным и логически организованным. В стандартном CSS приходится писать длинные селекторы, а SCSS упрощает этот процесс.
.navbar {
background-color: #333;
.nav-item {
color: white;
&:hover {
color: yellow;
}
}
}
Здесь .nav-item является частью .navbar, а &:hover означает, что стиль применяется к .nav-item:hover.
Миксины
Миксины (@mixin) позволяют создавать повторно используемые группы стилей, которые можно применять к разным элементам с помощью @include. Это особенно полезно для часто используемых комбинаций свойств.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
@include flex-center;
}
Этот миксин можно использовать во многих местах, чтобы не дублировать одни и те же CSS-правила.
Наследование
SCSS позволяет использовать @extend, чтобы переиспользовать стили одного класса в другом. Это уменьшает дублирование кода и делает его более чистым.
.button {
padding: 10px;
border-radius: 5px;
font-size: 16px;
}
.primary-button {
@extend .button;
background-color: blue;
color: white;
}
.secondary-button {
@extend .button;
background-color: gray;
color: black;
}
Оба класса .primary-button и .secondary-button унаследуют стили .button, а также добавят свои собственные.
Операции с числами и цветами
SCSS поддерживает математические операции прямо в стилях, что позволяет делать вычисления на уровне CSS.
$base-size: 16px;
.container {
width: 100% - 20px;
font-size: $base-size * 1.5;
}
Также можно изменять цвета с помощью встроенных функций:
$primary-color: #3498db;
.button {
background-color: lighten($primary-color, 10%);
border: 2px solid darken($primary-color, 10%);
}
По итогу, SCSS – это некий инструмент для веб-разработчиков, который добавит гибкости и удобства в написание стилей для вашего сайта. Но самое главное, лично для меня, важно то, что использование SCSS позволяет значительно ускорить процесс разработки, сделать код более чистым и упрощает внесение изменений. А для разработчиков, работающих с CSS на профессиональном уровне, изучение SCSS является важным шагом для повышения эффективности и качества работы.
Продаете вязаных кукол? Оказываете услуги по ремонту квартир? У вас кафе с доставкой еды на дом? И вам нужен сайт?
Тогда вам нужно к нам, Web-LeoDesign, дизайн и создание сайтов на заказ, по приемлемым ценам и быстрым срокам. От небольших ламповых магазинов на дому до крупных блогов и интернет-порталов, одностраничные сайты и целые инфраструктуры, мобильные приложения, панели администрирования и т.д. А также, дополнительно, любые графические работы, оформление меню, плакатов, баннеров, бренд-буков и т.д., предметная фото- / видео- съемка, написание контента, таргетинг и реклама.
