ИП. CSS3. Фреймворки. Bootstrаp |
МИЭТ, 2017. |
Bootstrap - http://getbootstrap.com/
По русски, например - https://webref.ru/layout/bootstrap/
Пример подключения и использования
ИП. CSS3. Фреймворки. Bootstrаp |
МИЭТ, 2017. |
ИП. CSS3. Препроцессоры |
МИЭТ, 2017. |
Назначение препроцессоров CSS — упрощение работы с объемными файлами стилей за счет использования инструментов «нормального» программирования: переменных, циклов, функций.
Распространенные препроцессоры:
LESS - http://lesscss.org/ (на русском - https://webref.ru/layout/less )
SASS - http://sass-lang.com/ (на русском - http://sass-scss.ru/ )
Пример использования препроцессора |
|
Файл test.less |
«скомпилированный» файл test.css |
@base-color: rgb(110, 27, 255);
#Test {
background-color: @base-color;
}
#SuperTest {
background-color: @base-color;
}
#Test {
background-color: #6e1bff;
}
#SuperTest { background-color: #6e1bff;
}
/*# sourceMappingURL=test.css.map */
ИП. CSS3. Препроцессоры. LESS |
МИЭТ, 2017. |
LESS позволяет использовать переменные, примеси, вложения, циклы
Пример использования примесей
Файл less
.bordered {
border-top: dotted 1px black; border-bottom: solid 2px black;
}
#menu a { color: #111;
.bordered;
}
Файл css
#menu a { color: #111;
border-top: dotted 1px black; border-bottom: solid 2px black;
}
ИП. CSS3. Препроцессоры. LESS
Пример использования вложений
Файл less
aside {
.block { margin-bottom: 30px; ul {
margin: 0; padding: 0; font-size: 14px; li {
border-top: 1px solid #f4f4f4; list-style: none;
color: #666; padding: 3px 0; position: relative; &:first-child { border-top: none;
}
}
}
}
}
МИЭТ, 2017.
Файл css
aside .block { margin-bottom: 30px;
}
aside .block ul {
margin: 0; padding: 0; font-size: 14px;
}
aside .block ul li {
border-top: 1px solid #f4f4f4; list-style: none; color: #666; padding: 3px 0; position: relative;
}
aside .block ul li:first-child { border-top: none;
}
Файл html
<aside>
<div class="block"> <ul>
<li>...</li> <li>...</li> </ul> </div> </aside>
ИП. CSS3. Препроцессоры. LESS. Подключение |
МИЭТ, 2017. |
Подключение в броузере |
Компиляция в среде разработчика |
||
1. cкачать less.js или сжатый less.min.js |
1. |
Скачать и установить node.js |
|
http://lesscss.org/#download-options |
https://nodejs.org |
||
2. Поключить к сайту |
2. |
Установить less с помощью npm |
|
<script src="mysite.ru/less.min.js"></script> |
3. |
Откомпилировать с помощью lessc |
|
|
|||
3. Подключать свои файлы less |
cвои файлы less в файлы css |
||
<link rel="stylesheet/less" href="test.less"> |
4. |
Загрузить css на сайт |
|
|
|||
Преимущества: |
Преимущества |
||
1. просто |
|||
1. |
Максимальная скорость на странице |
||
Недостатки: |
|||
Недостатки |
|||
1. задержка загрузки и исполнения |
|||
1. |
Нужно компилировать и загружать |
||
|
|||
less.js весит 360 Кб + задержка на преобразование Less в css и встраивание css в страницу
ИП. CSS3. LESS. Подключение к NetBeance |
МИЭТ, 2017. |
ИП. CSS3. LESS. Подключение к NetBeance |
МИЭТ, 2017. |
ИП. CSS3. Верификация |
МИЭТ, 2017. |
W3C валидатор
http://jigsaw.w3.org/css-validator/