Вопрос:
Я изучаю scss и нашел этот образец:
https://github.com/jasonsanjose/bourbon-example
Когда я пытаюсь изменить файл app.scss, делая цвет кнопки зеленым, он не изменяется от красного:
@import «../bower_components/bourbon»; @import «partial»; * { font-family: $helvetica; } button { @include button(pill, green); }
Как успешно запустить страницу index.html?
Лучший ответ:
Вам нужно скомпилировать файл SASS в файл CSS, чтобы он работал правильно с помощью Ruby..
Если вы не хотите использовать Ruby, вам необходимо загрузить сторонние приложения для компиляции кода для вас. Вот некоторые из приложений, которые вы можете использовать:
CodeKit (платная) смесь (бесплатно)
Prepros (Платный/Также доступен для одного месяца)
https://prepros.io/
Ответ №1
Действительно, сначала вы должны скомпилировать свой код SCSS в CSS.
Чтобы узнать и понять Sass, вы можете использовать SassMeister для компиляции кода SCSS:
Этот файл компилирует следующий код SCSS:
@import «bourbon/bourbon»; * { font-family: $helvetica; } button { @include button(pill, green); }
Вышеприведенное должно составить код CSS следующим образом:
* { font-family: «Helvetica Neue», Helvetica, Arial, sans-serif; } button { border: 1px solid #082c08; border-color: #082c08 #021303 black; border-radius: 16px; box-shadow: inset 0 1px 0 0 #04a301, 0 1px 2px 0 #b3b3b3; color: white; display: inline-block; font-size: 11px; font-weight: normal; line-height: 1; background-color: green; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, green), color-stop(100%, #004d0a)); background-image: -webkit-linear-gradient(green, #004d0a); background-image: linear-gradient(green, #004d0a); padding: 5px 16px; text-align: center; text-decoration: none; text-shadow: 0 -1px 1px #052f08; background-clip: padding-box; } button:hover:not(:disabled) { border: 1px solid #021302; border-color: #021302 black black; box-shadow: inset 0 1px 0 0 #018f01; cursor: pointer; background-color: #006900; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #006900), color-stop(100%, #013007)); background-image: -webkit-linear-gradient(#006900, #013007); background-image: linear-gradient(#006900, #013007); text-shadow: 0 -1px 1px #000f02; background-clip: padding-box; } button:active:not(:disabled) { background: #054809; border: 1px solid black; border-bottom: 1px solid black; box-shadow: inset 0 0 6px 3px #001203, 0 1px 0 0 #fff; text-shadow: 0 -1px 1px #011102; } button:disabled { opacity: 0.5; cursor: not-allowed; }
Теперь вы можете изменить green на red:
button { @include button(pill, red); }
Или используйте переменную для вашего цвета:
$color: red; button { @include button(pill, $color); }
Я также думаю, что вам не нужен ” @import «partial»; код.
Обратите внимание, что @include button включает в себя mixin из кода Bourbon, который был импортирован с @import «bourbon/bourbon»; Микшины могут использоваться для установки свойств селектора. Например, следующий код SCSS:
@mixin button($type,$color) { background-color: $color; } $color: red; button { @include button(pill, $color); }
будет скомпилирован в CSS-код следующим образом:
button { background-color: red; }
Как успешно запустить страницу index.html?
Вы можете использовать sass.js для компиляции Sass в браузере. Не используйте этот метод для производственного кода. Вы можете установить файл bourdon с помощью bower, выполнив следующую команду в консоли:
bower install bourbon
Предыдущая команда устанавливает файлы в bower_components/bourbon. Загрузите этот каталог и его содержимое в корневой каталог документа и убедитесь, что @import «../bower_components/bourbon»; укажите этот каталог.
