Вопросы Теги

Создайте переменную в.CSS файле для использования в этом.CSS файл [дубликат]

tl; dr: Нет! Функции стрелок и декларации функций / выражения не являются эквивалентными и не могут быть заменены вслепую. Если функция, которую вы хотите заменить, not использует this, arguments и не вызывается с new, тогда да.

Как это часто бывает: это зависит. Функции Arrow имеют другое поведение, чем декларации / выражения функций, поэтому давайте сначала рассмотрим различия:

1. Функции Lexical this и arguments

не имеют собственных привязок this или arguments. Вместо этого эти идентификаторы разрешаются в лексической области, как и любая другая переменная. Это означает, что внутри функции стрелки this и arguments относятся к значениям this и arguments в окружающей среде, функция стрелки определена в (т.е. «снаружи» стрелка ) 

// Example using a arrow function
function createObject() {
  console.log('Inside `createObject`:', this.foo);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo),
  };
}

createObject.call({foo: 21}).bar(); // override `this` inside createObject

В случае выражения функции, this относится к объекту, который был создан внутри createObject. В функциональном случае стрелки this относится к this самого createObject.

Это делает функции стрелок полезными, если вам нужно получить доступ к this текущей среды: 

// currently common pattern
var that = this;
getData(function(data) {
  that.data = data;
});

// better alternative with arrow functions
getData(data => {
  this.data = data;
});

Обратите внимание, что это также означает, что не можно установить функцию стрелки this с .bind или .call.

Если вы не очень знакомы с this, рассмотрим чтение

2. Функции стрелок не могут быть вызваны с помощью new

ES2015 различает функции, доступные call , и функции, которые являются конструкцией . Если функция конструируется, ее можно вызвать с помощью new, то есть new User(). Если функция является вызываемой, ее можно вызвать без new (т. Е. Вызов нормальной функции).

Функции, созданные посредством деклараций / выражений функций, являются конструктивными и вызываемыми. Функции стрелок (и методы) являются только вызываемыми. class конструкторы только конструктивны.

Если вы пытаетесь вызвать функцию, не вызываемую вызовом, или построить неконструируемую функцию, вы получите ошибку времени выполнения.

Зная это, мы можем указать следующее.

Сменный:

  • Функции, которые не используют this или arguments.
  • Функции, которые используются с .bind(this)

Не сменный:

  • Функции конструктора
  • Функция / методы, добавленные к прототипу (поскольку они обычно используют функции this)
  • Variadic (если они используют arguments (см. ниже))

Давайте рассмотрим это более подробно с помощью ваших примеров:

Функция конструктора

Это не будет работать, потому что функции стрелок нельзя вызвать с помощью new. Продолжайте использовать объявление / выражение функции или используйте class.

Способы прототипа

Скорее всего нет, потому что методы прототипа обычно используют this для доступа к экземпляру. Если они не используют this, вы можете его заменить. Однако, если вы в первую очередь заботитесь о сжатом синтаксисе, используйте class с его синтаксисом сжатого метода: 

class User {
  constructor(name) {
    this.name = name;
  }

  getName() {
    return this.name;
  }
}

Методы объекта

Аналогично для методов в объектном литерале. Если метод хочет ссылаться на сам объект через this, продолжайте использовать функциональные выражения или используйте новый синтаксис метода: 

const obj = {
  getName() {
    // ...
  },
};

Обратные вызовы

Это зависит. Вы должны обязательно заменить его, если вы наложили внешний this или используете .bind(this): 

// old
setTimeout(function() {
  // ...
}.bind(this), 500);

// new
setTimeout(() => {
  // ...
}, 500);

Но: Если код, вызывающий обратный вызов, явно устанавливает this на определенное значение , как это часто бывает с обработчиками событий, особенно с jQuery, и обратный вызов использует this (или arguments), вы не можете использовать функцию стрелки!

Variadic функции

Поскольку функции стрелок не имеют собственных arguments, вы не можете просто заменить их функцией стрелки. Однако ES2015 вводит альтернативу использованию arguments: параметр rest . 

// old
function sum() {
  let args = [].slice.call(arguments);
  // ...
}

// new
const sum = (...args) => {
  // ...
};

Связанный вопрос:

Дополнительные ресурсы:

