Узнайте меньше - прочитайте этого достаточно

CSS Less
Узнайте меньше - прочитайте этого достаточно

предисловие

Короткая доска CSS

Как учащиеся фронтенда, мы в той или иной степени должны изучить CSS, как один из трех краеугольных камней фронтенд разработки, он всегда лидирует в тренде развития Интернета. Как язык разметки, CSS может создать у новичков первое впечатление, что он прост для понимания, нелогичен и не похож на программирование. При обновлении синтаксиса, всякий раз, когда будут предлагаться новые свойства, браузерная совместимость сразу станет камнем преткновения.Можно сказать, что недостатки CSS нельзя игнорировать.

Рождение проблем часто сопровождается развитием технологий.В последние несколько лет веб-разработки, чтобы сделать CSS логичным и сделать недостатки менее серьезными, появились некоторые волшебные языки предварительной обработки. Они делают CSS полностью языком разметки, который может использовать переменные, циклы, наследование, пользовательские методы и т. д., а логика значительно улучшена.

Рождение языков предварительной обработки

Среди них, насколько мне известно, три языка: Sass, Less, Stylus.

  1. Sass родился в 2007 году, написан на Ruby, и его синтаксис очень всеобъемлющий, можно сказать, что он полностью превратил CSS в язык программирования. Кроме того, он очень популярен в стране и за рубежом, его проектная группа очень сильна, и это очень хороший язык предварительной обработки.
  2. Stylus родился в 2010 году в сообществе Node.js, и его грамматические функции сопоставимы с Sass, Это очень уникальный и инновационный язык.
  3. Less родился в 2009 году, проект с открытым исходным кодом, созданный под влиянием Сасса. Он расширяет язык CSS, добавляя такие функции, как переменные, примеси, функции и т. д., что упрощает поддержку CSS, упрощает создание тем, расширение (Цитата с официального сайта).

Выберите язык предварительной обработки

Это очень запутанный вопрос.

  1. По-моему, это как искать девушку, кому-то нравятся добродетельные и тихие, кому-то бойкие и шумные, у каждого свои увлечения, но после выключения света на ночь они почти одинаковые, так что вам не нужно слишком беспокоиться. Конечно, в первую очередь у тебя должна быть девушка.

  2. Согласно онлайн-обсуждениям, Sass и Stylus имеют больше возможностей, чем Less, но с точки зрения стоимости обучения и времени адаптации Less немного лучше, поэтому я выбираю Less.

  3. Less не удаляет какие-либо возможности CSS, но добавляет множество дополнительных возможностей к существующему синтаксису, поэтому изучение Less — очень удобная вещь.

Если вы раньше не сталкивались с языками предварительной обработки и не знаете, какой из них изучать, лучше взглянуть на введение Less ниже, я думаю, вы влюбитесь в него.

Прелюдия к меньшему использованию

Есть два способа использовать Меньше

  1. Внедрите Less.js на странице
  • Доступны наОфициальный сайтскачать
  • или используйте CDN
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
    Следует отметить, что тег ссылки должен быть введен до Less.js, а атрибут rel тега ссылки должен иметь значение stylesheet/less.
     <link rel="stylesheet/less" href="style.less">
 <script src="less.min.js"></script>

  1. Установить из командной строки с помощью npm

    npm install -g less

    Используйте определенные команды

    $ lessc styles.less > styles.css

    Если еще есть проблемы,Официальный сайтЕсть четкие шаги.

    Если вы также являетесь пользователем Webpack, вам также необходимо сотрудничать с less-loader для обработки, подробности см. В моей статье:Руководство по полету Webpack, в котором подробно описывается, как обрабатывается less.

    Если вы находитесь в локальной среде, вы можете использовать первый метод, который очень прост, но в производственной среде, где очень важна производительность, лучше использовать второй метод.

текст

Ниже я представлю функциональные возможности Less.

Переменная

Мы часто видим, что одно и то же значение повторяется несколько раз в CSS, что затрудняет поддержку кода. В идеале это должно выглядеть так:

const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);

пока мы модифицируемbgColorС помощью этой переменной цвет фона всей страницы изменится соответственно.

Чем меньше переменных очень мощных, из всех вещей, стоит упомянуть, что это постоянная переменная, она может быть определена только один раз и не может быть повторно использована.

  1. Переменная значения

    /* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成后的 CSS */
