You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ru/_architecture.md
-35Lines changed: 0 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,8 +15,6 @@
15
15
<p>Я понял, что в основном архитектура зависит от проекта. Используйте или адаптируйте предложенное решение так, чтобы вы имели дело с системой, которая соответствует вашим потребностям.</p>
16
16
</div>
17
17
18
-
19
-
20
18
### Дальнейшее чтение
21
19
22
20
*[Architecture for a Sass project](http://www.sitepoint.com/architecture-sass-project/)
@@ -26,11 +24,6 @@
26
24
*[An Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
27
25
*[Atomic Web Design](http://bradfrost.com/blog/post/atomic-web-design/)
28
26
29
-
30
-
31
-
32
-
33
-
34
27
## Компоненты
35
28
36
29
Существует главное отличие между тем, чтобы сделать код *работающим*, или сделать его *хорошим*. Опять таки, CSS – вполне несносный язык <sup>[указать источник]</sup>. Чем меньше CSS мы имеем, тем лучше. Мы не хотим иметь дело с мегабайтами кода. Чтобы держать файлы стилей короткими и эффективными – и это не будет для вас сюрпризом – чаще всего будет хорошей идеей подумать об интерфейсе, как о наборе компонентов.
@@ -45,11 +38,6 @@
45
38
46
39
Большинство интерфейсов можно рассматривать как набор маленьких компонентов, и я настоятельно рекомендую вам придерживаться этой парадигмы. Это позволит не только сократить количество CSS, необходимого для всего проекта, но также упростить его поддержку, и прибрать хаотический беспорядок.
47
40
48
-
49
-
50
-
51
-
52
-
53
41
## Шаблон 7-1
54
42
55
43
Возвратимся к архитектуре? Я обычно использую так называемый *Шаблон 7-1*: 7 папок, 1 файл. Обычно у вас есть все ваши куски в 7 разных папках, и один файл в корневом каталоге (обычно с именем `main.scss`), который импортирует их все.
@@ -131,8 +119,6 @@ sass/
131
119
<p>Следующие файлы имеют то же соглашение по именованию, что и выше: они отделены нижним подчеркиванием.</p>
132
120
</div>
133
121
134
-
135
-
136
122
### Папка Base
137
123
138
124
Папка `base/` содержит то, что мы можем назвать общим шаблоном проекта. Там вы можете найти файл сброса, некоторые типографские правила, и, вероятно, стили (я привык их называть `_base.scss`), определяющие некоторые стандартные стили для часто используемых элементов HTML.
@@ -141,8 +127,6 @@ sass/
141
127
*`_reset.scss`
142
128
*`_typography.scss`
143
129
144
-
145
-
146
130
### Папка Layout
147
131
148
132
Папка `layout/` содержит всё, что принимает участие в постройке раскладки сайта или приложения. Эта папка может содержать стили для основных частей сайта (шапка, подвал, навигация, боковая панель…), сетка или даже CSS-стили для всех форм.
@@ -158,8 +142,6 @@ sass/
158
142
<p>Папка <code>layout/</code> может быть названа <code>partials/</code>, на ваше усмотрение.</p>
159
143
</div>
160
144
161
-
162
-
163
145
### Папка Components
164
146
165
147
Для маленьких компонентов есть папка `components/`. В то время, как `layout/` – *основные* (определяют общий каркас), код внутри `components/` больше сфокусирован на виджетах и содержит все модули, вроде слайдера, загрузчика и тому подобных виджетов. Обычно файлов в `components/` много, если приложение или сайт состоит из множества мелких модулей.
@@ -172,8 +154,6 @@ sass/
172
154
<p>Папка <code>components/</code> может называться <code>modules/</code>, на ваше усмотрение.</p>
173
155
</div>
174
156
175
-
176
-
177
157
### Папка Pages
178
158
179
159
Если у вас есть стили, зависящие от страницы, лучше положить их в папку `pages/`, в файл, названный в честь страницы. Например, не редкость – иметь очень конкретные стили для главной страницы, следовательно, существует потребность в `_home.scss` в `pages/`.
@@ -185,8 +165,6 @@ sass/
185
165
<p>В зависимости от способа доставки кода, эти файлы можно было бы назвать самостоятельно, чтобы избежать их объединения с другими стилями. На ваше усмотрение.</p>
186
166
</div>
187
167
188
-
189
-
190
168
### Папка Themes
191
169
192
170
В больших сайтах и проложениях не редко есть разные темы оформления. Есть разные способы работы с темами, я лично предпочитаю складывать их в папку `themes/`.
@@ -198,8 +176,6 @@ sass/
198
176
<p>Это очень зависит от проекта и не сильно распространено.</p>
199
177
</div>
200
178
201
-
202
-
203
179
### Папка Utils
204
180
205
181
Папка `utils/` собирает все инструменты и помощники Sass в проекте. Каждая глобальная переменная, функция и примесь должна быть помещена сюда.
@@ -215,8 +191,6 @@ sass/
215
191
<p>Папка <code>utils/</code> может также быть названа <code>helpers/</code>, <code>sass-helpers/</code> или <code>sass-utils/</code>, на ваше усмотрение.</p>
216
192
</div>
217
193
218
-
219
-
220
194
### Папка Vendors
221
195
222
196
И последнее, но не менее важное, что большинство проектов будут иметь папку `vendors/`, содержащую все CSS-файлы из внешних библиотек и фреймворков – Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered и так далее. Нахождение этих файлов в этой папке – хороший способ сказать: "Эй, это не я писал, не мой код, не моя ответственность".
@@ -230,8 +204,6 @@ sass/
230
204
231
205
Например, файл `vendors-extensions/_boostrap.scss`, содержащий все CSS-правила на перезапись CSS-правил Bootstrap. Это для того, чтобы не править сами внешние модули, что на самом деле не очень хорошая идея.
232
206
233
-
234
-
235
207
### Файл Main
236
208
237
209
Главный файл (обычно названный `main.scss`) должен быть единственным файлом Sass, который не начинается с нижнего подчеркивания. Этот файл не должен содержать ничего, кроме `@import` и комментариев.
@@ -414,11 +386,6 @@ sass/
414
386
<p>Как было сказано, я не рекомендую это, потому что используется упорядочение по алфавиту, что иногда может быть не тем, что вы хотите, особенно, когда вы имеете дело с языком, в котором важно упорядочение.</p>
415
387
</div>
416
388
417
-
418
-
419
-
420
-
421
-
422
389
## Файл позора
423
390
424
391
Это интересная идея, которая стала популярна благодаря [Гарри Робертсу](http://csswizardry.com), [Дэйву Руперту](http://daverupert.com) и [Крису Койеру](http://css-tricks.com) и состоит в том, чтобы складывать все хаки и код, которым вы не гордитесь, в *файл позора*. Поэтому этот файл и имеет такое драматическое название – `_shame.scss`, импортируется в самом конце.
Copy file name to clipboardExpand all lines: ru/_author.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
2
2
# Об авторе
3
3
4
-
Меня зовут [Hugo Giraudel](http://hugogiraudel.com), Я frontend-разработчик из Франции, собираюсь переехать в Германию, в Берлин. Я пишу на Sass больше двух лет и теперь являюсь автором таких Sass-проектов, как [SassDoc](http://sassdoc.com) и [Sass-Compatibility](http://sass-compatibility.github.io).
4
+
Меня зовут [Hugo Giraudel](http://hugogiraudel.com), я frontend-разработчик из Франции, собираюсь переехать в Германию, в Берлин. Я пишу на Sass больше двух лет и теперь являюсь автором таких Sass-проектов, как [SassDoc](http://sassdoc.com) и [Sass-Compatibility](http://sass-compatibility.github.io).
5
5
6
6
Я также написал несколько библиотек, в основном ради интереса: [SassyJSON](https://github.com/HugoGiraudel/SassyJSON), [SassyLists](http://sassylists.com), [SassySort](https://github.com/HugoGiraudel/SassySort), [SassyCast](https://github.com/HugoGiraudel/SassyCast), [SassyMatrix](https://github.com/HugoGiraudel/SassyMatrix), [SassyBitwise](https://github.com/HugoGiraudel/SassyBitwise), [SassyIteratorsGenerators](https://github.com/HugoGiraudel/SassyIteratorsGenerators), [SassyLogger](https://github.com/HugoGiraudel/SassyLogger), [SassyStrings](https://github.com/HugoGiraudel/SassyStrings) и [SassyGradients](https://github.com/HugoGiraudel/SassyGradients).
Copy file name to clipboardExpand all lines: ru/_comments.md
+7-21Lines changed: 7 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,11 +14,6 @@ CSS является сложным языком, полным хаков и к
14
14
15
15
И я, наверное, забыл много других различных причин. Комментирование занимает очень мало времени, когда делается вместе с написанием кода, так что делайте это в нужное время. Возвращаясь на кусок кода, чтобы комментировать его, не только совершенно невозможно, но и крайне раздражительно.
16
16
17
-
18
-
19
-
20
-
21
-
22
17
## Написание комментариев
23
18
24
19
В идеале, *любой* набор CSS правил должен предшествовать комментарию в стиле Си, объясняя цель блока CSS. Этот комментарий также принимает пронумерованные объяснения по поводу конкретных частей набора правил. Например:
@@ -28,9 +23,9 @@ CSS является сложным языком, полным хаков и к
28
23
{% highlight scss %}
29
24
/**
30
25
* Вспомогательный класс для усечения и добавления многоточия в слишком длинную строку
31
-
* на одной линии.
32
-
*1. Предотвращает сворачивание содержимого, оставляет его на одной линии.
33
-
*2. Добавляет многоточие на конце линии.
26
+
* на одной строке.
27
+
*1. Предотвращает сворачивание содержимого, оставляет его на одной строке.
28
+
*2. Добавляет многоточие на конце строки.
34
29
*/
35
30
.ellipsis {
36
31
white-space: nowrap; /* 1 */
@@ -43,9 +38,9 @@ CSS является сложным языком, полным хаков и к
43
38
{% highlight sass %}
44
39
/**
45
40
* Вспомогательный класс для усечения и добавления многоточия в слишком длинную строку
46
-
* на одной линии.
47
-
*1. Предотвращает сворачивание содержимого, оставляет его на одной линии.
48
-
*2. Добавляет многоточие на конце линии.
41
+
* на одной строке.
42
+
*1. Предотвращает сворачивание содержимого, оставляет его на одной строке.
Каждая переменная, функция, примесь и placeholder, который предназначен для повторного использования во всём коде, должен быть задокументирован как часть глобального API с использованием [SassDoc](http://sassdoc.com).
Copy file name to clipboardExpand all lines: ru/_contributing.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
2
2
# Сотрудничество
3
3
4
-
Руководство Sass – открытый проект, которым я руковожу в свободное время. Излишне говорить, что это довольно большой объем работы, чтобы держать всё задокументированным в последней версии. Знать, что вам понравилось это руководство – уже ценно!
4
+
Руководство Sass – открытый проект, которым я руковожу в свободное время. Излишне говорить, что это довольно большой объем работы – держать всё задокументированным в последней версии. Знать, что вам понравилось это руководство – уже бесценно!
5
5
6
-
Теперь, если вы чувтствуете, что готовы к сотрудничеству, пожалуйста, знайте, уже будет очень здорово просто твитнуть, рассказать или открыть Pull Request с исправлением ошибок в [репозитории на GitHub](https://github.com/HugoGiraudel/sass-guidelines)!
6
+
Теперь, если вы чувстствуете, что готовы к сотрудничеству – пожалуйста, знайте, будет уже очень здорово просто твитнуть, рассказать или открыть Pull Request с исправлением ошибок в [репозитории на GitHub](https://github.com/HugoGiraudel/sass-guidelines)!
7
7
8
8
Прежде, чем мы начнём: если вам понравился этот документ, или он оказался полезен вам или вашей команде, пожалуйста, подумайте о его поддержке!
Copy file name to clipboardExpand all lines: ru/_errors.md
-12Lines changed: 0 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,19 +11,12 @@
11
11
12
12
Теперь есть много пространства в вашем проекте на Sass для предупреждений и ошибок. Обычно любая примесь или функция, за исключением специальных типов или аргументов, может выкинуть ошибку, если произойдёт что-то неожиданное, или вывести предупреждение, когда делает предположение.
13
13
14
-
15
-
16
14
### Дальнейшее чтение
17
15
18
16
*[An Introduction To Error Handling](http://webdesign.tutsplus.com/tutorials/an-introduction-to-error-handling-in-sass--cms-19996)
19
17
*[Building a Logger Mixin](http://webdesign.tutsplus.com/tutorials/building-a-logger-mixin-in-sass--cms-22070)
Возьмём функцию из [Sass-MQ](https://github.com/sass-mq/sass-mq), предполагающую конвертирование из `px` в `em`, например:
@@ -59,11 +52,6 @@
59
52
60
53
Если значение отсутствет, то функция предполагает, что значение подразумевает собой измерение в пикселях. С этой точки зрения, предположение может быть рискованным для пользователя и поэтому он должен быть предупреждён, что программа сделает что-то, что может быть неожиданным поведением.
61
54
62
-
63
-
64
-
65
-
66
-
67
55
## Ошибки
68
56
69
57
Ошибки, в отличие от предупреждений, предотвращают компилятор от дальнейшей работы. Обычно они останавливают сборку и выводят сообщение в поток вывода, также как и в stack trace, что весьма удобно для отладки. Из-за этого ошибки должны быть выведены только тогда, когда уже нет возможности для выполнения программы. Когда есть возможность, попробуйте обойти эту проблему и вывести вместо этого предупреждение.
0 commit comments