Сводные заметки по Sass Основное введение (суперинтуитивные детали)

внешний интерфейс SCSS

Это мой восьмой день в Gengwen Challenge.

1. Что такое дерзость:

  1. Sass расширяет CSS3 такими функциями, как правила, переменные, примеси, селекторы, наследование и многое другое. Sass создает хорошо отформатированный код CSS, который легко организовывать и поддерживать.
  2. SASS — это расширение синтаксиса CSS3 (каскадных таблиц стилей), которое может использовать такие функции, как вложение, микширование и наследование селекторов, а также может создавать таблицы стилей более эффективно и гибко. Со временем Sass скомпилирует легальный CSS для использования браузерами, а это означает, что его собственный синтаксис нелегко распознать браузерам (хотя он очень похож на синтаксис CSS, почти такой же), потому что это не стандартный формат CSS, динамические переменные и т. д. .. может использоваться внутри его синтаксиса, поэтому он больше похож на очень простой динамический язык.
  3. Чем больше проект, тем больше файл CSS и тем больше повторяющегося кода, который будет сложно поддерживать.С помощью Sass можно повысить эффективность написания CSS.

2. Установка:

cmd открывает окно управления локальными командами, введите следующую строку и нажмите Enter, чтобы установить ее.

npm install -g sass

在这里插入图片描述 Чтобы узнать больше о способах установки, вы можете нажать на мой Sass, чтобы перейти на официальный сайт.

3. Скомпилируйте файл .scss в файл .css:

Sass использует .scss в качестве суффикса файла и не может использоваться непосредственно в теге , его необходимо скомпилировать в файл .css.Демо:

  1. Создайте html-файл и небрежно напишите тег h1:

在这里插入图片描述2. Создайте файл с расширением .scss, например input.scss, и напишите синтаксис базового стиля sass:在这里插入图片描述3. Откройте командный контроллер cmd по пути, где находится html-файл, и введите:

sass input.scss ouput.css

Это означает преобразовать файл с именем input.scss в файл с именем ouput.css (имя произвольное).

在这里插入图片描述Нажав Enter, я обнаружил, что получил файл css.在这里插入图片描述Содержимое файла css выглядит следующим образом, видно, что преобразование завершено:在这里插入图片描述Следующий шаг — старая операция, просто используйте тег для импорта файла css в HTML.

  1. Но преобразовать оператор .scss один раз невозможно, это слишком хлопотно, поэтому его можно преобразовать автоматически.Когда я пишу предложение в .scss, .css автоматически генерирует предложение. Введите следующее в cmd:
sass --watch input.scss:ouput.css

Указывает на отслеживание изменений. При изменении input.scss изменяется output.css:在这里插入图片描述5. Что делать, если в одном html-файле несколько файлов css? Затем вы можете напрямую отслеживать изменения папок: Такие как:

sass  --watch  yuan:bian

Представление: при изменении любого файла с суффиксом .scss в папке с именем yuan он будет скомпилирован в папку с именем bian (соответствующий файл .css будет сгенерирован автоматически)

4. Основное использование и функции:

содержание:

1. переменная; 2. Вложение; 3. миксин; 4. Наследование; 5. импорт; 6. Расчет; 7. Функция цвета; 8. Интерполяция; 9. если суд; 10. для петли; 11. Цикл списка; 12. цикл while; 13. функция пользовательской функции; ......ожидает обновления....

Подробное использование:

1. Переменная(После определения переменной на нее можно напрямую ссылаться в селекторе):

Например: я определяю переменную с именем $yanse, значением является цвет rgb (223, 148, 148)

$yanse: rgb(223, 148, 148);

Цитата прямо в селекторе:

h1{
        color: $yanse；
    }

Конечно, переменные тоже могут быть матрешками, например, я определяю переменную с именемkuang, который ссылаетсякуанг, который цитируетсяyanse

$yanse: rgb(223, 148, 148);
$kuang: 1px solid $yanse;

Затем также используйте напрямую:

 h1{
        border: $kuang;
    }
2. вложенный(дочерние селекторы могут быть вложены в родительские селекторы)

Например: есть следующие ярлыки

 <div>
        <ul>
            <li></li>
        </ul>     
    </div>

Вы можете написать это прямо так:

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}

эквивалентно:

div {
  height: 100px;
}
div ul {
  height: 80px;
}
div ul li {
  height: 50px;
}

Если у li есть селектор псевдокласса: hover можно записать так (добавьте &:hover{} внутри):

div{
    height: 100px;
    ul{ 
        height: 80px;
        li{
           height: 50px;
           &:hover {
             color: #000;
           }
        }
    }
}

Это эквивалентно повторному написанию:

div ul li:hover {
  color: #000;
}

Вложенными могут быть не только селекторы, но и свойства, например:

div{
    height: 100px;

    font: {
        family: 'fangsong';
        size: 20px;
        weight: 700;
    }
    border: 1px solid red {
       left: 0;
       top: 0;
    }
}

эквивалентно:

div {
  height: 100px;
  font-family: "fangsong";
  font-size: 20px;
  font-weight: 700;
  border: 1px solid red;
  border-left: 0;
  border-top: 0;
}
3. миксин(Это эквивалентно предварительному написанию набора стилей, которые напрямую цитируются в другом месте):

Основной синтаксис:

@mixin 名字（参数1，参数2，...）
{
........样式.......

}

Например (без параметров, он также может быть вложен внутри, миксин с именем hunhe определен ниже, а затем вызывается (@include name) в селекторе div):


@mixin hunhe {
     color: red;
     a {
         font-size: 12px;
     }
}

div{
    @include hunhe;  
}

эквивалентно:

div {
  color: red;
}
div a {
  font-size: 12px;
}

