11
Необходимые координаты в path:
120 — радиус круга; если надо уменьшить, то уменьшать обе координаты
240 — высота блока
1000 — длина блока
При необходимости повернуть вырез, воспользуйтесь атрибутом transform="rotate()"
* {
margin: 0;
padding: 0;
}
.btn {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
...
ответ дан 17 янв '17 в 15:49
Sasha Omelchenko
12.1k44 золотых знака2424 серебряных знака5959 бронзовых знаков
11
нужно ли вообще корректировать верстку так, чтоб при масштабировании
нигде ничего не выпирало и тд?
Отвечаю на ваш вопрос. Если вы хотите, чтобы все пользователи видели качественно выполненную вами работу и ваш сайт можно было просматривать на самых разных устройствах, независимо от разрешения и формата экрана, будь то пк, ноутбук, планшет, смартфон или ...
ответ дан 9 фев '20 в 9:51
Sevastopol'
23.3k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
10
Хоть и не в тему, но вот подобное на z-index, без javascript:
Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.
Новый, улучшенный вариант:
button:focus + button {z-index: 4}
button:nth-child(1) {z-index: 3}
button:nth-child(2) {z-index: 2}
button:nth-child(3) {z-index: 1}
button {
background: radial-...
ответ дан 28 окт '19 в 8:17
Stranger in the Q
54.7k99 золотых знаков7171 серебряный знак125125 бронзовых знаков
8
_ пишется перед именем частичных файлов, которые не должны отдельно компилироваться в css, а вложены в какой-то другой scss файл
8
Это стандартное соглашение по именованию файлов-составляющих - они служат частями других файлов. Обычно в них хранят общие mixin'ы, функции, константы и прочее.
SASS не позволяет независимо компилировать их - при попытке этого, он просто выдаст ошибку.
8
Что б использовать переменную в значении обычного CSS нужно заключить переменную в #{}, Например:
top: calc(#{$border_padding} - 3px);
Вот ссылка на документацию
7
Судя по коду, который вы оставили, Вы не закрыли тег <header> (у Вас в коде их два).
<main class="main__wrapper">
<header>
...
<header>
</main>
7
Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!))
Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку лейбела, и добавить еще три before-after, но так показалось нагляднее.
.num::before { content: "4"; }
.radius::before { content: "3"; }
.num::after { content: ...
ответ дан 28 окт '19 в 5:53
OPTIMUS PRIME
23.5k33 золотых знака1616 серебряных знаков4141 бронзовый знак
6
В текстовых редакторах нет понятия "проект". Что даёт это понятие:
Радикальное ускорение поиска по коду, с помощью индексации текста проекта - это очень важно для больших проектов. На практике это секунда любого поиска по 100Мб текста .
Восприятие IDE проекта, как единого целого. В частности самая популярная фича - в коде написано что-то вроде $obj->...
6
Использована технология SVG, иконки от font-awesome
Смотреть на весь экран
Вот здесь доделанная версия: https://codepen.io/topicstarter/pen/MWaeGjV
* {
text-decoration: none;
box-sizing: border-box;
}
.items {
position: relative;
}
.top {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-...
ответ дан 19 апр '20 в 3:07
MaximLensky
13.1k22 золотых знака1313 серебряных знаков5656 бронзовых знаков
5
Синтаксис у фич в препроцессорах очень схож между собой, поэтому, изучив их в LESS, и перейдя потом на SASS, у вас не возникнет проблем со старыми знаниями. В этом плане изучать можно любые фреймворки в любом порядке.
По возможностям LESS и SASS близки. Twitter Bootstrap с четвертой версии официально перешел с LESS на SASS. Учитывая популярность бутстрапа, ...
ответ дан 20 авг '16 в 10:25
Виталий Емельянцев
5,72822 золотых знака88 серебряных знаков2929 бронзовых знаков
5
создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla
читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR || 'default';
асайним переменную для Jade:
const express = require('express');
var app = express();
app.locals.env = process.env;
и читаем переменную в Jade #{env.SOME_ENV_VAR}
Дополнение #1
var ...
5
Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать .sass > .css?
Браузер может работать только с CSS и для этого sass компилируется в CSS
Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей, из которой потом 'лепится' уже готовый набор .css файлов?
sass это не "базовая библиотека" она ...
5
Вот так:
[class$="__class"] {
background: blue;
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col col__class"></div>
<div class="col col__class"></div>
<div class="col col__class"&...
5
Можно обратиться к цветовой схемеhsl
При этом максимальная сочность цвета будет при значении 50% для l компоненты и минимальная (белый цвет) - при значении 100%.
В SASS есть функция получения l компоненты: lightness($color)
А также функции для изменения этой компоненты:
lighten($color, $amount)
darken($color, $amount)
Таким образом для решения пункта ...
ответ дан 11 мая '18 в 18:01
5
Подключение библиотеки jQuery осуществляется через селектор во "вьюпорте" с кодом JS.
Далее открывается блок с выбором различных надстроек.
Нас интересует раздел "Frameworks & Extensions", там мы и ищем jQuery (он почти внизу).
После этого достаточно нажать "Run" и библиотека будет подключена.
ответ дан 21 июн '19 в 8:46
CbIPoK2513
12.8k22 золотых знака2121 серебряный знак5050 бронзовых знаков
4
Вот и нашла ответ на свой вопрос. На XP есть проблема со входом в библиотеку msvcrt.dll для Ruby. Хотя похожие проблемы с установкой node-sass есть и на 10 версии OS. На старых версиях проблема решается установкой своей среды разработки. Подробности здесь:
https://github.com/oneclick/rubyinstaller/issues/239
https://github.com/oneclick/rubyinstaller/wiki/...
4
Сам треугольник можно получить задавая различные цвета границам разных сторон элемента, а добавить к элементу - используя псевдоэлементы :before :after
.block {
background: green;
display: inline-block;
position: relative;
color: #fff;
width: 120px;
height: 20px;
margin: 10px;
}
.block::after {
content: ...
4
В идеале сборка должна быть такая, чтобы скомпилированный файлы, которые будут отдаваться пользователю, лежали отдельно от исходников и их можно было спокойно удалить при необходимости. К тому же, это позволит делать дополнительные оптимизации с исходными файлами и не менять пути в сборке.
Организация стилей
В целом, вы отлично организовали сборку стилей: ...
4
#header .top .logo img {}
Браузер читает селекторы справа налево. Т.е. браузер выберет все картинки, потом узнает у которых у них есть родитель с классом .logo, потом с классом .top... Ну вы поняли.
Сейчас, браузеры довольно шустры, но всё же: разумнее будет задать отдельный класс для конкретного элемента (картинка в Вашем случае), например, ....
4
Цвет границы можно наследовать.
body {
margin: 50px 20px;
}
.main__item_logo {
width: 132px;
height: 100px;
position: relative;
background: blue;
border-color: blue;
}
.main__item_logo:before, .main__item_logo:after {
content: "";
position: absolute;
left: 0;
width: ...
ответ дан 17 июн '17 в 20:30
4
Можно, если поддержка IE не важна (ответ и для ширины, и для высоты).
Задайте блоку #lev-1 любой transform (например, tranform: rotate(0deg) который визуально ничего не поменяет), а для #lev3 комбинацию position: fixed; left: 0; top: 0; width: 100%; height: 100%; (или вместо width: 100%; height: 100%; задайте right: 0; bottom: 0;). Демонстрция:
#lev-1 {...
ответ дан 27 июл '17 в 11:04
Vadim Ovchinnikov
9,42644 золотых знака3131 серебряный знак7070 бронзовых знаков
4
Sass ругается скорее всего из-за того, что вы не соблюдаете отступы и путаете их с табами.
Можно писать например так(display:block - для примера):
.list{
display:block;
&-child{
display:block;
a{
display:block;
}
}
}
из этого получится
.list {
display: block;
}
.list-child {
display: block;
}
.list-child a {
display: block;
}
4
P.S. Изменения ответа за 23.10.2017 Я тут расхваливал webpack и даже за конкурсный вопрос 100 балов получил, но есть проблема, в той конструкции которую я привел, less отказывается читать background-image: url(путь к картинке) ; путь должен быть обязательно в одинарных кавычках, но используя новый приведенный пример файла webpack.config.js, там все ...
4
Добавьте пробел:
font-size: 25px
Без пробела SASS воспринимает :25px как стейт (:hover) или как псевдокласс (::before)
ответ дан 27 дек '17 в 16:17
PashaPash
45.9k1111 золотых знаков7272 серебряных знака137137 бронзовых знаков
4
Вот такой шаблон на Flex. Вертикальные и горизонтальные размеры элементов надо будет подобрать вручную или вычислить математически.
Что бы сохранялась пропорция вертикальных и горизонтальных размеров при масштабировании, если стоит такая задача смотрим тут.
.all {
display: flex;
width: 100%;
}
.left {
display: flex;
width: 70%;
flex-...
ответ дан 27 мар '18 в 8:29
Дмитрий Полянин
13.5k11 золотой знак1414 серебряных знаков4545 бронзовых знаков
4
В Sass существует директива управления - @for. Её можно использовать для таких задач. (Рабочий пример на Codepen.io).
Sass:
//Создаём переменные для управления значениями
$items: 4
$transition: 500ms
//Каждому элементу будет прибавлять по 0.060s
@for $i from 0 through $items
&:nth-child(#{$i + 1})
transition-delay: $transition+(60ms*($i))
...
4
Можно так
Управлять размером линии можно через CSS-переменную --percent: 1 - это 100% линия, которая оборачивает круг, 0.25 - это 25% линия
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
background: ...
ответ дан 3 мая '20 в 10:59
Михаил Камахин
6,73622 золотых знака77 серебряных знаков3434 бронзовых знака
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
sass × 463css × 251
scss × 116
html × 105
gulp × 73
javascript × 41
css3 × 35
вёрстка × 34
bootstrap × 27
less × 22
node.js × 21
webpack × 21
gulp-sass × 19
frontend × 15
html5 × 12
phpstorm × 12
npm × 12
веб-программирование × 11
visual-studio-code × 10
reactjs × 9
compass × 9
ruby × 8
sublime-text × 8
препроцессор × 8
бэм × 7