#wrap {
  color: #999;
  background: skyblue;
  width: 50%;
}

    к@Определите переменные в начале и введите непосредственно при использовании@имя.

    В обычной работе мы можем инкапсулировать часто используемые переменные в файл, что способствует организации и обслуживанию кода.

    @lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

  2. селекторная переменная

    Сделать селектор динамический

    /* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}
.@{Wrap}{
  color:#ccc;
}
#@{Wrap}{
  color:#666;
}

/* 生成的 CSS */
#wrap{
  color: #999;
  width: 50%;
}
.wrap{
  color:#ccc;
}
#wrap{
  color:#666;
}

  3. переменная атрибута

    Сократите количество написанного кода

    /* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
#wrap{
  border-style:solid;
}

  4. переменная URL

    При изменении структуры проекта измените его переменные.

    /* Less */
@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

/* 生成的 CSS */
body {
  background: url("../img/dog.png");
}

  5. объявить переменную

    Несколько похоже на гибридный метод ниже

    • Структура: @name: { свойство: значение ;};
    • Используйте имя();
    /* Less */
@background: {background:red;};
#main{
    @background();
}
@Rules:{
    width: 200px;
    height: 200px;
    border: solid 1px red;
};
#con{
  @Rules();
}

/* 生成的 CSS */
#main{
  background:red;
}
#con{
  width: 200px;
  height: 200px;
  border: solid 1px red;
}

  6. Переменная работа

    Я должен упомянуть, что переменные операции Less полностью превзошли мои ожидания и очень мощны.

    • Кроме сложения и вычитания, за основу взята единица первых данных
    • При умножении и делении обратите внимание на то, что единица измерения должна быть унифицирована.
    /* Less */
@width:300px;
@color:#222;
#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
}

/* 生成的 CSS */
#wrap{
  width:280px;
  height:200px;
  margin:1400px;
  color:#444;
  background-color:#333;
}

  7. переменная область видимости

    Понимание одного предложения:Принцип близости, не говорите мне о закрытиях.

    С помощью официального сайта Demo

    /* Less */
@var: @a;
@a: 100%;
#wrap {
  width: @var;
  @a: 9%;
}

/* 生成的 CSS */
#wrap {
  width: 9%;
}

  8. использовать переменные для определения переменных

    /* Less */
@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
  content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
  content: "I am fnord.";
}

вложенный

  1. Магия &

    & : имя селектора на верхнем слое, в этом примереheader.

    /* Less */
#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替换成 #header
    margin:20px;
  }
}
/* 生成的 CSS */
#header::after{
  content:"Less is more!";
}
#header .title{ //嵌套了
  font-weight:bold;
}
#header_content{//没有嵌套！
    margin:20px;
}

  2. запросы средств массовой информации

    В предыдущей работе мы использовали медиазапросы, и нам приходилось писать элемент отдельно

    #wrap{
  width:500px;
}
@media screen and (max-width:768px){
  #wrap{
    width:100px;
  }
}

    Less предоставляет очень удобный способ

    /* Less */
#main{
    //something...

    @media screen{
        @media (max-width:768px){
          width:100px;
        }
    }
    @media tv {
      width:2000px;
    }
}
/* 生成的 CSS */
@media screen and (maxwidth:768px){
  #main{
      width:100px; 
  }
}
@media tv{
  #main{
    width:2000px;
  }
}

    Единственным недостатком является то, что каждый элемент компилируется сам@mediaоператор, и не будут объединены.

  3. боевые навыки

    Вы можете использовать Less для определения собственных стилей в элементах.

    /* Less */
#main{
  // something..
  &.show{
    display:block;
  }
}
.show{
  display:none;
}

    const main = document.getElementById("main");
main.classList.add("show");

    результат:

    #main.show{
  display:block;
}
.show{
  display:none; //会被覆盖。
}

гибридный подход

  1. метод без параметров

    Метод подобен набору объявлений, вы можете просто ввести имя непосредственно при его использовании.

    /* Less */
.card { // 等价于 .card()
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
  .card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
  background: #f6f6f6;
  -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}

    в.cardа также.card()эквивалентны. 个人建议，为了避免 代码混淆，应写成 :

    .card(){
  //something...
}
#wrap{
  .card();
}

    Важный:

    • .а также#Любой из них может использоваться в качестве префикса метода.
    • Пишите или нет после метода()Зависит от личных привычек.

  2. Метод параметра по умолчанию

    • Less может использовать параметры по умолчанию. Если параметры не переданы, будут использоваться параметры по умолчанию.
    • @argumentsкак в JSargumentsОтносится ко всем параметрам.
    • Передаваемые параметры должны иметь единицы измерения.
    /* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
  .border;//等价于 .border()
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

  3. шаблон сопоставления метода

    Подобно полиморфизму в объектной ориентации

    /* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
  border-color:transparent  transparent  transparent #999;
  border-style: solid;
  border-width: 50px;
}

    суть

    • первый параметрleftЧтобы найти метод с наивысшей степенью совпадения, если степень совпадения одинакова, будут выбраны все, и будет замена переопределения стиля.
    • Будет соответствовать, если совпадающий аргумент является переменной, как в@_.

  4. пространство имен методов

    Сделать метод более стандартизированным

    /* Less */
