Найти на сайте
  2. Форумы
  3. РАЗНОЕ
  4. Полезное
  5. Конвертер css в scss

Конвертер css в scss

Для тех кто привык работать с scss

#2 9 мая 2019 в 12:25
Зачем? Для тех кто в подводной лодке…
0
#3 9 мая 2019 в 13:53


Зачем? Для тех кто в подводной лодке...

jinbiryukov
Шутку я не понял scratch

А нужен такой конвертер в первую очередь тем, кто хочет быстро конвертнуть (например) стандартные css дефолтного шаблона...
Далее работает с scss. Так то это дело привычки! Мне по началу scss вообще не понравился… потом понял что к чему.
-----------
theme-gui.css

  1.  
  2. .sess_messages {
  3.     margin-bottom:10px;
  4. }
  5.  
  6. .sess_messages div{
  7.     padding:10px;
  8.     padding-left:30px;
  9.     background:#f9f9f9;
  10.     line-height:16px;
  11.     margin-bottom:2px;
  12.     color: #FFF;
  13. }
  14.  
  15. .sess_messages div a { color:#ecf0f1; }
  16. .sess_messages div a:hover { color:#d35400; }
  17.  
  18. .sess_messages .message_info {
  19.     background:url("../images/icons/info.png") no-repeat 10px center #2980b9;
  20. }
  21. .sess_messages .message_success {
  22.     background:url("../images/icons/accept.png") no-repeat 10px center #27ae60;
  23. }
  24. .sess_messages .message_error {
  25.     background:url("../images/icons/error.png") no-repeat 10px center #e74c3c;
  26. }
  27. .sess_messages .message_info_in_page {
  28.     color: #555;
  29.     padding: 10px 15px;
  30. }
  31. .ui_message {
  32.     padding: 15px;
  33.     margin-bottom: 20px;
  34.     background-color: #E4F1FE;
  35.     border-color: #2980b9;
  36.     border-width: 1px;
  37.     border-style: solid;
  38.     border-left-width: 10px;
  39.     color: #555;
  40. }
  41. .ui_message.ui_warning {
  42.     background-color: #FDE3A7;
  43.     border-color: #f39c12;
  44. }
  45. .ui_message.ui_error {
  46.     background-color: #F1A9A0;
  47.     border-color: #e74c3c;
  48. }
  49. #alert_wrap {
  50.     box-sizing: border-box;
  51.     overflow: hidden;
  52.     width: 320px;
  53. }
  54. #alert_wrap .ui_message {
  55.     margin-bottom: 0;
  56. }
  57. /* Indicators =============================================================== */
  58.  
  59. .loading{
  60.     padding-left: 20px;
  61.     background:url("../images/loader16.gif") no-repeat left center;
  62. }
  63.  
  64. .loading-icon{
  65.     display:block;
  66.     width:16px;
  67.     height:16px;
  68.     background:url("../images/loader16.gif") no-repeat left center;
  69. }
  70.  
  71. .loading-panel{
  72.     background:url("../images/loader24.gif") no-repeat center center;
  73. }
  74.  
  75. .is_private, .is_closed {
  76.     display: inline-block;
  77.     cursor: help;
  78.     width:16px;
  79.     height:16px;
  80.     background:url("../images/icons/eye.png") no-repeat;
  81. }
  82. .content_list_item .is_private, .widget_content_list .is_private, .content_list .is_private,
  83. .content_list_item .is_closed, .widget_content_list .is_closed {
  84.     height:14px;
  85. }
  86.  
  87. .is_closed{
  88.     background:url("../images/icons/lock.png") no-repeat;
  89. }
  90.  
  91. .is_online{
  92.     background: #40d47e;
  93.     color: #FFF;
  94.     font-size: 11px;
  95.     line-height: 15px;
  96.     padding: 1px 6px;
  97.     border-radius: 4px;
  98.     display: inline-block;
  99. }
  100.  