51
задан Community 23 May 2017 в 02:01
поделиться

13 ответов

Нет никакого требования, чтобы все стили для селектора находились в единственном правиле, и единственное правило может относиться к нескольким селекторам... так зеркальное отражение это [приблизительно 111]: 

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

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

Примечание акцент на "концептуально" в том последнем предложении... Это просто подошло в комментариях, таким образом, я собираюсь подробно останавливаться на нем немного, так как я видел, что люди делают эту ту же ошибку много раз в течение многих лет - предшествующий даже существованию CSS: два атрибута, совместно использующие то же значение, не обязательно означают, что представляют тот же понятие . Небо может казаться красным вечером, и также - помидоры - но небо и помидор не являются красными по той же причине, и их цвета будут варьироваться со временем независимо. К тому же просто потому что у Вас, оказывается, есть два элемента в Вашей таблице стилей, которым дают тот же цвет, или размер или расположение не означают, что они будут всегда доля эти значения. Наивный разработчик, который использует группировку (как описано здесь) или переменный процессор, такой как ДЕРЗОСТЬ или МЕНЬШЕ избегать значение повторение, рискует вносить будущие изменения в моделирование невероятно подверженного ошибкам; всегда фокусируйтесь на контекстное значение из стилей когда надеющийся уменьшать повторение, игнорируя их текущие значения .

89
ответ дан Shog9 7 November 2019 в 09:53
поделиться

Нет, но Дерзость делает это. Это - препроцессор CSS, позволяя Вам использовать много ярлыков для сокращения суммы CSS, который необходимо записать.

, Например: 

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Вне переменных, это обеспечивает способность вложить селекторы, сохраняя вещи логически сгруппированными: 

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

существует больше: mixins, которые действуют отчасти как функции и способность наследовать один селектор от другого. Это очень умно и очень полезно.

, Если Вы кодируете в Ruby on Rails, он даже автоматически скомпилирует его в CSS для Вас, но существует также компилятор общего назначения, который может сделать это для Вас по запросу.

7
ответ дан Tim Sullivan 7 November 2019 в 09:53
поделиться

Вы не являетесь первыми для удивления, и ответ нет. Elliotte имеет хорошую напыщенную речь на нем: http://cafe.elharo.com/web/css-repeats-itself/ . Вы могли использовать JSP или его эквивалент, для генерации CSS во времени выполнения.

5
ответ дан sblundy 7 November 2019 в 09:53
поделиться

CSS не предлагает никакую подобную вещь. Единственное решение состоит в том, чтобы записать сценарий предварительной обработки, который или выполняется вручную для создания статического вывода CSS на основе некоторого динамического псевдо-CSS, или это сцепляется до веб-сервера и предварительно обрабатывает CSS до отправки его клиенту.

3
ответ дан Konrad Rudolph 7 November 2019 в 09:53
поделиться

Это не поддерживается в данный момент, если Вы не используете некоторый сценарий для создания CSS на основе некоторых переменных, определенных Вами.

кажется, тем не менее, что, по крайней мере, некоторые люди от мира браузера работа над ним . Так, если это действительно становится стандартом когда-то в будущем, тогда мы должны будем ожидать, пока это не будет реализовано во всех браузерах (это будет неприменимо до тех пор).

3
ответ дан Farinha 7 November 2019 в 09:53
поделиться

Так как CSS не имеет этого (все же, я полагаю, что следующая версия будет), последовать совету Konrad Rudolphs для предварительной обработки. Вы, вероятно, хотите использовать тот, который уже существует: m4

http://www.gnu.org/software/m4/m4.html

2
ответ дан Daren Thomas 7 November 2019 в 09:53
поделиться

Вы делаете его слишком сложным. Это - причина, каскад существует. Просто обеспечьте свои селекторы элемента и классифицируйте свой цвет: 

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Тогда применяют его к элементам в HTML, переопределяя, когда необходимо использовать цвета темы. 

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>
2
ответ дан 7 November 2019 в 09:53
поделиться

Я записал макрос (в Visual Studio), который позволяет мне не, только кодируют CSS для именованных цветов, но и легко вычислить оттенки или смешения тех цветов. Это также обрабатывает шрифты. Это стреляет, сохраняют, и производит отдельную версию файла CSS. Это соответствует аргумент Bert Bos , что любая обработка символа в CSS происходит при авторской разработке, не не при интерпретации.