#card(){
    background: #723232;
    .d(@w:300px){
        width: @w;
        
        #a(@h:300px){
            height: @h;//可以使用上一层传进来的方法
        }
    }
}
#wrap{
    #card > .d > #a(100px); // 父元素不能加 括号
}
#main{
    #card .d();
}
#con{
    //不得单独使用命名空间的方法
    //.d() 如果前面没有引入命名空间 #card ，将会报错
    
    #card; // 等价于 #card();
    .d(20px); //必须先引入 #card
}
/* 生成的 CSS */
#wrap{
  height:100px;
}
#main{
  width:300px;
}
#con{
  width:20px;
}

    суть

    • в CSS>Селектор, который выбирает дочерний элемент, — это элемент, который должен иметь прямую связь с родительским элементом.
    • При введении командного пространства, например, использование>Селектор, родительский элемент не может быть заключен в круглые скобки.
    • Метод в пространстве имен не должен использоваться сам по себе. Пространство имен должно быть импортировано до того, как в нем можно будет использовать метод.
    • Подметоды могут использовать методы, переданные из предыдущего уровня.

  5. Условная фильтрация методов

    Меньше не имеет, если еще, но имеетwhen

    /* Less */
#card{
    
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

    суть

    • Операции сравнения: > >= = =
    • = означает равно
    • Значения, отличные от ключевого слова true, считаются ложными:

  6. переменное количество параметров

    Если вы хотите, чтобы ваш метод принимал переменное количество аргументов, вы можете использовать ... , например оператор распространения ES6.

    /* Less */
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

/* 生成后的 CSS */
#main{
  box-shadow: 1px 4px 30px red;
  text-shadow: 1px 4px 30px red;
}

  7. Метод использует важно!

    Метод использования очень прост, просто добавьте ключевое слово после имени метода.

    /* Less */
.border{
    border: solid 1px red;
    margin: 50px;
}
#main{
    .border() !important;
}
/* 生成后的 CSS */
#main {
    border: solid 1px red !important;
    margin: 50px !important;
}

  8. метод петли

    В Less нет функции цикла for, но умным программистам нетрудно использовать рекурсию для ее достижения. Ниже приведена демонстрация на официальном сайте, которая имитирует систему сетки генерации.

    /* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

  9. метод сращивания свойств

    +_представляет собой пространство;+Представляет запятую.

    • запятая
    /* Less */
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
  .boxShadow();
  box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
    • пространство
    /* Less */
.Animation() {
  transform+_: scale(2);
}
.main {
  .Animation();
  transform+_: rotate(15deg);
}

/* 生成的 CSS */
.main {
  transform: scale(2) rotate(15deg);
}

  10. боевые навыки

    Ниже приведен очень хорошая демонстрация на официальном сайте

    /* Less */
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // 调用 方法
  padding: @average;    // 使用返回值
}

/* 生成的 CSS */
div {
  padding: 33px;
}

Можно сказать, что Less — элегантный язык программирования.

наследовать

extend — это псевдокласс Less. Он наследует все стили в соответствующих объявлениях.

  1. Использование ключевого слова расширения

    /* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

  2. весь глобальный поиск и замена

    Используйте все объявления, соответствующие селектору.

    /* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

  3. Уменьшите дублирование кода

    На первый взгляд, самая большая разница между extend и method заключается в том, что extend использует одно и то же объявление с одним и тем же селектором, тогда как метод использует свое собственное объявление, что, несомненно, увеличивает повторение кода.

    Пример метода Контраст с расширением выше:

    /* Less */
.Method{
  width: 200px;
  &:after {
      content:"Less is good!";
  }
}
#main{
  .Method;
}
#wrap{
  .Method;
}

