Препроцессоры css

Less, Sass, Stylus

#1 16 марта 2019 в 16:35
Доброго времени суток друзья! В ходе развития web разработки появилось новое понятие "Препроцессор", появились различные инструменты для генерации css. Я как то не предавал этому значения, открывал старый добрый Notepad++ и в нем штурмовал стили. Но вот не давно решил посмотреть на требования работодателей к web разработчикам. И вижу что все требуют знаний "Препроцессоров" начиная от фронтендщиков и заканчивая начинающими верстальщиками. Оглядел я эти инструменты поверхностно и вот не пойму, зачем всем работодателям все это? В чем преимущество? Может кто то сможет объяснить на реальных примерах в чем плюсы и минусы препроцессоров? Ну или просто рассказать :)
А то глядя на это:
  1.  
  2. input-height = 40px // Это переменная
  3. main
  4. display block
  5. margin 0
  6. padding 0
  7. input
  8. height input-height
  9. font-size 1.2em
  10.  
мне кажется что добавляется лишняя писанина и костыли.
Спасибо за ответы :)
#2 16 марта 2019 в 17:09
Где меньше кода?

  1.  
  2. .track
  3. color: #fff
  4. &__title
  5. paddding: 10px
  6. &:hover, &:focus
  7. color: blue
  8.  