С параметрами (более гибко, параметр эквивалентен нужному вам значению, пишите $ перед именем параметра, а позиция значения должна быть правильной при вызове):

Такие как:

@mixin hunhe($one,$two) {
     color: $one;
     a {
         color: $one;
         font-size: $two;
     }
}

div{
    @include hunhe(red,15px);  
}

*div можно записать и так, указав имя параметра, положение параметра можно изменить по желанию:

div{
    @include hunhe($two:15px,$one:red);  
}

Вышеприведенное эквивалентно:

div {
  color: red;
}
div a {
  color: red;
  font-size: 15px;
}
4. Наследовать/расширить(Селектор может наследовать все стили другого селектора)

Например: класс .two наследует все стили класса .one (@расширить имя);Не только .one, но и все связанные с .one наследуются, подробности следующим образом:

.one{
    color: #000;
}
.one a{
    font-size: 10px;
}
.two{
    @extend .one;
    background-color: #fff;
}

эквивалентно:

.one, .two {
  color: #000;
}

.one a, .two a {
  font-size: 10px;
}

.two {
  background-color: #fff;
}
5. @importВведите файл с расширением .scss как часть себя, импортированный файл не будет конвертирован в формат .css, поэтому имя этого файла должно начинаться с подчеркивания, например: _base.scss, подчеркивание не пишите при его импорте.

Синтаксис: @import: ".....путь"; Такие как: Создайте файл с именем _base.scss, напишите в нем несколько селекторов и стилей, а затем импортируйте его в обычный файл, например one.scss, если каталоги находятся на одном уровне:

@import: "base.scss";

Таким образом, .one.scss содержит все содержимое _base.scss.

6. функция расчета(SASS позволяет использовать арифметику в коде), например:
  $chang: 20px;
body{   
    margin: (10px*2);
    left: 20px + $chang;
}

эквивалентно:

body {
  margin: 20px;
  left: 40px;
}
7. функция цвета(SASS предоставляет некоторые встроенные цветовые функции для создания серии цветов.)

hsl (оттенок, насыщенность, яркость);

body{   
   background-color: hsl(5, 20%, 20%);
}

эквивалентно:

body {
  background-color: #3d2b29;
}

hsl (оттенок, насыщенность, яркость, непрозрачность);

body{   
   background-color: hsl(5, 20%, 20%,0.5);
}

эквивалентно:

body {
  background-color: rgba(61, 43, 41, 0.5);
}

Используется для настройки оттенка: Adjust-hue (цвет, степень регулировки);

body{   
   background-color: adjust-hue(hsl(0,100,50%), 100deg);
}

эквивалентно:

body {
  background-color: #55ff00;
}

Используется для регулировки яркости цвета: светлее делает цвет ярче, темнее делает цвет темнее.Такие как: осветлить (окрасить, увеличить процент яркости);

body{   
   background-color: lighten(rgb(228, 145, 145),50%);
   color: darken(rgb(228, 145, 145),50%);
}

эквивалентно:

body {
  background-color: white;
  color: #5f1717;
}

Используется для настройки чистоты цвета. Насыщенность делает цвет более чистым, обесцвечивание делает цвет нечистым.насыщение (цвет, процент);

8. InterpolationВставьте значение в другое значение, конкретное использование выглядит следующим образом #{переменная} Например:
$yanse: color;
body{   

   #{$yanse}:red;
   
}

эквивалентно:

body {
  color: red;
}
  1. если суждение (логика аналогична языку C):

грамматика:

@if 判断条件 {
.......执行语句...
} @else {
  ...else有就写没就不写....
}

Такие как:

$jia: false;
body{   

   @if false{
       color: red;
   }
   @if 2>3 {
       background-color: white;
   }@else{
       background-color: black;
   }
   
}

эквивалентно:

body {
  background-color: black;
}
10. для цикла

грамматика:

结束值不执行：
@for 变量 from 开始值 through 结束值 {
     ......
}
结束值也执行：
@for 变量 from 开始值 to 结束值 {
     ......
}

пример:

@for $i from 1 to 3 {
    
    .div#{$i}{
       height: $i*20px;
    }

}

эквивалентно:

.div1 {
  height: 20px;
}

.div2 {
  height: 40px;
}
11. цикл списка, может зацикливаться на значениях списка, список эквивалентен массиву;

грамматика:

@each 变量 in 列表{
...
}

пример:

$yanse: red blue black;
@each $i in $yanse {
    
    .div#{$i}{
      color: $i;
    }

}

эквивалентно:

.divred {
  color: red;
}

.divblue {
  color: blue;
}

.divblack {
  color: black;
}
12. пока цикл, есть более гибкие условия оценки.

грамматика:

@while 条件 {
   ...
}

пример:

$gao: 1;
@while $gao<4 {
    .div#{$gao}{
        height: $gao*10px;
    }
   $gao : $gao+1;
}

эквивалентно:

.div1 {
  height: 10px;
}

.div2 {
  height: 20px;
}

.div3 {
  height: 30px;
}
13.пользовательская функция, может быть вызвана определенная вами функция;

грамматика:

@function 名字(参数1，参数2，..){
....
}

пример:

@function ziji ($bian)
{
    @return $bian+10px;
}

div{
    width: ziji(5px);
}

эквивалентно:

div {
  width: 15px;
}

Суммировать:

Ставьте палец вверх, если помогло~

Другие статьи:Отзывчивый эффект наведения карты html+css Анимация загрузки волны воды html+css Эффект градиента прокрутки панели навигации html+css+js Перелистывание страниц книги html+css 3D стерео альбом html+css Цветная кнопка стримера html+cssподожди подожди.....

Категории