/* 生成的 CSS */
#main{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}
#wrap{
  width: 200px;
  &:after{
    content:"Less is good!";
  }  
}

  4. суть

    Официальный сайт перевода

    • Между селекторами и расширениями допускаются пробелы: pre:hover :extend(div pre).
    • У вас может быть несколько расширений: pre:hover:extend (div pre):extension(.bucket tr) — обратите внимание, что это pre:hover:extend (div pre, .bucket tr) одно и то же.
    • Это невозможно, расширение должно быть в конце: pre:hover:extend(div pre).nth-child(odd).
    • Если набор правил содержит несколько селекторов, все селекторы могут использовать ключевое слово extend.

    импорт

    1. Импортировать меньше файлов можно без суффикса
    import "main"; 
//等价于
import "main.less";
    1. @importможно разместить где угодно
    #main{
  font-size:15px;
}
@import "style";

  5. reference

    Самая мощная функция в Less Использует импортированный файл Less, но не компилирует его.

    /* Less */
@import (reference) "bootstrap.less"; 

#wrap:extend(.navbar all){}

    Официальный сайт перевода:

    Используйте @import (ссылка) для импорта внешних файлов, но не добавляйте импортированные файлы в конечный результат, а только ссылки.

  6. once

    Поведение операторов @import по умолчанию. Это указывает на то, что один и тот же файл будет импортирован только один раз, и повторяющийся код последующих импортированных файлов не будет разрешен.

    @import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

  7. multiple

    Используйте @import (несколько), чтобы разрешить импорт нескольких файлов с одинаковым именем.

    /* Less */

// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";

/* 生成后的 CSS */
.a {
  color: green;
}
.a {
  color: green;
}

функция

  1. Тип решения

    • isnumber

    Определяет, является ли заданное значение числом.

    isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false
    • iscolor

    Определено, является ли заданное значение цветом.

    • isurl

    Определяет, является ли заданное значение URL-адресом.

  2. манипуляции с цветом

    • saturate

    Увеличьте насыщенность цвета на определенную величину.

    • lighten

    Увеличьте яркость цвета на определенную величину.

    • darken

    Уменьшите яркость цвета на определенную величину.

    • fade

    Установите определенную степень прозрачности для цвета.

    • mix

    Смешайте два цвета в соответствии с соотношением.

  3. математическая функция

    • ceil

    Округлен.

    • floor

    Округлить.

    • percentage

    Преобразование числа с плавающей запятой в строку процентов.

    • round

    округление.

    • sqrt

    Рассчитайте квадратный корень числа.

    • abs

    Вычисляет абсолютное значение числа, сохраняя единицы измерения как есть.

    • pow

    Вычислить степень числа.

Из-за ограниченного объема статьи могут быть представлены только некоторые функции с высокой эффективностью.

Если вы хотите узнать больше, вы можете перейти на официальный сайтфункциональная ссылка

разное

  1. Примечания

    • /* */ Собственные комментарии CSS будут скомпилированы в файле CSS.
    • // Комментарий, предоставленный Less, который не будет скомпилирован в файлы CSS.

  2. избегать компиляции

    /* Less */
#main{
  width:~'calc(300px-30px)';
}

/* 生成后的 CSS */
#main{
  width:calc(300px-30px);
}

    структура:~' 值 '

  3. переменная строка

    В повседневной работе эта потребность слишком распространена. В следующем примере реализована различная задержка перехода, анимация, @keyframes.

    .judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {
  
  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}

    структура:~"字符@{变量}字符";

  4. Используйте JS

    Поскольку Less написан на JS, у Less есть уникальная особенность: в коде используется Javascript.

    /* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
/* 生成后的 CSS */

// 弹出 1
#wrap{
  width: 随机值（0~100）px;
  height: 743px;//由电脑而异
  background: 随机颜色;
}
#wrap::after{
  content:"AAA";
}

Несколько месяцев назад былCSS in JSКонцепция очень популярна, и теперь кажетсяJS in CSSЭто никогда не было возможно. Я думаю, что можно построить колесо на основе функции Less и JS для управления CSS для формирования динамических свойств.В случае успеха это, вероятно, изменит текущую позицию открытия фронтенда.

заключительные замечания

Поскольку я узнал, что Интернет-бесчисленные пожилые люди расскажут мне, в Интернете есть три основных краеугольных камня, контрольное поведение JS, контрольные конструкции HTML, стили управления CSS. Я всегда хочу разделить на 3 языка? Почему вы не можете синтезировать язык? Или не это более уместно? В разработке Интернета в эти годы страница из MVC к текущему MVVC, структура меняется, но это просто идеальное колесо. Почему мы не можем сломать традицию? Пусть три основных краеугольных камня на переднем конце становятся горой? Пожалуйста, подумайте об этом, какой там мир.

Меня зовут Саймон, с севера, Менее характерно краткое изложение, я надеюсь, что это может вам помочь.

(над)

Категории