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

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

#2 9 мая 2019 в 12:25
Зачем? Для тех кто в подводной лодке…
#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 {
#4 9 мая 2019 в 16:01

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

Дмитрий Баринов
Да нет никакой шутки. Зачем переводить в scss? CSS чем плох или чем лучше scss?
#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.  
#6 9 мая 2019 в 16:27
вещь нужная!!!
#7 9 мая 2019 в 17:09


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

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

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

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


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

jinbiryukov

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