theme-gui.scss

  1.  
  2. //colors
  3. $color_alabaster_approx: #f9f9f9;
  4. $white: #fff;
  5. $color_athens_gray_approx: #ecf0f1;
  6. $color_tenn_approx: #d35400;
  7. $color_boston_blue_approx: #2980b9;
  8. $color_chateau_green_approx: #27ae60;
  9. $color_cinnabar_approx: #e74c3c;
  10. $color_fuscous_gray_approx: #555;
  11. $color_pattens_blue_approx: #e4f1fe;
  12. $color_cape_honey_approx: #fde3a7;
  13. $color_tree_poppy_approx: #f39c12;
  14. $color_rose_bud_approx: #f1a9a0;
  15. $color_emerald_approx: #40d47e;
  16.  
  17. //urls
  18. $url_0: url(../images/icons/info.png);
  19. $url_1: url(../images/icons/accept.png);
  20. $url_2: url(../images/icons/error.png);
  21. $url_3: url(../images/loader16.gif);
  22. $url_4: url(../images/loader24.gif);
  23. $url_5: url(../images/icons/eye.png);
  24. $url_6: url(../images/icons/lock.png);
  25.  
  26. //@extend-elements
  27. //original selectors
  28. //.is_private, .is_closed
  29. %extend_1 {
  30. 	display: inline-block;
  31. 	cursor: help;
  32. 	width: 16px;
  33. 	height: 16px;
  34. 	background: $url_5 no-repeat;
  35. }
  36.  
  37.  
  38. .sess_messages {
  39. 	margin-bottom: 10px;
  40. 	div {
  41. 		padding: 10px;
  42. 		padding-left: 30px;
  43. 		background: $color_alabaster_approx;
  44. 		line-height: 16px;
  45. 		margin-bottom: 2px;
  46. 		color: $white;
  47. 		a {
  48. 			color: $color_athens_gray_approx;
  49. 			&:hover {
  50. 				color: $color_tenn_approx;
  51. 			}
  52. 		}
  53. 	}
  54. 	.message_info {
  55. 		background: $url_0 no-repeat 10px center $color_boston_blue_approx;
  56. 	}
  57. 	.message_success {
  58. 		background: $url_1 no-repeat 10px center $color_chateau_green_approx;
  59. 	}
  60. 	.message_error {
  61. 		background: $url_2 no-repeat 10px center $color_cinnabar_approx;
  62. 	}
  63. 	.message_info_in_page {
  64. 		color: $color_fuscous_gray_approx;
  65. 		padding: 10px 15px;
  66. 	}
  67. }
  68. .ui_message {
  69. 	padding: 15px;
  70. 	margin-bottom: 20px;
  71. 	background-color: $color_pattens_blue_approx;
  72. 	border-color: $color_boston_blue_approx;
  73. 	border-width: 1px;
  74. 	border-style: solid;
  75. 	border-left-width: 10px;
  76. 	color: $color_fuscous_gray_approx;
  77. 	&.ui_warning {
  78. 		background-color: $color_cape_honey_approx;
  79. 		border-color: $color_tree_poppy_approx;
  80. 	}
  81. 	&.ui_error {
  82. 		background-color: $color_rose_bud_approx;
  83. 		border-color: $color_cinnabar_approx;
  84. 	}
  85. }
  86. #alert_wrap {
  87. 	//Instead of the line below you could use @include box-sizing($bs)
  88. 	box-sizing: border-box;
  89. 	overflow: hidden;
  90. 	width: 320px;
  91. 	.ui_message {
  92. 		margin-bottom: 0;
  93. 	}
  94. }
  95. .loading {
  96. 	padding-left: 20px;
  97. 	background: $url_3 no-repeat left center;
  98. }
  99. .loading-icon {
  100. 	display: block;
  101. 	width: 16px;
  102. 	height: 16px;
  103. 	background: $url_3 no-repeat left center;
  104. }
  105. .loading-panel {
  106. 	background: $url_4 no-repeat center center;
  107. }
  108. .is_private {
  109. 	@extend %extend_1;
  110. }
  111. .is_closed {
  112. 	@extend %extend_1;
  113. 	background: $url_6 no-repeat;
  114. }
  115. .content_list_item {
                    
    
        
    
                                        
    
                                            
    
                                                                                        

    
        
    
                    
                            
            
    

    
    
                    
                0
#4 9 мая 2019 в 16:01

Шутку я не понял

Дмитрий Баринов
Да нет никакой шутки. Зачем переводить в scss? CSS чем плох или чем лучше scss?
0
#5 9 мая 2019 в 16:15

чем плох или чем лучше

jinbiryukov
Дело в гибкости и в привычке.

В scss например, достаточно поменять 1 переменную color: $white; и переменная $white поменяется везде где используется.
  1.  
  2. //colors
  3. //$white: #fff;
  4. $white: #fafafa;
  5. /****/
  6. .sess_messages {
  7. 	margin-bottom: 10px;
  8. 	div {
  9. 		padding: 10px;
  10. 		padding-left: 30px;
  11. 		background: $color_alabaster_approx;
  12. 		line-height: 16px;
  13. 		margin-bottom: 2px;
  14. /*------------------------------------*/
  15. /* $white = #fafafa */
  16. 		color: $white;
  17. /*------------------------------------*/
  18. 		a {
  19. 			color: $color_athens_gray_approx;
  20. 			&:hover {
  21. 				color: $color_tenn_approx;
  22. 			}
  23. 		}
  24. 	}
  25. /****/
  26. .is_online {
  27. 	background: $color_emerald_approx;
  28. /*------------------------------------*/
  29. /* $white = #fafafa */
  30. 	color: $white;
  31. /*------------------------------------*/
  32. 	font-size: 11px;
  33. 	line-height: 15px;
  34. 	padding: 1px 6px;
  35. 	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
  36. 	border-radius: 4px;
  37. 	display: inline-block;
  38. }
  39.  
0
#6 9 мая 2019 в 16:27
вещь нужная!!!
0
#7 9 мая 2019 в 17:09


чем плох или чем лучше

jinbiryukov
Дело в гибкости и в привычке.
В scss например, достаточно поменять 1 переменную color: $white; и цвет white поменяется везде где используется.

Дмитрий Баринов

А так это для разработчика только… Если у меня куплен шаблон смысла там что-то конвертировать нет ведь?
0
#8 9 мая 2019 в 18:14


А так это для разработчика только… Если у меня куплен шаблон смысла там что-то конвертировать нет ведь?

jinbiryukov

Ну… Нет, лучше не менять, или только отдельный style.css
Если не занимаетесь дизайном/шаблонами, то лучше не конвертировать (много изменений)
0
Разные шаблоны для разных стра
Персональное меню
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Как определить где ошибка в SCSS ?

Полезное Создана 4 месяца назад 6 сообщений

[ЗАКРЫТО] Некорректно работает «Сохранить и скомпилировать SCSS»

Разработка и тестирование Создана 2 года назад 1 сообщение

Почему файл theme.css обнуляется после "Сохранить и скомпилировать SCSS"

Флейм / Флуд / Оффтопик Создана 1 месяц назад 5 сообщений

Можно ли в админке добавить css-стиль без заливки дополнительного css файла?

Флейм / Флуд / Оффтопик Создана 2 года назад 7 сообщений

Отсутствует Сохранить и скомпилировать SCSS

Флейм / Флуд / Оффтопик Создана 3 года назад 3 сообщения

Сохранить и скомпилировать SCSS

HTML / CSS / PHP / JS / RegExp Создана 2 года назад 2 сообщения

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.