предисловие
Все мы знаем, что HTML и CSS — это не языки программирования, а языки разметки, поэтому в них сложно определять переменные, писать методы, реализовывать модульную разработку и т. д., как в JS. В текущем режиме написания CSS определены некоторые общедоступные имена классов стилей. Когда фрагмент HTML нуждается в этом стиле, добавляется соответствующее имя класса стиля. Поэтому мы часто видим, что в теге есть много имен классов стилей. режиме мы всегда должны обращать внимание на приоритет CSS, чтобы избежать наложения стилей...
Чтобы решить эту дилемму CSS, выделяется идея предварительной обработки и предварительной компиляции CSS, и наиболее представительными из них являются LESS, SASS и Stylus. Они добавляют много нового синтаксиса, методов написания, часто используемых функций и т. д. на основе традиционного CSS, что может сделать наш CSS языком программирования, подобным JS. В этой статье в основном представлены синтаксис и использование LESS.
Надеюсь статья вам чем-то помогла, добро пожаловать вмой блог на гитхабеСтавьте лайк и подписывайтесь, большое спасибо!
1. Компиляция МЕНЬШЕ
Написанный код LESS не может быть запущен непосредственно в браузере и должен быть скомпилирован в обычный код CSS. Итак, давайте сначала узнаем о часто используемых методах компиляции LESS.
1. Вызвать LESS.JS в браузере
LESS поддерживает работу только в современных браузерах (последние версии Chrome, Firefox, Safari и IE). Мы не рекомендуем использовать LESS-клиент в рабочей среде, потому что пользователи будут видеть задержки загрузки при компиляции LESS в CSS, и даже задержка загрузки в доли секунды в браузере снизит производительность.
Сначала представьте файл LESS, для которого мы устанавливаем стиль,Примечание: здесь rel='stylesheet/less'
<link type="text/css" rel="stylesheet/less" href="1.less"/>
Затем введите файл less.js
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
В вызове в браузере есть преимущество: можно включить режим мониторинга.Поскольку наш LESS изменится, браузер будет перекомпилирован в течение определенного периода времени, и мы можем увидеть желаемый эффект.. Конкретные операции заключаются в следующем:
<script charset="utf-8" type="text/javascript">
//->在引入LESS之前设置一个全局的变量less,配置一些参数值(根据情况自行选择需要配置的项)
var less = {
//->env:设置运行的环境(生产模式还是开发模式)
//production:编译后的CSS缓存到本地localStorage中
//development:没有把编译后的CSS缓存到本地,在URL不是标准的格式下(例如:file://...),自动设置为development
env: "development",
//->poll:在监视模式下，每两次请求之间的时间间隔(ms)
poll:500
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
<script charset="utf-8" type="text/javascript">
//->启用监视模式(env必须要设置成development)
less.watch();
</script>
// index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>less</title>
<link type="text/css" rel="stylesheet/less" href="css/styles.less">
</head>
<body>
<header>
<p>Hello World!</p>
</header>
<script src="./less.min.js" type="text/javascript"></script>
</body>
</html>
// styles.less文件
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
Если файл меньшего размера импортируется напрямую, произойдет следующая ошибка:
npm install -g lite-server
lite-server //to run
2. Используйте команду NODE для компиляции LESS (один файл)
Этот подход является наиболее распространенным способом в текущем проекте, подходящем для производственной среды проекта, он должен составить наши меньше файлов в файл CSS, а также введение файлов CSS непосредственно в нашем проекте,Основные шаги: установить -> скомпилировать/сжать и скомпилировать -> или использовать код NODE для пакетной компиляции и т. д.
Установите модуль LESS в глобальную среду NODE.
npm install less -g
Скомпилировать с помощью команды
//->把styles.less文件编译成styles.css文件(如果没有这个CSS文件自己会创建)
lessc styles.less styles.css
//->编译完成的CSS文件是经过压缩的
lessc styles.less styles.min.css -x或者--compress
Сравнение до и после компиляции кода через команду node:
// styles.less文件(编译前)
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
// styles.css文件(编译后)
header {
color: #5B83AD;
font-size: 50px;
}
3. Напишите пакетно скомпилированный код в среде NODE.
Мы составляли команду вышеуказанного узла со временем, вы можете только компилировать файл, чтобы только если есть несколько меньших страниц, каждая компиляция - это потребляемое время, поэтому мы объединяем файл FS-узла FS, вы можете написать пакетный сборник.
//->定义编译文件目录和目标导出目录
var dirPath = "./less/", tarPath = "./css/";
//->导入NODE中需要使用的模块
var fs = require("fs"),
less = require("less");
//->读取dirPath中的所有文件,检查文件的类型,只有LESS文件我们才进行存储
var ary = [],
files = fs.readdirSync(dirPath);
files.forEach(function (file, index) {
/\.(LESS)/i.test(file) ? ary.push(file) : null;
});
//->把目录下的所有文件进行编译,把编译完成的结果保存在指定的目录中
ary.forEach(function (file) {
var newFile = file.replace(".less", ".css"),
conFile = fs.readFileSync(dirPath + file, "utf-8");
less.render(conFile, {compress: true}, function (error, output) {
fs.writeFileSync(tarPath + newFile, output.css, "utf-8");
});
});
4. Используйте инструменты для компиляции LESS
В настоящее время обычно используются следующие инструменты компиляции: Koala (считается самым популярным), онлайн-компиляция (tool.oschina.net/less), SimpLESS и т. д. Эта статья не делает слишком много объяснений.
Во-вторых, грамматика LESS
Базовая грамматика LESS в основном делится на следующие аспекты: переменные, примеси, правила вложенности, операции, функции, области видимости и т. д.
1. Переменные
То же, что и переменные в JS, за исключением того, что определение переменной LESS использует не VAR, а @.
//->LESS代码
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
a {
color: @link-color;
&:hover {
color: @link-color-hover;
}
}
//->编译为CSS的结果
a {
color: #428bca;
}
a:hover {
color: #3071a9;
}
В дополнение к использованию переменных для хранения значений общедоступных свойств, указанных выше, мы также можем использовать переменные для хранения общедоступных URL-адресов, селекторов и т. д.
//->LESS代码
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");
}
@selector: box;
@bgImg: "../img";
@property: color;
2. Миксины
① Основное использование
Смешивание может легко ввести определенный класс A в другой класс B, так что класс B может просто наследовать все свойства класса A. Мы также можем вызывать с параметрами, как и с функциями.
//->LESS代码
.public {
width: 100px;
height: 100px;
}
nav ul {
.public;
list-style: none;
}
//->编译为CSS的结果
.public {
width: 100px;
height: 100px;
}
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
В приведенном выше коде nav ul копирует значение атрибута стиля, установленное как общедоступное, в свой собственный стиль. Если вы хотите не выводить результат публичного стиля в скомпилированном результате, просто напишите следующий код:
//->LESS代码
.public() {//->在选择器后面加上()就可以不编译这个样式了
width: 100px;
height: 100px;
}
nav ul {
.public;//如果public有子孙元素的样式，同样也会被复制过来
list-style: none;
}
//->编译为CSS的结果
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
② продлить
Хотя в приведенном выше случае nav ul наследует стили публично, принцип заключается в том, чтобы скопировать код, так что в скомпилированном CSS все еще будет много избыточного кода CSS.Чтобы этого избежать, мы можем использовать расширение псевдокласс для реализации наследования стилей.Совместно используйте стиль с исходным селектором, но убедитесь, что исходный селектор не заключен в скобки.
//->LESS代码
.public {
width: 100px;
height: 100px;
}
nav ul {
&:extend(.public);
list-style: none;
}
//->编译为CSS的结果
.public, nav ul {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
}
3. Правила вложения
Мы можем реализовать наследование, вложив другой селектор в один селектор, что значительно сократит объем кода и сделает код более чистым.
//->LESS代码
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
//->编译为CSS的结果
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
4. Функции и операции
Операции обеспечивают операции сложения, вычитания, умножения и деления; мы можем выполнять операции над значениями атрибутов и цветами, чтобы можно было реализовать сложные отношения между значениями атрибутов. Функции в LESS сопоставляют код JavaScript одну за другой и манипулируют значениями свойств, если хотите.
Любое количество, цвет или переменную могут быть вовлечены в расчет. Давайте посмотрим набор примеров:
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
LESS предоставляет ряд функций работы с цветом.Цвета сначала преобразуются в цветовое пространство HSL, а затем обрабатываются на уровне канала:
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
LESS предоставляет набор удобных математических функций, которые можно использовать для работы с некоторыми числовыми значениями:
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
5. Пространства имен и области видимости
Область видимости в LESS очень похожа на другие языки программирования.Во-первых, переменная или смешанный модуль будет искаться локально.Если он не найден, он будет искаться в родительской области до тех пор, пока не будет найден.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}