или

  1.  
  2. .track { color: #FFF;}
  3. .track__title { padding: 10px;}
  4. .track__title:hover, .track-title:focus { color: blue}
  5.  
Ну и переменные это тоже здорово. Задал к примеру паддинги в переменную. И при верстке не пытаешься вспоминать какие они должны быть.
#3 16 марта 2019 в 17:17

В чем преимущество?

DrDooM
В этой теме все уже давно описано. Преимущества находят только разработчики.

Может кто то сможет объяснить на реальных примерах в чем плюсы и минусы препроцессоров?

DrDooM
Вот два файла одной сущности Widgets styles, один обычный css другой less. И допустим стоит задача изменить высоту шрифта с font-size:13px; на font-size:15px;. Выполняйте.
В первом файле css Вы будете три раза находить font-size:13px; а в файле less достаточно в начале в списке переменных изменить значение переменой @-widget----title--links_font_size_2: 13px; на @-widget----title--links_font_size_2: 15px; И также можно вынести отдельной переменной любое значение стилевого свойсва и изменять только эту величину.

/* Widgets layout =========================================================== */

.widget {
background:#FFF;
margin-bottom:10px;
}

.widget_ajax_wrap:last-child .widget:last-child {
margin-bottom: 0;
}
.widget_ajax_wrap {
position: relative;
box-sizing: border-box;
}
.widget > .title{
padding:0 15px;
height:47px;
line-height:47px;
background: #34495E;
font-weight: bold;
font-size:18px;
color:#FFF;
margin: 0;
}

.widget > .title .links {
float:right;
font-size:13px;
}

.widget > .title .links a{
padding: 2px 8px;
background: #27ae60;
color:#fff;
font-size: 12px;
font-weight: normal;
text-decoration: none;
margin-top:-2px;
}

.widget > .title .links a:hover{
background:#2ecc71;
}

.widget > .body{
padding:15px;
line-height: 20px;
}

.widget_text_block{
overflow: hidden;
}

aside .widget {
background: #FFF;
}

aside .widget > .title {
font-size:12px;
color:#FFF;
background: #34495E;
height:38px;
line-height:38px;
padding-right:5px;
}


/* Tabbed Widgets layout ==================================================== */

.widget_tabbed {
margin-bottom:10px;
background:#FFF;
}

.widget_tabbed .tabs ul,
.widget_tabbed .tabs ul li{
margin: 0; padding: 0; list-style: none;
}

.widget_tabbed .tabs ul {
overflow:hidden;
height:47px;
line-height:47px;
background: #34495E;
}

.widget_tabbed .tabs ul li {
float:left;
height:45px;
line-height:45px;
}

.widget_tabbed .tabs ul li a {
display:block;
height:47px;
line-height:47px;
font-size:14px;
padding:0 15px;
cursor: pointer;
color:#FFF;
}

.widget_tabbed .tabs ul li a.active {
background-color:#FFF;
color:#34495E;
}

.widget_tabbed .body {
padding:15px;
line-height: 20px;
}

.widget_tabbed > .tabs .links {
float:right;
font-size:13px;
padding-right:15px;
}

.widget_tabbed > .tabs .links a {
display:inline;
padding: 3px 8px;
background: #27ae60;
color:#fff;
font-size: 12px;
font-weight: normal;
text-decoration: none;
margin: 0 5px 0 0;
}
.widget_tabbed > .tabs .links a:last-child {
margin-right: 0;
}

.widget_tabbed > .tabs .links a:hover {
background:#2ecc71;
}

aside .widget_tabbed .tabs ul {
height:38px;
line-height:38px;
}

aside .widget_tabbed .tabs ul li.links{
height:25px;
line-height:25px;
padding-right:5px;
}

aside .widget_tabbed .tabs ul li a {
font-size:12px;
height:38px;
line-height:38px;
font-weight: bold;
}

aside .widget_tabbed .tabs ul li a.active {}

aside .widget_tabbed .body {
}

aside .widget_tabbed > .tabs .links a {
background: #27ae60;
color:#fff;
font-size: 10px;
}

/* Widgets styles =========================================================== */

.widget_content_list { overflow: hidden; }

.columns-2 .widget_content_list .item { float:left; width:47%; }
.columns-2 .widget_content_list .item:nth-child(3) { clear:left; }
.columns-3 .widget_content_list .item { float:left; width:31%; }
.columns-3 .widget_content_list .item:nth-child(4) { clear:left; }
.columns-4 .widget_content_list .item { float:left; width:22%; }
.columns-4 .widget_content_list .item:nth-child(5) { clear:left; }

.widget_content_list .item { margin-bottom: 10px; overflow: hidden; }
.widget_content_list .item:last-child { margin-bottom: 0; }

.widget_content_list .item .image { float:left; margin-right: 10px; }
.widget_content_list .item .image img { display: block; }
.widget_content_list .item .info { }

.widget_content_list .item .title{ font-size:16px; margin-bottom: 3px; }
.widget_content_list .details { font-size:11px; color:#999; }
.widget_content_list .details a{ color:#BDC3C7; }
.widget_content_list .details a:hover{ color:#d35400; }

.widget_content_list .details span {padding-right: 5px;}
.widget_content_list .details span.comments {
padding-left:20px;
background: url("../images/icons/comment-small.png") no-repeat left center;
}

.widget_content_list.featured .item .title { font-size:14px; }
.widget_content_list.featured .item-first { float:left; margin-right:15px; width:33%; }
.widget_content_list.featured .item-first .image { margin-bottom: 5px; clear:both; width:100%; height:150px; }
.widget_content_list.featured .item-first .image a, .widget_content_list.featured .item-first .image > div { display:block; width:100%; height:100%; background-position: center; background-repeat: no-repeat; background-color:#bdc3c7; background-size: cover; }
.widget_content_list.featured .item-first .title { font-size:21px; margin-top:5px; line-height: 24px;}
.widget_content_list.featured .item-first .title a { color:#000; text-decoration: none; }
.widget_content_list.featured .item-first .read-more a {
display:inline-block;
clear:both;
background: #2980b9;
color:#FFF;
text-decoration: none;
padding:5px 10px;
margin-top: 10px;
}

.widget_content_list.featured .item-first .read-more a:hover { background:#3498db; }
.widget_content_list.tiles-big { margin-right: -15px; }
.widget_content_list.tiles-big .item .title { font-size:14px; }
.widget_content_list.tiles-big .item { float: left; margin-bottom: 15px; width: calc(25% — 15px); margin-right: 15px; box-sizing: border-box; }
.widget_content_list.tiles-big .item:nth-child(5),
.widget_content_list.tiles-big .item:nth-child(9),
.widget_content_list.tiles-big .item:nth-child(13),
.widget_content_list.tiles-big .item:nth-child(17),
.widget_content_list.tiles-big .item:nth-child(21),
.widget_content_list.tiles-big .item:nth-child(25) { clear:left; }
.widget_content_list.tiles-big .item .image { margin-bottom: 5px; clear:both; width:100%; height:100px; }
.widget_content_list.tiles-big .item .image a, .widget_content_list.tiles-big .item .image > div { display:block; width:100%; height:100%; background-position: center; background-repeat: no-repeat; background-color:#bdc3c7; background-size: cover; }
.widget_content_list.tiles-big .item .title { font-size:14px; margin-top:5px; }
.widget_content_list.tiles-big .item .title a { color:#000; text-decoration: none; }
.widget_content_list.tiles-big .item .title a:hover { color:#34495e; text-decoration: underline; }

.widget_content_list.tiles-small .item { margin:0; margin-right: 4px; margin-bottom: 4px; float:left; }
.widget_content_list.tiles-small .item .image { margin:0; }

.widget_content_list.compact .item { margin-bottom: 5px; }
.widget_content_list.compact .item:last-child { margin-bottom: 0; }
.widget_content_list.compact .item .title { font-size:13px; margin-bottom: 0; line-height: 15px; }

@media screen and (max-width: 480px) {
.widget_content_list .item, .widget_content_list.featured .item-first {
width: 100% !important;
}
}

/* ========================================================================== */

.widget_content_slider { overflow: hidden; position: relative;}
.widget_content_slider .slide {
overflow: hidden;
position: relative;
width: 100%;
}
.widget_content_slider > table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.widget_content_slider > table td,
.widget_content_slider > table th {
padding: 0;
}
.widget_content_slider .slide img {
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.widget_content_slider .slide img:first-child, .widget_content_slider img {
display:block;
}
.widget_content_slider .slide .heading {
background: rgba(0, 0, 0, 0.85);
display: block;
padding: 10px;
right: 0;
position:absolute;
left:0;
bottom:0;
z-index:2
}

.widget_content_slider .slide .heading h2,
.widget_content_slider .slide .heading .teaser{
display: inline-block;
margin:0;
color:#ecf0f1;
}

.widget_content_slider .slide .heading h2 {
font-size:14px;
font-weight: bold;
color:#f1c40f;
}

.widget_content_slider .slide .heading .teaser{
font-size:12px;
}

.widget_content_slider .slide .heading .teaser .date{
color: #7f8c8d;
padding-left: 10px;
}

.widget_content_slider .items {
background:#ecf0f1;
position: relative;
z-index: 2;
}

.widget_content_slider .items .item {
overflow: hidden;
padding:10px;
font-size:12px;
line-height:15px;
cursor:pointer;
position:relative;
}

.widget_content_slider .items .item:hover {
background:#bdc3c7;
}

.widget_content_slider .items .item .title {
display:block;
vertical-align:middle;
color:#000;
}

.widget_content_slider .items .item.active {
background:#27ae60;
}

.widget_content_slider .items .item.active .title {
color:#FFF;
}
@media (max-width: 767px) {
.widget_content_slider .items .item .title {
display:none;
}
}
@media (min-width: 768px) {
.widget_content_slider .slide {
width: 70%;
}
.widget_content_slider .items {
width: 30%;
}
.widget_content_slider .items .item .image {
float:left; margin-right: 10px;
}
}

@media (min-width: 992px) and (max-width: 1199px) {
.widget_content_slider .items .item {
padding: 8px;
}
}

/* ========================================================================== */

.widget_activity_list { overflow: hidden; }

.widget_activity_list h4 { margin:0; margin-bottom: 5px; }

.widget_activity_list .item { margin-bottom: 10px; overflow: hidden; }
.widget_activity_list .item:last-child { margin-bottom: 0; }

.widget_activity_list .item > .image { float:left; margin-right: 10px; padding:2px; border:solid 1px #B3C2C9; }
.widget_activity_list .item > .image img { display: block; }
.widget_activity_list .item .info { line-height:17px; padding-top:2px; }

.widget_activity_list .item .title{ }
.widget_activity_list .item .title a.author{ color:#376499; }
.widget_activity_list .item .title a.author:hover{ color:#d35400; }

.widget_activity_list .item .details { font-size:11px; }
.widget_activity_list .item .details .date { color:#999; }
.widget_activity_list .item .details .reply {
padding-left: 5px;
}
.widget_activity_list .item .details .reply a {
padding-left: 20px;
background:url("../images/icons/comment-small.png") no-repeat left center;
color:#BDC3C7;
}

.widget_activity_list .item .details .reply a:hover {
color:#d35400;
}

.widget_activity_list .item .images { overflow: hidden; margin:10px 0; padding-left:48px; }
.widget_activity_list .item .images .image {
float:left; margin-right:2px;
display:block; overflow: hidden;
}
.widget_activity_list .item .images .image.more {
background: #ecf0f1;
text-align: center;
line-height: 64px;
font-size:18px;
}
.widget_activity_list .item .images .image.more a {
display:block; width: 64px; height:64px; overflow: hidden;
color:#7f8c8d;
text-decoration: none;
}
.widget_activity_list .item .images .image.more a:hover {
color:#2c3e50;
}
.widget_activity_list .item .images .image.more a span{
}

.widget_activity_list .item .actions {
float:right;
visibility: hidden;
}

.widget_activity_list .item:hover .actions {
visibility: visible;
}

.widget_activity_list .actions .delete{
display:inline-block;
width:16px;
height:16px;
background:url("../images/icons/delete.png") no-repeat center;
}
/* ========================================================================== */

.widget_comments_list { overflow: hidden; line-height: 20px; }

.widget_comments_list .item { margin-bottom: 15px; overflow: hidden; }
.widget_comments_list .item:last-child { margin-bottom: 0; }

.widget_comments_list .item .image { float:left; margin-right: 10px; padding:2px; border:solid 1px #B3C2C9; }
.widget_comments_list .item .image img { display: block; }
.widget_comments_list .item .info { line-height:17px; padding-top:2px; }

.widget_comments_list .item .title{ }
.widget_comments_list .item .title a.author{ color:#376499; }
.widget_comments_list .item .title a.author:hover{ color:#d35400; }

.widget_comments_list .item .title a.subject{ padding-right: 5px; }

.widget_comments_list .item .date { font-size:11px; color:#999; padding-right: 5px; }
.widget_comments_list .item .text { color:#666; }

/* ========================================================================== */

.widget_profiles_list { overflow: hidden; }

.columns-2 .widget_profiles_list .item { float:left; width:50%; }
.columns-2 .widget_profiles_list .item:nth-child(3) { clear:left; }
.columns-3 .widget_profiles_list .item { float:left; width:33%; }
.columns-3 .widget_profiles_list .item:nth-child(4) { clear:left; }
.columns-4 .widget_profiles_list .item { float:left; width:25%; }
.columns-4 .widget_profiles_list .item:nth-child(5) { clear:left; }

.columns-2 .widget_profiles_list.list .item,
.columns-3 .widget_profiles_list.list .item,
.columns-4 .widget_profiles_list.list .item{
padding-right:10px;
}

.widget_profiles_list.list .item {
line-height:32px;
margin-bottom: 5px;
padding: 0 0 10px 0;
clear: both;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}

.widget_profiles_list.list .item:last-child { margin-bottom: 0; }

.widget_profiles_list.list .item .image { float:left; margin-right: 10px; }
.widget_profiles_list .item .image img, .item-avatar > img { display: block; }
.widget_profiles_list.list .item .info { float:left; }

.widget_profiles_list.tiles .item, .widget_online_list .item, .widget_user_avatar .default_avatar { display:inline-block; }

.widget_profiles_list.list .item:last-child {
padding: 0;
}
.widget_profiles_list.list .item .field {
line-height: 18px;
}

/* ========================================================================== */

.widget_online_list { overflow: hidden; }

.widget_online_list .item-name {
padding-left:18px;
padding-right:2px;
background:url("../images/icons/user.png") no-repeat left center;

}

/* ========================================================================== */

.widget_content_tree ul{
margin:0;
padding:0;
}

.widget_content_tree li{
margin-left: 0px;
list-style: none;
padding-left:20px;
background: url("../images/icons/folder.png") no-repeat left 1px;
}
.folder_hidden { display: none; }
.widget_content_tree ul li.active > a:hover,
.widget_content_tree ul li.active > a { color:#000; text-decoration: none; }

/* ========================================================================== */

.widget_user_avatar .user_info {
overflow: hidden;
clear:both;
margin:-15px;
padding:6px;
margin-bottom: 10px;
background:#34495E;
}

.widget_user_avatar .user_info .avatar{
float:right;
}

.widget_user_avatar .user_info .name {
height:32px;
line-height: 32px;
padding-left:10px;
}

.widget_user_avatar .user_info .name a {
color:#FFF;
text-decoration: none;
font-size:12px;
font-weight: bold;
}
.widget_user_avatar {
position: relative;
}
header .widget_user_avatar {
margin-right: -14px;
}
header .widget_user_avatar .user_info {
float: right;
clear: none;
margin: 0;
background: none;
line-height: 50px;
height: 50px;
padding: 9px 34px 9px 5px;
box-sizing: border-box;
transition: background 0.5s;
position: relative;
}
header .widget_user_avatar .user_info:after {
content: '';
background: url(../images/nav-arrow-down-white.png) no-repeat center center;
width: 16px;
height: 32px;
position: absolute;
right: 10px;
opacity: 0.5;
transition: opacity 0.5s;
}
header .widget_user_avatar:hover .user_info:after{ opacity: 1; }
header .widget_user_avatar:hover .user_info {
background: #224674;
}
header .widget_user_avatar .user_info .avatar{
border-radius: 50%;
overflow: hidden;
height: 32px;
}
header .widget_user_avatar .user_info .name {
float: left;
margin-right: 10px;
}
header .widget_user_avatar .menu {
visibility: hidden;
float: none;
position: absolute;
top: 50px;
right: 0;
height: auto;
background: #224674;
width: 180px;
padding: 0;
box-shadow: -2px 2px 10px #224674;
opacity: 0.99;
transition: visibility 0.2s;
z-index: 102;
}
header .widget_user_avatar:hover .user_info + .menu {
visibility: visible;
}
header .widget_user_avatar .menu > li {
float: none;
}
header .widget_user_avatar .menu > li:hover, header .widget_user_avatar .menu ul li a:hover {
background-color: #1c549c;
}
header .widget_user_avatar .menu ul {
left: auto;
right: 160px;
top: 0;
box-shadow: none;
border-radius: 0;
box-shadow: -2px 2px 10px #224674;
}
header .widget_user_avatar .menu ul li, header .widget_user_avatar .menu ul li a {
border-radius: 0;
}
/* ========================================================================== */

.widget_tags_cloud .tags_as_list,
.widget_tags_cloud .tags_as_list li,
.widget_tags_cloud .tags_as_cloud,
.widget_tags_cloud .tags_as_cloud li {
margin:0; padding:0;
list-style:none;
}

.widget_tags_cloud .tags_as_cloud {
overflow: hidden;
}

.widget_tags_cloud .tags_as_cloud li {
float:left;
margin:0 8px 8px 0;
}

.widget_tags_cloud .tags_as_list li {
margin:0 0 6px 0;
padding-left:20px;
background: url("../images/icons/tag.png") no-repeat left center;
}

.widget_tags_cloud .tags_as_list li .counter {
font-size:11px;
}
.widget_tags_cloud li.colored > a {
color: inherit;
}
/* ========================================================================== */

.widget_auth .field { overflow: hidden; }
.widget_auth .field a { float:right; font-size:12px; margin-top:4px; }
.widget_auth .field label { float:left; }
.widget_auth .buttons { margin-top:15px; }

@media screen and (max-width: 640px) {
.widget_content_slider .items .item .title { display:none !important; }
.widget_content_slider .items { width:60px !important; }
.widget_content_list.featured .item-first { float:none; margin-right:0; width:100%; }
}

/* ========================================================================== */

.widget_search { background-color:#34495E; margin:-15px; padding:10px; }

.widget_search .input {
border:none; box-shadow: none;
padding-left:24px;
background:url("../images/icons/search-glyph.png") no-repeat 4px center #FFF;
font-size:12px;
}

/* ========================================================================== */

.widget_content_filter .title{
font-weight: bold;
color:#34495e;
margin-bottom:4px;
}

.widget_content_filter .field {
margin-bottom: 10px;
}

.widget_content_filter .input {
width:95%;
}

.widget_content_filter .ft_date .value,
.widget_content_filter .ft_number .value {
font-size:12px;
}

.widget_content_filter .ft_date button{
display:none;
}

.widget_content_filter .date-input,
.widget_content_filter .input-small{
width:60px !important;
}

.widget_content_filter .buttons {
margin-top:20px;
font-size:12px;
}

.widget_content_filter .buttons input {
margin-right: 10px;
}
section .widget.fixed_actions_menu {
position: absolute;
right: 0;
z-index: 1;
top: 0;
box-shadow: -4px 4px 5px #CCC;
background: #a7b4b7;
}
section .widget.fixed_actions_menu:before {
content: '';
width: 32px;
background:url("../images/icons/menu.png") no-repeat center center;
height: 32px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
section .widget.fixed_actions_menu:hover .body, section .widget.fixed_actions_menu.clicked .body {
display: block;
}
section .widget.fixed_actions_menu .body {
display: none;
margin: 32px 0 0 0;
padding: 0;
}

@-widget_background_1: #a9cddf;
@-widget----title_background_2: #f7e8aa;
@-widget----title--links-a_background_3: #063118;
@-widget----title--links-a-hover_background_4: #a04f11;
@-widget_content_list--details-span-comments_background_5: url("../images/icons/comment-small.png") no-repeat left center;
@-widget_content_list-featured--item-first--read-more-a_background_6: #168edc;
@-widget_content_list-featured--item-first--read-more-a-hover_background_7: #6d3011;
@-widget_content_slider--slide--heading_background_8: rgba(0, 0, 0, 0.85);
@-widget_content_slider--items_background_9: #ecf0f1;
@-widget_content_slider--items--item-hover_background_10: #bdc3c7;
@-widget_activity_list--actions--delete_background_11: url("../images/icons/delete.png") no-repeat center;
@-widget_online_list--item-name_background_12: url("../images/icons/user.png") no-repeat left center;
@-widget_content_tree-li_background_13: url("../images/icons/folder.png") no-repeat left 1px;
@header--widget_user_avatar--user_info_background_14: none;
@header--widget_user_avatar--user_info-after_background_15: url(../images/nav-arrow-down-white.png) no-repeat center center;
@header--widget_user_avatar-hover--user_info_background_16: #224674;
@-widget_tags_cloud--tags_as_list-li_background_17: url("../images/icons/tag.png") no-repeat left center;
@-widget_search--input_background_18: url("../images/icons/search-glyph.png") no-repeat 4px center #ffffff;
@section--widget-fixed_actions_menu_background_19: #a7b4b7;
@section--widget-fixed_actions_menu-before_background_20: url("../images/icons/menu.png") no-repeat center center;
@-widget----title_color_1: #ffffff;
@-widget_tabbed--tabs-ul-li-a-active_color_2: #34495e;
@-widget_content_list--details_color_3: #999999;
@-widget_content_list--details-a_color_4: #bdc3c7;
@-widget_content_list--details-a-hover_color_5: #d35400;
@-widget_content_list-featured--item-first--title-a_color_6: #000000;
@-widget_content_slider--slide--heading-h2_color_7: #ecf0f1;
@-widget_content_slider--slide--heading-h2_color_8: #f1c40f;
@-widget_content_slider--slide--heading--teaser--date_color_9: #7f8c8d;
@-widget_activity_list--item--title-a-author_color_10: #376499;
@-widget_activity_list--item--images--image-more-a-hover_color_11: #2c3e50;
@-widget_comments_list--item--text_color_12: #666666;
@-widget_tags_cloud-li-colored---a_color_13: inherit;
@-widget_tabbed--tabs-ul-li-a-active_background_color_1: #ffffff;
@-widget_content_list-featured--item-first--image-a_background_color_2: #bdc3c7;
@header--widget_user_avatar--menu---li-hover_background_color_3: #1c549c;
@-widget_search_background_color_4: #34495e;
@-columns-2--widget_content_list--item_width_1: 47%;
@-columns-2--widget_profiles_list--item_width_2: 50%;
@-columns-3--widget_content_list--item_width_3: 31%;
@-columns-3--widget_profiles_list--item_width_4: 33%;
@-columns-4--widget_content_list--item_width_5: 22%;
@-columns-4--widget_profiles_list--item_width_6: 25%;
@-widget_content_list-featured--item-first--image_width_7: 100%;
@-widget_content_list-tiles-big--item_width_8: calc(10%);
@-widget_activity_list--item--images--image-more-a_width_9: 64px;
@-widget_activity_list--actions--delete_width_10: 16px;
@header--widget_user_avatar--menu_width_11: 180px;
@-widget_content_filter--input_width_12: 95%;
@-widget_content_filter--date-input_width_13: 60px;
@section--widget-fixed_actions_menu-before_width_14: 32px;
@-widget_content_slider--slide_width_15: 70%;
@-widget_content_slider--items_width_16: 30%;
@-widget----title_height_1: 47px;
@aside--widget----title_height_2: 38px;
@aside--widget_tabbed--tabs-ul-li-links_height_3: 25px;
@-widget_tabbed--tabs-ul-li_height_4: 45px;
@-widget_content_list-featured--item-first--image_height_5: 150px;
@-widget_content_list-featured--item-first--image-a_height_6: 100%;
@-widget_content_list-tiles-big--item--image_height_7: 100px;
@-widget_activity_list--item--images--image-more-a_height_8: 64px;
@-widget_activity_list--actions--delete_height_9: 16px;
@-widget_profiles_list-list--item_height_10: 32px;
@header--widget_user_avatar--user_info_height_11: 50px;
@header--widget_user_avatar--menu_height_12: auto;
@-widget----title_font_size_1: 18px;
@-widget----title--links_font_size_2: 13px;
@-widget----title--links-a_font_size_3: 12px;
@aside--widget_tabbed----tabs--links-a_font_size_4: 10px;
@-widget_tabbed--tabs-ul-li-a_font_size_5: 14px;
@-widget_content_list--item--title_font_size_6: 16px;
@-widget_content_list--details_font_size_7: 11px;
@-widget_content_list-featured--item-first--title_font_size_8: 21px;


.widget {
background: @-widget_background_1;
margin-bottom: 10px;
>.title {
padding: 0 15px;
height: @-widget----title_height_1;
line-height: 47px;
background: @-widget----title_background_2;
font-weight: bold;
font-size: @-widget----title_font_size_1;
color: @-widget----title_color_1;
.links {
float: right;
font-size: @-widget----title--links_font_size_2;
a {
padding: 2px 8px;
background: @-widget----title--links-a_background_3;
color: @-widget----title_color_1;
font-size: @-widget----title--links-a_font_size_3;
font-weight: normal;
text-decoration: none;
margin-top: -2px;
&:hover {
background: @-widget----title--links-a-hover_background_4;
}
}
}
}
>.body {
padding: 15px;
line-height: 20px;
}
}
.widget_ajax_wrap {
position: relative;
box-sizing: border-box;
&:last-child {
.widget {
&:last-child {
margin-bottom: 0;
}
}
}
}
.widget_text_block {
overflow: hidden;
}
aside {
.widget {
background: @-widget_background_1;
>.title {
font-size: @-widget----title--links-a_font_size_3;
color: @-widget----title_color_1;
background: @-widget----title_background_2;
height: @aside--widget----title_height_2;
line-height: 38px;
padding-right: 5px;
}
}
.widget_tabbed {
.tabs {
ul {
height: @aside--widget----title_height_2;
line-height: 38px;
li.links {
height: @aside--widget_tabbed--tabs-ul-li-links_height_3;
line-height: 25px;
padding-right: 5px;
}
li {
a {
font-size: @-widget----title--links-a_font_size_3;
height: @aside--widget----title_height_2;
line-height: 38px;
font-weight: bold;
}
}
}
}
>.tabs {
.links {
a {
background: @-widget----title--links-a_background_3;
color: @-widget----title_color_1;
font-size: @aside--widget_tabbed----tabs--links-a_font_size_4;
}
}
}
}
}
.widget_tabbed {
margin-bottom: 10px;
background: @-widget_background_1;
.tabs {
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
height: @-widget----title_height_1;
line-height: 47px;
background: @-widget----title_background_2;
li {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: @-widget_tabbed--tabs-ul-li_height_4;
line-height: 45px;
a {
display: block;
height: @-widget----title_height_1;
line-height: 47px;
font-size: @-widget_tabbed--tabs-ul-li-a_font_size_5;
padding: 0 15px;
cursor: pointer;
color: @-widget----title_color_1;
}
a.active {
background-color: @-widget_tabbed--tabs-ul-li-a-active_background_color_1;
color: @-widget_tabbed--tabs-ul-li-a-active_color_2;
}
}
}
}
.body {
padding: 15px;
line-height: 20px;
}
>.tabs {
.links {
float: right;
font-size: @-widget----title--links_font_size_2;
padding-right: 15px;
a {
display: inline;
padding: 3px 8px;
background: @-widget----title--links-a_background_3;
color: @-widget----title_color_1;
font-size: @-widget----title--links-a_font_size_3;
font-weight: normal;
text-decoration: none;
margin: 0 5px 0 0;
&:last-child {
margin-right: 0;
}
&:hover {
background: @-widget----title--links-a-hover_background_4;
}
}
}
}
}
.widget_content_list {
overflow: hidden;
.item {
margin-bottom: 10px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
.image {
float: left;
margin-right: 10px;
img {
display: block;
}
}
.title {
font-size: @-widget_content_list--item--title_font_size_6;
margin-bottom: 3px;
}
}
.details {
font-size: @-widget_content_list--details_font_size_7;
color: @-widget_content_list--details_color_3;
a {
color: @-widget_content_list--details-a_color_4;
&:hover {
color: @-widget_content_list--details-a-hover_color_5;
}
}
span {
padding-right: 5px;
}
span.comments {
padding-left: 20px;
background: @-widget_content_list--details-span-comments_background_5;
}
}
}
.columns-2 {
.widget_content_list {
.item {
float: left;
width: @-columns-2--widget_content_list--item_width_1;
&:nth-child(3) {
clear: left;
}
}
}
.widget_profiles_list {
.item {
float: left;
width: @-columns-2--widget_profiles_list--item_width_2;
&:nth-child(3) {
clear: left;
}
}
}
.widget_profiles_list.list {
.item {
padding-right: 10px;
}
}
}
.columns-3 {
.widget_content_list {
.item {
float: left;
width: @-columns-3--widget_content_list--item_width_3;
&:nth-child(4) {
clear: left;
}
}
}
.widget_profiles_list {
.item {
float: left;
width: @-columns-3--widget_profiles_list--item_width_4;
&:nth-child(4) {
clear: left;
}
}
}
.widget_profiles_list.list {
.item {
padding-right: 10px;
}
}
}
.columns-4 {
.widget_content_list {
.item {
float: left;
width: @-columns-4--widget_content_list--item_width_5;
&:nth-child(5) {
clear: left;
}
}
}
.widget_profiles_list {
.item {
float: left;
width: @-columns-4--widget_profiles_list--item_width_6;
&:nth-child(5) {
clear: left;
}
}
}
.widget_profiles_list.list {
.item {
padding-right: 10px;
}
}
}
.widget_content_list.featured {
.item {
.title {
font-size: @-widget_tabbed--tabs-ul-li-a_font_size_5;
}
}
.item-first {
float: left;
margin-right: 15px;
width: @-columns-3--widget_profiles_list--item_width_4;
.image {
margin-bottom: 5px;
clear: both;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-featured--item-first--image_height_5;
a {
display: block;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-featured--item-first--image-a_height_6;
background-position: center;
background-repeat: no-repeat;
background-color: @-widget_content_list-featured--item-first--image-a_background_color_2;
background-size: cover;
}
>div {
display: block;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-featured--item-first--image-a_height_6;
background-position: center;
background-repeat: no-repeat;
background-color: @-widget_content_list-featured--item-first--image-a_background_color_2;
background-size: cover;
}
}
.title {
font-size: @-widget_content_list-featured--item-first--title_font_size_8;
margin-top: 5px;
line-height: 24px;
a {
color: @-widget_content_list-featured--item-first--title-a_color_6;
text-decoration: none;
}
}
.read-more {
a {
display: inline-block;
clear: both;
background: @-widget_content_list-featured--item-first--read-more-a_background_6;
color: @-widget----title_color_1;
text-decoration: none;
padding: 5px 10px;
margin-top: 10px;
&:hover {
background: @-widget_content_list-featured--item-first--read-more-a-hover_background_7;
}
}
}
}
}
.widget_content_list.tiles-big {
margin-right: -15px;
.item {
float: left;
margin-bottom: 15px;
width: @-widget_content_list-tiles-big--item_width_8;
margin-right: 15px;
box-sizing: border-box;
.title {
font-size: @-widget_tabbed--tabs-ul-li-a_font_size_5;
margin-top: 5px;
a {
color: @-widget_content_list-featured--item-first--title-a_color_6;
text-decoration: none;
&:hover {
color: @-widget_tabbed--tabs-ul-li-a-active_color_2;
text-decoration: underline;
}
}
}
&:nth-child(5) {
clear: left;
}
&:nth-child(9) {
clear: left;
}
&:nth-child(13) {
clear: left;
}
&:nth-child(17) {
clear: left;
}
&:nth-child(21) {
clear: left;
}
&:nth-child(25) {
clear: left;
}
.image {
margin-bottom: 5px;
clear: both;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-tiles-big--item--image_height_7;
a {
display: block;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-featured--item-first--image-a_height_6;
background-position: center;
background-repeat: no-repeat;
background-color: @-widget_content_list-featured--item-first--image-a_background_color_2;
background-size: cover;
}
>div {
display: block;
width: @-widget_content_list-featured--item-first--image_width_7;
height: @-widget_content_list-featured--item-first--image-a_height_6;
background-position: center;
background-repeat: no-repeat;
background-color: @-widget_content_list-featured--item-first--image-a_background_color_2;
background-size: cover;
}
}
}
}
.widget_content_list.tiles-small {
.item {
margin: 0;
margin-right: 4px;
margin-bottom: 4px;
float: left;
.image {
margin: 0;
}
}
}
.widget_content_list.compact {
.item {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
.title {
font-size: @-widget----title--links_font_size_2;
margin-bottom: 0;
line-height: 15px;
}
}
}
.widget_content_slider {
overflow: hidden;
position: relative;
.slide {
overflow: hidden;
position: relative;
width: @-widget_content_list-featured--item-first--image_width_7;
img {
display: none;
left: 0;
position: absolute;
top: 0;
width: @-widget_content_list-featured--item-first--image_width_7;
z-index: 1;
&:first-child {
display: block;
}
}
.heading {
background: @-widget_content_slider--slide--heading_background_8;
display: block;
padding: 10px;
right: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
h2 {
display: inline-block;
margin: 0;
color: @-widget_content_slider--slide--heading-h2_color_7;
font-size: @-widget_tabbed--tabs-ul-li-a_font_size_5;
font-weight: bold;
color: @-widget_content_slider--slide--heading-h2_color_8;
}
.teaser {
display: inline-block;
margin: 0;
color: @-widget_content_slider--slide--heading-h2_color_7;
font-size: @-widget----title--links-a_font_size_3;
.date {
color: @-widget_content_slider--slide--heading--teaser--date_color_9;
padding-left: 10px;
}
}
}
}
>table {
width: @-widget_content_list-featured--item-first--image_width_7;
border-collapse: collapse;
border-spacing: 0;
td {
padding: 0;
}
th {
padding: 0;
}
}
img {
display: block;
}
.items {
background: @-widget_content_slider--items_background_9;
position: relative;
z-index: 2;
.item {
overflow: hidden;
padding: 10px;
font-size: @-widget----title--links-a_font_size_3;
line-height: 15px;
cursor: pointer;
position: relative;
&:hover {
background: @-widget_content_slider--items--item-hover_background_10;
}
.title {
display: block;
vertical-align: middle;
color: @-widget_content_list-featured--item-first--title-a_color_6;
}
}
.item.active {
background: @-widget----title--links-a_background_3;
.title {
color: @-widget----title_color_1;
}
}
}
}
.widget_activity_list {
overflow: hidden;
h4 {
margin: 0;
margin-bottom: 5px;
}
.item {
margin-bottom: 10px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
>.image {
float: left;
margin-right: 10px;
padding: 2px;
border: solid 1px #B3C2C9;
img {
display: block;
}
}
.info {
line-height: 17px;
padding-top: 2px;
}
.title {
a.author {
color: @-widget_activity_list--item--title-a-author_color_10;
&:hover {
color: @-widget_content_list--details-a-hover_color_5;
}
}
}
.details {
font-size: @-widget_content_list--details_font_size_7;
.date {
color: @-widget_content_list--details_color_3;
}
.reply {
padding-left: 5px;
a {
padding-left: 20px;
background: @-widget_content_list--details-span-comments_background_5;
color: @-widget_content_list--details-a_color_4;
&:hover {
color: @-widget_content_list--details-a-hover_color_5;
}
}
}
}
.images {
overflow: hidden;
margin: 10px 0;
padding-left: 48px;
.image {
float: left;
margin-right: 2px;
display: block;
overflow: hidden;
}
.image.more {
background: @-widget_content_slider--items_background_9;
text-align: center;
line-height: 64px;
font-size: @-widget----title_font_size_1;
a {
display: block;
width: @-widget_activity_list--item--images--image-more-a_width_9;
height: @-widget_activity_list--item--images--image-more-a_height_8;
overflow: hidden;
color: @-widget_content_slider--slide--heading--teaser--date_color_9;
text-decoration: none;
&:hover {
color: @-widget_activity_list--item--images--image-more-a-hover_color_11;
}
}
}
}
.actions {
float: right;
visibility: hidden;
}
&:hover {
.actions {
visibility: visible;
}
}
}
.actions {
.delete {
display: inline-block;
width: @-widget_activity_list--actions--delete_width_10;
height: @-widget_activity_list--actions--delete_height_9;
background: @-widget_activity_list--actions--delete_background_11;
}
}
}
.widget_comments_list {
overflow: hidden;
line-height: 20px;
.item {
margin-bottom: 15px;
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
.image {
float: left;
margin-right: 10px;
padding: 2px;
border: solid 1px #B3C2C9;
img {
display: block;
}
}
.info {
line-height: 17px;
padding-top: 2px;
}
.title {
a.author {
color: @-widget_activity_list--item--title-a-author_color_10;
&:hover {
color: @-widget_content_list--details-a-hover_color_5;
}
}
a.subject {
padding-right: 5px;
}
}
.date {
font-size: @-widget_content_list--details_font_size_7;
color: @-widget_content_list--details_color_3;
padding-right: 5px;
}
.text {
color: @-widget_comments_list--item--text_color_12;
}
}
}
.widget_profiles_list {
overflow: hidden;
.item {
.image {
img {
display: block;
}
}
}
}
.widget_profiles_list.list {
.item {
height: @-widget_profiles_list-list--item_height_10;
line-height: 32px;
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
.image {
float: left;
margin-right: 10px;
}
.info {
float: left;
}
}
}
.item-avatar {
>img {
display: block;
}
}
.widget_profiles_list.tiles {
.item {
display: inline-block;
}
}
.widget_online_list {
overflow: hidden;
.item {
display: inline-block;
}
.item-name {
padding-left: 18px;
padding-right: 2px;
background: @-widget_online_list--item-name_background_12;
}
}
.widget_user_avatar {
position: relative;
.default_avatar {
display: inline-block;
}
.user_info {
overflow: hidden;
clear: both;
margin: -15px;
padding: 6px;
margin-bottom: 10px;
background: @-widget----title_background_2;
.avatar {
float: right;
}
.name {
height: @-widget_profiles_list-list--item_height_10;
line-height: 32px;
padding-left: 10px;
a {
color: @-widget----title_color_1;
text-decoration: none;
font-size: @-widget----title--links-a_font_size_3;
font-weight: bold;
}
}
}
}
.widget_content_tree {
ul {
margin: 0;
padding: 0;
li.active {
>a {
color: @-widget_content_list-featured--item-first--title-a_color_6;
text-decoration: none;
&:hover {
color: @-widget_content_list-featured--item-first--title-a_color_6;
text-decoration: none;
}
}
}
}
li {
margin-left: 0px;
list-style: none;
padding-left: 20px;
background: @-widget_content_tree-li_background_13;
}
}
.folder_hidden {
display: none;
}
header {
.widget_user_avatar {
margin-right: -14px;
.user_info {
float: right;
clear: none;
margin: 0;
background: @header--widget_user_avatar--user_info_background_14;
line-height: 50px;
height: @header--widget_user_avatar--user_info_height_11;
padding: 9px 34px 9px 5px;
box-sizing: border-box;
transition: background 0.5s;
position: relative;
&:after {
content: '';
background: @header--widget_user_avatar--user_info-after_background_15;
width: @-widget_activity_list--actions--delete_width_10;
height: @-widget_profiles_list-list--item_height_10;
position: absolute;
right: 10px;
opacity: 0.5;
transition: opacity 0.5s;
}
.avatar {
border-radius: 50%;
overflow: hidden;
height: @-widget_profiles_list-list--item_height_10;
}
.name {
float: left;
margin-right: 10px;
}
}
&:hover {
.user_info {
background: @header--widget_user_avatar-hover--user_info_background_16;
&:after {
opacity: 1;
}
&+.menu {
visibility: visible;
}
}
}
.menu {
visibility: hidden;
float: none;
position: absolute;
top: 50px;
right: 0;
height: @header--widget_user_avatar--menu_height_12;
background: @header--widget_user_avatar-hover--user_info_background_16;
width: @header--widget_user_avatar--menu_width_11;
padding: 0;
box-shadow: -2px 2px 10px #224674;
opacity: 0.99;
transition: visibility 0.2s;
z-index: 102;
>li {
float: none;
&:hover {
background-color: @header--widget_user_avatar--menu---li-hover_background_color_3;
}
}
ul {
left: auto;
right: 160px;
top: 0;
box-shadow: none;
border-radius: 0;
box-shadow: -2px 2px 10px #224674;
li {
border-radius: 0;
a {
border-radius: 0;
&:hover {
background-color: @header--widget_user_avatar--menu---li-hover_background_color_3;
}
}
}
}
}
}
}
.widget_tags_cloud {
.tags_as_list {
margin: 0;
padding: 0;
list-style: none;
li {
margin: 0;
padding: 0;
list-style: none;
margin: 0 0 6px 0;
padding-left: 20px;
background: @-widget_tags_cloud--tags_as_list-li_background_17;
.counter {
font-size: @-widget_content_list--details_font_size_7;
}
}
}
.tags_as_cloud {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
li {
margin: 0;
padding: 0;
list-style: none;
float: left;
margin: 0 8px 8px 0;
}
}
li.colored {
>a {
color: @-widget_tags_cloud-li-colored---a_color_13;
}
}
}
.widget_auth {
.field {
overflow: hidden;
a {
float: right;
font-size: @-widget----title--links-a_font_size_3;
margin-top: 4px;
}
label {
float: left;
}
}
.buttons {
margin-top: 15px;
}
}
.widget_search {
background-color: @-widget_search_background_color_4;
margin: -15px;
padding: 10px;
.input {
border: none;
box-shadow: none;
padding-left: 24px;
background: @-widget_search--input_background_18;
font-size: @-widget----title--links-a_font_size_3;
}
}
.widget_content_filter {
.title {
font-weight: bold;
color: @-widget_tabbed--tabs-ul-li-a-active_color_2;
margin-bottom: 4px;
}
.field {
margin-bottom: 10px;
}
.input {
width: @-widget_content_filter--input_width_12;
}
.ft_date {
.value {
font-size: @-widget----title--links-a_font_size_3;
}
button {
display: none;
}
}
.ft_number {
.value {
font-size: @-widget----title--links-a_font_size_3;
}
}
.date-input {
width: @-widget_content_filter--date-input_width_13 !important;
}
.input-small {
width: @-widget_content_filter--date-input_width_13 !important;
}
.buttons {
margin-top: 20px;
font-size: @-widget----title--links-a_font_size_3;
input {
margin-right: 10px;
}
}
}
section {
.widget.fixed_actions_menu {
position: absolute;
right: 0;
z-index: 1;
top: 0;
box-shadow: -4px 4px 5px #cccccc;
background: @section--widget-fixed_actions_menu_background_19;
&:before {
content: '';
width: @section--widget-fixed_actions_menu-before_width_14;
background: @section--widget-fixed_actions_menu-before_background_20;
height: @-widget_profiles_list-list--item_height_10;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
&:hover {
.body {
display: block;
}
}
.body {
display: none;
margin: 32px 0 0 0;
padding: 0;
}
}
.widget.fixed_actions_menu.clicked {
.body {
display: block;
}
}
}
@media screen and (max-width: 480px) {
.widget_content_list {
.item {
width: @-widget_content_list-featured--item-first--image_width_7 !important;
}
}
.widget_content_list.featured {
.item-first {
width: @-widget_content_list-featured--item-first--image_width_7 !important;
}
}
}
@media (max-width: 767px) {
.widget_content_slider {
.items {
.item {
.title {
display: none;
}
}
}
}
}
@media (min-width: 768px) {
.widget_content_slider {
.slide {
width: @-widget_content_slider--slide_width_15;
}
.items {
width: @-widget_content_slider--items_width_16;
.item {
.image {
float: left;
margin-right: 10px;
}
}
}
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.widget_content_slider {
.items {
.item {
padding: 8px;
}
}
}
}
@media screen and (max-width: 640px) {
.widget_content_slider {
.items {
width: @-widget_content_filter--date-input_width_13 !important;
.item {
.title {
display: none !important;
}
}
}
}
.widget_content_list.featured {
.item-first {
float: none;
margin-right: 0;
width: @-widget_content_list-featured--item-first--image_width_7;
}
}
}

#4 16 марта 2019 в 23:07

И допустим стоит задача изменить высоту шрифта с font-size:13px; на font-size:15px;. Выполняйте.

Старый балбес
Допустим поиск — найти и заменить. Ну это мелочи, а как на счет отдельного заголовка или текста блока? Получается надо задавать переменную для этого блока?

Ну и переменные это тоже здорово.

@Kerncraft1
Тут не поспоришь, это здорово, а если мы имеем два блока track и необходимо их немного отличить, в этом случае переменные будут для каждого блока.
#5 16 марта 2019 в 23:35

а как на счет отдельного заголовка или текста блока? Получается надо задавать переменную для этого блока?

DrDooM
тот же вопрос можно задать про css.
а как на счет отдельного заголовка или текста блока? Получается надо создавать новый div?
Не держите зла, это шутка.

Допустим поиск — найти и заменить.

DrDooM
Дело не только в этом. Например с Less, можно быстро решить такую мелочь как режим "День — Ночь".

А в целом много он чем удобнее, и не удобнее. Здесь спорить можно как в рекламы про Биг Мак laugh
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.