Прежде чем использовать scss, нам нужно знать, в чем разница между Sass и Scss?
SCSS — это новый синтаксис, представленный в Sass 3. Его синтаксис полностью совместим с CSS3 и наследует мощные функции Sass. То есть любая стандартная таблица стилей CSS3 является допустимым файлом SCSS с той же семантикой,официальное объяснение.
В традиционном файле CSS отсутствуют такие понятия, как переменные, что приводит к необходимости написания большого количества повторяющегося кода. Моя привычка писать JS состоит в том, чтобы думать о том, можно ли его извлечь и записать в повторно используемый метод при столкновении с повторяющимся кодом, но в CSS нет концепции переменных функций.В это время я нашел предварительно скомпилированный инструмент css-scss.
scss прост и удобен в использовании Давайте начнем писать первый файл scss.
Готов к работе
Наверху написано: некоторые мелкие партнеры могут не иметь возможности развернуть интерфейсную среду, здесь я загружаю код наgithub, небольшие партнеры, которым это необходимо, могут загрузить код и сравнить код SCSS и скомпилированный код CSS.
scss должен быть скомпилирован в css, прежде чем он сможет быть распознан браузером.Я делаю здесь только небольшую демонстрацию, поэтому я не буду использовать vue-cli для компиляции напрямую с помощью webpack.
Сначала установите css-loader, style-loader, node-sass, sass-loader.
npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev
Затем добавьте соответствующий загрузчик в файл конфигурации webpack.config.js.Полная схема конфигурации выглядит следующим образом.
const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './webapp/App.js',
output: {
filename: 'App.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.scss/,
use: ['style-loader', 'css-loader','sass-loader']
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
mode: "production"
}
Создайте файл App.scss и импортируйте его в файл записи.
import './App.scss';
Позже мы напишем код scss в App.scss.
Официально начать
1. Используйте переменные
Переменные в SCSS начинаются с $.
$border-color:#aaa; //声明变量
.container {
$border-width:1px;
border:$border-width solid $border-color; //使用变量
}
В приведенном выше примере определены две переменные, из которых $border-color называется глобальной переменной вне фигурных скобок. Как следует из названия, ее можно использовать где угодно. $border-width объявлен в .container и является локальным переменная.Только .container можно использовать только внутри.
Скомпилированный CSS
.container {
border:1px solid #aaa; //使用变量
}
Мы можем думать о SCSS как об механизме шаблонов, который заменяет позицию, занимаемую переменной, значением переменной в процессе компиляции.
Советы: Подчеркивание или подчеркивание в имени переменной в SCSS указывают на одну и ту же переменную.Переменная $border-color определена выше, а затем определена другая переменная $border_color:#ccc, и они указывают на одну и ту же переменную, . container Значение перезаписывается переменной, определенной во второй раз.
$border-color:#aaa; //声明变量
$border_color:#ccc;
.container {
$border-width:1px;
border:$border-width solid $border-color; //使用变量
}
编译后的CSS
.container {
border:1px solid #ccc; //使用变量
}
В этом примере нам нужно знать
(1) Имя переменной, использующее тире или знак подчеркивания, относится к той же самой переменной.
(2) Объявление переменной, определенное позже, будет проигнорировано, но присваивание будет выполнено, что аналогично объявлению переменной var в ES5.
2. Правила вложения
Сначала рассмотрим пример.
/*css*/
.container ul {
border:1px solid #aaa;
list-style:none;
}
.container ul:after {
display:block;
content:"";
clear:both;
}
.container ul li {
float:left;
}
.container ul li>a {
display:inline-block;
padding:6px 12px;
}
Это пример горизонтального расположения элементов списка. В этом примере мы написали много повторяющегося кода, и .container был написан много раз. Ниже я буду использовать SCSS для сокращения приведенного выше примера.
2.1 Вложенные селекторы
/*scss*/
.container ul {
border:1px solid #aaa;
list-style:none;
li {
float:left;
}
li>a {
display:inline-block;
padding:6px 12px;
}
}
.container ul:after {
display:block;
content:"";
clear:both;
}
Здесь мы можем извлечь общий родительский элемент.
2.2 Родительские селекторы во вложенности
SCSS предоставляет селектор, который может выбирать родительский элемент текущего элемента, который представлен знаком &. Родительский селектор используется для упрощения приведенного ниже кода.
/*scss*/
.container ul {
border:1px solid #aaa;
list-style:none;
li {
float:left;
}
li>a {
display:inline-block;
padding:6px 12px;
}
&:after {
display:block;
content:"";
clear:both;
}
}
В родительском селекторе следует отметить, что родительский селектор можно использовать только внутри вложения, иначе SCSS напрямую сообщит об ошибке, если не сможет найти родительский элемент. Среди различных селекторов псевдоклассов очень часто используется родительский селектор.
2.3 Селекторы вложенных комбинаций
Вы можете написать любой код CSS во вложенных правилах, включая групповые селекторы (,), дочерние селекторы (>), соседние комбинированные селекторы одного уровня (+), общие комбинированные селекторы одного уровня (~) и т. д. далее мы продолжим упрощать встроенный селектор.
/*scss*/
.container ul {
border:1px solid #aaa;
list-style:none;
li {
float:left;
>a {
display:inline-block;
padding:6px 12px;
}
}
&:after {
display:block;
content:"";
clear:both;
}
}
Дочерние селекторы могут быть написаны справа от внешнего селектора (как в примере ниже) или слева от внутреннего селектора (как в приведенном выше примере).
li >{
a {
display:inline-block;
padding:6px 12px;
}
}
Обратите особое внимание при написании его справа от внешнего селектора.Он будет действовать на все вложенные селекторы.Постарайтесь не использовать такой тип написания.Я думаю,что он не масштабируется и склонен к ошибкам.
2.4 Вложенные свойства
Давайте посмотрим на пример
/*css*/
li {
border:1px solid #aaa;
border-left:0;
border-right:0;
}
В этом примере нам нужны только две границы, и мы переписываем их с помощью SCSS.
/*scss*/
li {
border:1px solid #aaa {
left:0;
right:0;
}
}
scss распознает, что свойство заканчивается точкой с запятой и оценивается как свойство, а когда оно заканчивается фигурными скобками, оно оценивается как вложенное свойство.Правило состоит в том, чтобы соединить внешнее свойство и внутреннее свойство через дефис, чтобы сформировать новый имущество.
3. Импортируйте файл SCSS
В большом проекте часто бывает несколько файлов CSS. В CSS предусмотрена команда @import для импорта другого файла CSS в CSS. Браузер загружает соответствующий файл CSS только после выполнения инструкции @import, что приводит к низкой производительности страницы. Поэтому , В основном не используется. Команда @import в SCSS отличается от нативной, о чем будет рассказано позже.
3.1 Проблема с приоритетом импортированной переменной - значение переменной по умолчанию
/*App1.scss*/
$border-color:#aaa; //声明变量
@import App2.scss; //引入另一个SCSS文件
.container {
border:1px solid $border-color; //使用变量
}
/*App2.scss*/
$border-color:#ccc; //声明变量
/*生成的css文件*/
.container {
border:1px solid #ccc; //使用变量
}
Это может быть не то, что нам нужно. Иногда мы хотим ввести некоторые стили, не меняя исходный стиль. В этом случае мы можем использовать значение переменной по умолчанию.
/*App1.scss*/
$border-color:#aaa; //声明变量
@import App2.scss; //引入另一个SCSS文件
.container {
border:1px solid $border-color; //使用变量
}
/*App2.scss*/
$border-color:#ccc !default; //声明变量
/*生成的css文件*/
.container {
border:1px solid #aaa; //使用变量
}
Импортированный файл App2.scss работает, только если $border-color не существует в файле.Если переменная $border-color уже существует в App1.scss, $border-color в App2.scss не вступит в силу.
!default можно использовать только с переменными.
3.2 Вложенный импорт
В предыдущем примере мы импортировали App2.scss глобально, теперь мы добавляем некоторый контент в App2.scss и импортируем его локально.
/*App1.scss*/
$border-color:#aaa; //声明变量
.container {
@import App2.scss; //引入另一个SCSS文件
border:1px solid $border-color; //使用变量
}
/*App2.scss*/
$border-color:#ccc !default; //声明变量
p {
margin:0;
}
/*生成的css文件*/
.container {
border:1px solid #aaa; //使用变量
}
.container p {
margin:0;
}
Видно, что все содержимое App2.scss записывается непосредственно в селектор .container App1.scss.
3.3 Использование собственного @import
Ранее мы говорили, что нативный @import в основном не используется, но в некоторых случаях приходится использовать нативный @import, SCSS тоже решает эту ситуацию за нас, просто импортирует css файл напрямую.
@import 'App.css';
4. Примечания
В SCSS есть два типа комментариев.
(1) /*Комментарии*/: Комментарии такого типа будут сохранены в скомпилированном файле css.
(2) // Комментарии: Этот тип комментариев не будет сохранен в файле css, сгенерированном после компиляции.
5. Миксер (функция)
5.1 Объявление функции
Используйте директиву @mixin, чтобы объявить функцию, взгляните на свой файл css и рассмотрите возможность использования микшера для извлечения и повторного использования любых повторяющихся фрагментов кода.
@mixin border-radius{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color:red;
}
Все свойства в области действия микшера являются возвращаемыми значениями, кроме того, вы также можете передавать параметры для функции.
@mixin get-border-radius($border-radius,$color){
-moz-border-radius: $border-radius;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
color:$color;
}
Также можно установить значения по умолчанию для микшера.
@mixin get-border-radius($border-radius:5px,$color:red){
-moz-border-radius: $border-radius;
-webkit-border-radius: $border-radius;
border-radius: $border-radius;
color:$color;
}
5.2 Использование функций
Используйте ключевое слово function как @include
.container {
border:1px solid #aaa;
@include get-border-radius; //不传参则为默认值5px
@include get-border-radius(10px,blue); //传参
}
/*多个参数时，传参指定参数的名字，可以不用考虑传入的顺序*/
.container {
border:1px solid #aaa;
@include get-border-radius; //不传参则为默认值5px
@include get-border-radius($color:blue,$border-radius:10px); //传参
}
Мы можем подумать, что недостаточно написать микшер напрямую как класс, но когда он написан как класс, его нужно использовать в html-файле, а при использовании микшера не нужно использовать класс в html-файле. файл для достижения эффекта повторного использования.
Советы: Весь код scss можно писать в микшере.
6. Наследование
Наследование — главная особенность объектно-ориентированных языков, позволяющая значительно сократить объем кода.
6.1 Определение унаследованных стилей
%border-style {
border:1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Используйте % для определения унаследованного стиля, похожего на абстрактный класс в статическом языке, он не работает сам по себе, он используется только для наследования другими.
6.2 Наследование стилей
Наследование можно осуществить с помощью ключевого слова @extend.
.container {
@extend %border-style;
}
В приведенном выше примере не видна разница между микшером и наследованием, тогда как в следующем примере показана разница между наследованием и микшером.
.container {
@extend %border-style;
color:red;
}
.container1 { //继承另一个选择器
@extend .container;
}
7. Резюме
Благодаря вступлению в эту статью я считаю, что у вас уже есть определенное представление о SCSS, но вы не можете изучить его, просто глядя на него.Я предлагаю вам иметь сильный дух и использовать его в проекте, которым вы сейчас занимаетесь. В течение некоторого времени естественно писать высококачественный код SCSS.
8. Другие
8.1 Операторы
SCSS предоставляет стандартные арифметические операторы, такие как +, -, *, /, %.
/*SCSS*/
width: 600px / 960px * 100%;
/*编译后的CSS*/
width: 62.5%;
Кроме того, SCSS имеет множество функций, и вам еще не поздно применить свои текущие знания, прежде чем учиться.
9. Общение
Если эта статья помогла вам, и если вы считаете, что она хороша, поставьте ей звезду.github.com/lizijie123