полная установка наряду со всем кодом была бы немного слишком сложной для регистрации здесь, но могла бы подходить для сообщения в блоге в будущем. Вот раздел комментария от макроса, которого должно быть достаточно для начала работы.

<час>

цели этого подхода следующие:

  1. Позволяют основным цветам, шрифтам, и т.д. быть определенными в центральной части, так, чтобы весь pallete или типографскую обработку можно было легко настроить, не имея необходимость использовать поиск/замену

  2. , Избегают необходимости отображаться.CSS расширение в IIS

  3. Генерируют текстовые файлы CSS разнообразия сада, которые могут использоваться, например, режимом проектирования

  4. VisualStudio Генерируют эти файлы однажды в авторское время, вместо того, чтобы повторно вычислить их каждый раз, когда файл CSS требуют

  5. , Генерируют эти файлы немедленно и прозрачно, не добавляя дополнительные шаги к tweak-save-test рабочему процессу

С этим подходом, цветами, оттенками цветов, и семейства шрифтов все представлены с маркерами стенографии, которые обращаются к списку значений в XML-файле.

XML-файл, содержащий определения цветов и определения шрифта, нужно назвать Constants.xml и должен находиться в той же папке как файлы CSS.

метод ProcessCSS запущен EnvironmentEvents каждый раз, когда VisualStudio сохранил файл CSS. Файл CSS расширен, и расширенная, статическая версия файла сохраняется в/css/static/папке. (Все страницы HTML должны сослаться на/css/static/версии файлов CSS).

файл Constants.xml мог бы выглядеть примерно так: 

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

В файле CSS, у Вас могут тогда быть определения как: 

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */
2
ответ дан Herb Caudill 7 November 2019 в 09:53
поделиться

См. также , Предотвращение повторило константы в CSS . Как сказанная Маниоковая мука, был сделан CSS предложение по Переменным, но в настоящее время, Вы хотите использовать препроцессор.

1
ответ дан Community 7 November 2019 в 09:53
поделиться

Можно использовать несколько классов в атрибуте класса элемента HTML, каждой части обеспечения моделирования. Таким образом, Вы могли определить свой CSS как: 

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

и затем комбинируют классы как требуется: 

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

, Который позволяет Вам снова использовать ourColor класс, не имея необходимость определять цвет mulitple времена в Вашем CSS. Если Вы изменяете тему, просто изменяете правило для ourColour.

1
ответ дан Simon Forrest 7 November 2019 в 09:53
поделиться

Это может походить на безумие, но если Вы используете NAnt (или Муравей или некоторая другая автоматизированная система сборки), можно использовать свойства NAnt в качестве переменных CSS hacky способом. Запустите с файла шаблона CSS (возможно, styles.css.template или что-то) содержащий что-то вроде этого: 

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

И затем добавляют шаг к Вашей сборке, которая присваивает все значения свойств (я использую внешние файлы типа "build" и < include> их) и использование < expandproperties> фильтр для генерации фактического CSS: 

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

оборотная сторона, конечно, то, что необходимо выполнить css цель поколения, прежде чем можно будет проверить то, на что она похожа в браузере. И это, вероятно, ограничило бы Вас генерацией всего Вашего css вручную.

Однако можно записать функции NAnt, чтобы сделать все виды прохладных вещей вне просто расширения свойства (как генерация файлов изображений градиента динамично), таким образом, для меня это стоило головных болей.

1
ответ дан Matt 7 November 2019 в 09:53
поделиться

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

Вот два основных подхода для достижения более динамической обработки стиля:

  • переменные Серверной стороны во встроенном примере css
    (использующий PHP):

    <style> .myclass{color:<?php echo $color; ?>;} </style>

 

  • управление DOM с JavaScript для изменения css клиентский
    Примеры (пользующийся библиотекой jQuery):

    $('.myclass').css('color', 'blue');

    ИЛИ

    //The jsvarColor could be set with the original page response javascript
    // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

0
ответ дан 7 November 2019 в 09:53
поделиться

Вы можете достичь этого и многое другое, используя Less CSS .

15
ответ дан 7 November 2019 в 09:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: