Skip to content

Commit 21db31f

Browse files
author
gitanon
committed
CSS to Stylus
1 parent 5ba6c6e commit 21db31f

12 files changed

+137
-128
lines changed

‎_includes/css/class-names.css

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
/* Плохой пример */
2-
.t { ... }
3-
.red { ... }
4-
.header { ... }
2+
.t
3+
...
4+
.red
5+
...
6+
.header
7+
...
58

69
/* Хороший пример */
7-
.tweet { ... }
8-
.important { ... }
9-
.tweet-header { ... }
10+
.tweet
11+
...
12+
13+
.important
14+
...
15+
16+
.tweet-header
17+
...

‎_includes/css/comments.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
/* Плохой пример */
22
/* Modal header */
3-
.modal-header {
3+
.modal-header
44
...
5-
}
65

76
/* Хороший пример */
87
/* Обертывающий элемент для .modal-title и .modal-close */
9-
.modal-header {
8+
.modal-header
109
...
11-
}

‎_includes/css/declaration-order.css

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
1-
.declaration-order {
2-
/* Позиционирование */
3-
position: absolute;
4-
top: 0;
5-
right: 0;
6-
bottom: 0;
7-
left: 0;
8-
z-index: 100;
9-
10-
/* Блочная модель */
11-
display: block;
12-
float: right;
13-
width: 100px;
14-
height: 100px;
15-
16-
/* Типографика */
17-
font: normal 13px "Helvetica Neue", sans-serif;
18-
line-height: 1.5;
19-
color: #333;
20-
text-align: center;
21-
22-
/* Отображение */
23-
background-color: #f5f5f5;
24-
border: 1px solid #e5e5e5;
25-
border-radius: 3px;
26-
27-
/* Прочее */
28-
opacity: 1;
29-
}
1+
.declaration-order
2+
background-color #f5f5f5
3+
border 1px solid #e5e5e5
4+
border-radius 3px
5+
bottom 0
6+
color #333
7+
display block
8+
font normal 13px "Helvetica Neue", sans-serif
9+
height 100px
10+
left 0
11+
float right
12+
line-height 1.5
13+
opacity 1
14+
position absolute
15+
right 0
16+
text-align center
17+
top 0
18+
width 100px
19+
z-index 100

‎_includes/css/media-queries.css

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
1-
.element { ... }
2-
.element-avatar { ... }
3-
.element-selected { ... }
4-
5-
@media (min-width: 480px) {
6-
.element { ...}
7-
.element-avatar { ... }
8-
.element-selected { ... }
9-
}
1+
.element
2+
...
3+
4+
.element-avatar
5+
...
6+
7+
.element-selected
8+
...
9+
10+
@media (min-width: tablet)
11+
.element
12+
...
13+
14+
.element-avatar
15+
...
16+
17+
.element-selected
18+
...

‎_includes/css/nesting.scss

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
// Без вложенности
2-
.table > thead > tr > th { … }
3-
.table > thead > tr > td { … }
2+
.table > thead > tr > th
3+
...
4+
.table > thead > tr > td
5+
...
46

57
// С вложенностью
6-
.table > thead > tr {
7-
> th { … }
8-
> td { … }
9-
}
8+
.table > thead > tr
9+
> th
10+
...
11+
> td
12+
...
13+

‎_includes/css/organization-comments.css

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
* Заголовок раздела для компонента
33
*/
44

5-
.element { ... }
5+
.element
6+
...
67

78

89
/*
@@ -11,7 +12,9 @@
1112
* Иногда возникает необходимость включения дополнительного контекста для всего компонента. Сделайте это в этом месте, если это достаточно важно.
1213
*/
1314

14-
.element { ... }
15+
.element
16+
...
1517

1618
/* Контекстный под-компонент или модификатор */
17-
.element-heading { ... }
19+
.element_heading
20+
...

‎_includes/css/prefixed-properties.css

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
/* Свойства с префиксами */
2-
.selector {
3-
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
4-
box-shadow: 0 1px 2px rgba(0,0,0,.15);
5-
}
2+
.selector
3+
box-shadow: 0 1px 2px rgba(0,0,0,.15)

‎_includes/css/selectors.css

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
/* Плохой пример */
2-
span { ... }
3-
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
4-
.avatar { ... }
2+
span
3+
...
4+
.page-container #stream .stream-item .tweet .tweet-header .username
5+
...
6+
.avatar
7+
...
58

69
/* Хороший пример */
7-
.avatar { ... }
8-
.tweet-header .username { ... }
9-
.tweet .avatar { ... }
10+
.avatar
11+
...
12+
13+
.tweet-header .username
14+
...
15+
16+
.tweet .avatar
17+
...
18+

‎_includes/css/shorthand.css

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
/* Плохой пример */
2-
.element {
3-
margin: 0 0 10px;
4-
background: red;
5-
background: url("image.jpg");
6-
border-radius: 3px 3px 0 0;
7-
}
2+
.element
3+
margin 0 0 10px
4+
background red
5+
background url(http://github.com/%3Cspan%20class=pl-s%3E"image.jpg"%3C/span%3E)
6+
border-radius 3px 3px 0 0
87

98
/* Хороший пример */
10-
.element {
11-
margin-bottom: 10px;
12-
background-color: red;
13-
background-image: url("image.jpg");
14-
border-top-left-radius: 3px;
15-
border-top-right-radius: 3px;
16-
}
9+
.element
10+
margin-bottom 10px
11+
background-color red
12+
background-image url(http://github.com/%3Cspan%20class=pl-s%3E"image.jpg"%3C/span%3E)
13+
border-top-left-radius 3px
14+
border-top-right-radius 3px

‎_includes/css/single-declarations.css

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
/* Одиночные объявления в одну строчку */
2-
.span1 { width: 60px; }
3-
.span2 { width: 140px; }
4-
.span3 { width: 220px; }
1+
/* Одиночные объявления */
2+
.span1
3+
width 60px
4+
.span2
5+
width 140px
6+
.span3
7+
width 220px
58

69
/* Несколько объявлений, по одному на каждую строчку */
7-
.sprite {
8-
display: inline-block;
9-
width: 16px;
10-
height: 15px;
11-
background-image: url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg/sprite.png);
12-
}
13-
.icon { background-position: 0 0; }
14-
.icon-home { background-position: 0 -20px; }
15-
.icon-account { background-position: 0 -40px; }
10+
.sprite
11+
display inline-block
12+
width 16px
13+
height 15px
14+
background-image url(http://github.com/..%3Cspan%20class=pl-c1%3E/%3C/span%3Eimg%3Cspan%20class=pl-c1%3E/%3C/span%3Esprite.png)
15+
16+
.icon
17+
background-position 0 0
18+
.icon-home
19+
background-position 0 -20px
20+
.icon-account
21+
background-position 0 -40px

‎_includes/css/syntax.css

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
/* Плохой CSS */
1+
/* Плохой Stylus */
22
.selector, .selector-secondary, .selector[type=text] {
33
padding:15px;
44
margin:0px 0px 15px;
55
background-color:rgba(0, 0, 0, 0.5);
66
box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
77
}
88

9-
/* Хороший CSS */
9+
/* Хороший Stylus */
1010
.selector,
1111
.selector-secondary,
12-
.selector[type="text"] {
13-
padding: 15px;
14-
margin: 0 0 15px;
15-
background-color: rgba(0,0,0,.5);
16-
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
17-
}
12+
.selector[type="text"]
13+
padding 15px
14+
margin 0 0 15px
15+
background-color rgba(0,0,0,0.5)
16+
box-shadow 0 1px 2px #ccc, inset 0 1px 0 #fff

0 commit comments

Comments
 (0)