Общие методы Sass, которые вы должны знать

внешний интерфейс JavaScript Vue.js CSS

Недавно я использовал Sass в своем собственном проекте vue, поэтому я записал некоторые общие методы, чтобы обобщить и представить конфигурацию Sass в vue.

Как и некоторые основные понятия о том, что такое Sass, я не буду упоминать его здесь, а только приведу галантерею.Я думаю, что в других статьях есть еще много описаний Sass.

Мой проект - это проект, настроенный с помощью строительных лесов vue-cli.

Установить Sass

  • Mac поставляется с рубиновой средой, которую можно просмотреть с помощью следующей команды
ruby -v
  • Сначала введите следующую команду:
$ gem install sass

Если есть проблема с разрешением, обычно это проблема с разрешением

ERROR:  While executing gem ... (Gem::FilePermissionError)You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory.

Затем введите следующую команду:

$ sudo gem install sass
$ npm install sass-loader -D

Если установка ждет бесконечно, попробуйте следующее, чтобы заменить образ RubyGems

$ gem sources --remove https://rubygems.org/
//如果你系统不支持https用http
$ gem sources -a https://ruby.taobao.org/ 
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org# 请确保只有 ruby.taobao.org
$ gem install sass

Если возникает следующая ошибка

ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass

Попробуйте следующий метод

$ sudo gem install -n /usr/local/bin sass

После завершения установки попробуйте проверить версию sass

$ sass -v

настроить

После завершения установки добавьте следующую конфигурацию в настройки modoles файла build/webpack.base.conf.js.

module: {
    rules: [
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
     ]
}

использовать

Затем мы собираемся использовать его, мы создаем файл vue, чтобы начать писать код, а затем добавляем lang в стиль файла vue.

<style lang="scss">
/*  在此处写Sass */
</style>

Обычное использование Sass

(1) Переменные

SASS позволяет использовать переменные, все переменные начинаются с $.

/* 变量声明 */
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}

Эквивалент метода записи 👇css

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

Если переменная должна быть встроена в строку, она должна быть записана в #{}.

$side : left;
#div1 {
    margin-#{left}:10px;
}

(2) Вычислительная функция

SASS позволяет использовать арифметику в коде:

.div2 {
    margin: 10px * 2;
    padding:(14px / 2);
}

Эквивалент метода записи 👇css

.div2 {
    margin: 20px;
    padding: 7px;
}

(3) Вложение

SASS позволяет вкладывать селекторы. Например:

  • вложенность селектора
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}

Эквивалент метода записи 👇css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}
  • & вложение

Внутри вложенных блоков кода вы можете использовать&引用父元素。 Напримерa:hoverПсевдокласс, который можно записать как:

a {
    margin: 10px;
    &:hover {
        color: #000;
    }
}

Эквивалент метода записи 👇css

a {
    margin: 10px;
}
a:hover {
    color: #000;
}
  • Вложенность атрибутов (используется редко или нет, потому что писать сложнее)

Свойства также могут быть вложенными, например свойство border-color, которое можно записать так:

p{
    border: {  //注意，border后面必须加上冒号。
        color: #000;
    }
}

//转化css后
p{
    border-color: #000;
}

(4) Наследование

SASS позволяет одному селектору наследовать другой селектор. Например, существующий div3:

.div3 {
    margin: 2px;
}

/* .div4继承.div3 */
.div4 {  
    @extend .div3;
    font-size: 10px;
}

Эквивалент метода записи 👇css

.div3, .div4 {
  margin: 2px;
}
.div4 {
  font-size: 10px;
}

(5) Письмо МИ

Миксины немного похожи на макросы в языке C, которые представляют собой повторно используемые блоки кода.

  • 1. Используйте команду @mixin для определения блока кода
  • 2. Последующее наблюдение может пройти@includeмультиплекс
@mixin p1 {
    float: left;
}

div {
/*使用@include命令，调用这个mixin。*/
    @include p1; 
    top: 10px;
}

Эквивалент метода записи 👇css

div {
  float: left;
  top: 10px;
}

Сила миксина в том, что он можетУкажите параметры и значения по умолчанию. Таким образом, мы можем повторно использовать некоторые стили, просто передав параметр, как вызов функции!

  • Пример 1: нет значения по умолчанию
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);/*引用*/
}

Эквивалент метода записи 👇css

.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  • Пример 2: со значением по умолчанию
    • Параметры без значений по умолчанию размещаются в начале списка параметров.
@mixin p2($val1, $val2:20px) {
/* 如果不加入参数，就用默认参数 */
    float: $val1;
    top: $val2;
}
//使用的时候，根据需要加入参数：
div {
    @include p2(left);
}

Эквивалент метода записи 👇css

div {
  float: left;
  top: 20px;
}

(6) Импорт файла

  • Команда @import используется для вставки внешних файлов.
  • Если файл .css вставлен, он эквивалентен команде импорта css.
@import "path/filename.scss";

@import "foo.css";

(7) Примечания

В SASS есть два стиля аннотаций.

  • Стандартные комментарии CSS /* комментарий */ сохраняются в скомпилированном файле.
  • Однострочный комментарий // комментарий, который сохраняется только в исходном файле SASS и опускается после компиляции.

Содержание sass гораздо больше.Для нормального использования вышеизложенного достаточно.Если вы заинтересованы в продолжении изучения sass после прочтения этого блога, вы можете взглянуть на официальную документацию:Документация Sass на китайском языке

Категории