Свързани публикации 'sass'
Gulp Intro — От Sass за минимизиране на CSS.
Здравей! Това е втората ми публикация досега и съм наистина развълнуван... така че, нека започваме.
Няма да обяснявам какво е глътка, тъй като вече сте тук.
Сигурен съм, че всичко, което искате да знаете, е как да използвате gulp.
Първо, ще ни трябват няколко неща, за да започнем да използваме gulp в нашия проект.
Така че, моля, уверете се, че изпълнявате следната команда във вашия терминал.
npm i gulp gulp-cssnano gulp-sass gulp-concat-css -D
Това ще инсталира:
Gulp:..
Използване на SASS във Vue Components с Laravel Mix
Точно сега, тъй като използваме Foundation за някои функции за бърза мрежа, нашият най-важен файл ще бъде нашият файл _variables.scss, който ще включва всички наши SASS променливи за приложението. Следвайки модела 7–1 ( Указания на Sass ) трябва да добавим файл в директорията /assets/sass/abstracts с име _variables.scss .
Добавих няколко цвята по подразбиране (на базата на кафе, тъй като правим приложение за кафе) към файла с променливи. Трябва да изглежда така:
$white: #FFFFFF;..
Свързани въпроси 'sass'
Предотвратете Sass да прави кавички около стойността
Нов съм в Sass... Искам да създам някакъв css с процентни стойности като:
width : 13%;
Стойността е резултат от операция sass номер. Писайки това
width : $main-width + "%"
scss кодът генерира това:
width : "13%";
css, какво...
5153 изгледи
schedule
25.09.2022
Писане на цикъл, който се увеличава със стойност, различна от 1 в Sass
В SASS цикълът се записва така:
@for $i from 1 through 100 {
//stuff
}
Това би довело до 1, 2, 3, 4... чак до 100.
Как бихте направили цикълът да върви на интервали от две единици?
@for $i from 1 through 100 *step 2*{
//stuff...
23872 изгледи
schedule
14.09.2022
Грешка при компилиране на Compass LoadError на линия [179] .. data.rb: Не може да се зареди такъв файл
Претърсих всички възможни Ruby ресурси, търсейки решение на тази грешка, но не мога да разбера какво правя погрешно.
Опитвам се да накарам компилатора си sass да работи за компилация на Drupal от предишен проект. Използвайки следния стек: Ruby...
2228 изгледи
schedule
19.09.2022
Генериране на класове колони с динамична ширина с помощта на SASS
Опитвах се да генерирам динамична мрежова система, използвайки SASS с променливи ширини, използвайки @for цикъл. Досега имам:
@for $value from 1 through 12 {
$width: percentage(1/$value);
.col-md-#{$value} {
width: $width;
}
}...
1234 изгледи
schedule
16.09.2022
Икона, която пречи на щракване върху бутон
Имам бутон, заобикалящ икона. Смятам, че иконата пречи на моето събитие за кликване. Мога само да щракна върху полетата на иконата, за да активирам събитието onclick, но нищо не се случва, когато щракна върху иконата. Замених иконата с малко текст...
724 изгледи
schedule
15.09.2022
Подравняване на реда с гъвкава посока до друг контейнер flexbox
Опитвам се да смеся колона и ред с посока на гъвкавост, трябва ли да са в отделни divs?
Ето един пример за това, което разглеждаме
.container {
display: flex;
}
.container .left {
display: flex;
align-items: center;...
41 изгледи
schedule
16.09.2022
Vue CLI 3 target build lib изключва споделения стил
В момента работя върху проект Vue.js, където използвам Vue CLI 3 за изграждане на компоненти в режим lib като този: vue-cli-service build --no-clean --target lib --name ComponentName.vue . След това компонентите могат да се използват във всеки...
979 изгледи
schedule
15.09.2022
Маскиране/изрязване на горния десен ъгъл на бутона
Бих искал да маскирам горния десен ъгъл на бутона, за да поставя значка в маскираната/изрязаната част на бутона по този начин.
Правилното изображение е това, което имам
Опитах се да направя нещо като този отговор: Как да изрежа...
226 изгледи
schedule
14.09.2022
създаване на много scss файлове в един минимизиран css
Имам четири файла:
scss/bootstrap-grid.scss
scss/bootstrap-reboot.scss
scss/bootstrap-utilities.scss
scss/bootstrap.scss
И от тези файлове ми трябват 3 - public/css/styles.css styles.css.map и styles.min.css
Когато min.css е...
20 изгледи
schedule
16.09.2022
gulp - Как да свържа няколко файла с watch?
Искам да избера няколко файла и да генерирам свързани файлове от тях. И също искам да свържа моите променени файлове. Това е дървото на моите активи:
assets
- css
- js
- sass
- _midia_queries.scss
- media-combine.scss
-...
1297 изгледи
schedule
24.09.2022
Vim се включва за работа с персонализирани HTML тагове и SCSS
Моето ниво на Vim е средно - използвам го от около 10 години, но на ниво "новак" - намерете файл, изтрийте нещо, добавете нещо, запазете и излезте. Сега реших да направя Vim единствения си редактор на кодове. Работя с Ionic framework (това е Angular...
541 изгледи
schedule
27.09.2022
Как да добавите градиентен цвят към икона без рамка
Бих искал да направя икона за харесване и бих искал изцяло да запълня икона с градиентен цвят при задържане на мишката без граници, само формата на сърцето. използвам fontawesome.
html:
<i class="far...
153 изгледи
schedule
26.09.2022
Компас: Миксините могат да бъдат дефинирани само в основата на документ
Не съм Ruby разработчик и използвам Compass от 6 месеца. Открих този проблем, показан по-долу.
Прочетох този въпрос и използвах най-високо оценения отговор: получаване на грешка след надграждане до sass-3.1.8
Версия на Sass: Sass 3.1.1...
907 изгледи
schedule
02.10.2022
Принудете SASS да направи математика
Опитвам се да направя математика в моя цикъл.
@for $i from 1 through length($colors) {
ul li:nth-child(#{$i}) {
z-index: length($colors) - #{$i};
}
}
Но това, което получавам в CSS, например, е:
li:nth-child(2) {
z-index:...
337 изгледи
schedule
02.10.2022
Затваряне на менюто за навигация, ако се щракне върху връзката към страницата
В моето приложение Angular 8 съществува фиксирана лента за навигация в горната част на екрана. Когато потребител задържи курсора на мишката над падаща навигационна връзка, ще се покаже меню.
Сега, ако потребителят щракне върху една от връзките в...
72 изгледи
schedule
01.10.2022
Обърнете списък с елементи в sass с помощта на @for цикъл
Това е моят @for цикъл в sass:
@for $i from 1 through 10 {
#users[data-state='unload'] li:nth-child(#{$i}n) {
animation-delay: #{$i * 0.1}s;
}
}
Което генерира този css:
#users[data-state=loaded] li:nth-child(1n) {...
111 изгледи
schedule
04.10.2022
SCSS превключване от @import към @use: недефиниран миксин
От много години съм напълно доволен от @import, но времената се променят...
Затова се опитвам да преместя проектите си от @import към @use и @forward и открих тази публикация е доста полезна. Но когато се опитвам да внедря @use в моите части,...
72 изгледи
schedule
03.10.2022
Префикси на браузъра като променливи чрез @each sass
Планирали сме много анимации и търсим по-чист начин за справяне с всички браузъри. Нещо нахално като това би било страхотно:
@each $browser in '-webkit-', '-moz-', '-o-', '-ms-' {
@#{$browser}keyframes rotate {
from { #{$browser}transform:...
883 изгледи
schedule
05.10.2022
Споделяне на цветове между SASS файлове и Rails erb шаблони
Работя върху имейл бюлетин с помощта на ActionMailer, който е свързан с нашето приложение Rails 3.0.7. Така че против всичките си инстинкти, използвам вградени стилове като mad, тъй като това изглежда е единственият начин да правя неща в html имейл....
545 изгледи
schedule
26.10.2022
Как да конвертирате цяло число в шестнадесетичен в SASS
Вместо нещо като структурата на картографските данни , която Крис Епщайн споменава като текуща работа за SASS, аз се опитвам за постигане на нещо подобно - картографиране на низ към съответна шестнадесетична стойност, която ще се използва за...
1941 изгледи
schedule
05.12.2022
