МЕНЬШЕ от входа до мастерства

Less

1. Что МЕНЬШЕ

LESSдаЯзык предварительной обработки CSS,ДаCSSрасширение.

Затем поговорим о некоторых наиболее популярных прекомпиляторах:SASS/SCSS,LESS,Stylus.

SASSУчебный сайт:

LESSУчебный сайт:

StylusУчебный сайт:

2. Зачем использовать МЕНЬШЕ

И SASS/SCSS, и Stylus очень сильны, но я все равно выбираю LESS. Лично мне нравится NodeJS, и мне не нравятся пробелы для стилуса, поэтому я использую LESS, и теперь я к этому привык. Позвольте мне представить некоторые варианты использования МЕНЬШЕ вам Бар.

МЕНЬШЕ - писать css как javascript

Функции:

  • 1. Писать стили проще: вложение
  • 2. Простота использования: переменные, операции, функции
  • 3. Низкая стоимость обучения: грамматика

3. Как использовать МЕНЬШЕ

1. Установка и использование

(1) Использование в браузере

Цитировать
<link rel="stylesheet/less" type="text/css" href="index.less" />
<!-- 必须加上/less -->
<script src="less-1.3.3.min.js"></script>
<!-- js必须在less后引用 -->

Благодаря приведенной выше конфигурации при доступе к странице js автоматически компилирует less в css.

CDN:

https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js

https://cdn.bootcss.com/less.js/3.9.0/less.js

режим наблюдения

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

базовые настройки

<link rel="stylesheet/less" href="index.less">
<script>less = { env: 'development'};</script>//声明开发模式
<script src="less-1.3.3.min.js"></script>
<script>less.watch();</script>//调用观察模式

После вызова режима просмотра вы можете добиться автоматической компиляции при каждом сохранении. Принцип режима наблюдения заключается в компиляции время от времени

Расширенная конфигурация

Добавьте тег script после основных настроек, содержание выглядит следующим образом

less = {
    // 开发环境development,生产模式production
    env: "development", 
    // 异步加载
    async: false, 

    // 在页面下异步读取导入
    fileAsync: false, 

    // 观察模式间隔
    poll: 1000, 

    // 使用函数
    functions: {}, 

    // 行信息输出comment、mediaQuery、all
    dumpLineNumbers: "all", 

    // 是否调整url为相对
    relativeUrls: false, 

    // 根路径
    rootpath: ":/"
};

(2) Компиляция с узлом

Чтобы использовать этот метод, вам нужно сначала установить узел

ссылка на скачивание узла:nodejs.cn/download/

После установки узла вы можете официально установитьlessохватывать

npm install -g less

Когда написано меньше файла, вы можете использовать следующую команду для компиляции

lessc index.less index.css

(3) инструмент для упаковки глотков

Использование этого метода требуетГлобальныйа такжепроектустановить глоток

//全局
npm install -g gulp

//当前项目
npm install --save-dev gulp

Затем установите плагин gulpgulp-less

npm install -save-dev gulp-less

После установки создайте входной файлgulpfile.js, и написать:

var origin = './index.less'; //填写你需要转化的less文件的路径
var result = './'; //填写你转化后文件存在的目录路径
var gulp = require('gulp');
gulp.task('less2css', function(){
    gulp.src(origin)
    .pipe(less())
    .pipe(result);
})

В этот момент вы можете ввестиgulp less2cssкоманда для компиляции Однако компилировать каждый раз после сохранения очень хлопотно, поэтому добавьте следующий код

gulp.task('lessc', function(){
    gulp.watch('origin', ['less2css']);
})

Теперь просто введитеgulp lesscВы можете реализовать режим наблюдателя меньше.

2. Грамматика

Базовый синтаксис CSS сохранен и расширен.

@import "reset.css" //less在编译时不会变动css文件
@import "base" //less导入其他less文件时可以省略文件格式
@import url("base.less") //less也可以使用url形式导入,但是必须有后缀

3. Операция

существуетless, вы можете напрямую складывать, вычитать, умножать и делить при написании атрибутов

пример:headerвставилpadding

@fullWidth: 1200px;
.header{
    width: @fullWidth – 20px * 2;
    padding: 0px 20px*2;
}

4. Переменные

(1) Формат: начните с @

@headergray: #c0c0c0;
@fullWidth: 1200px;
@logoWidth: 35%;

(2) Интерполяция строк

@name: banner;
background: url("images/@{name}.png") no-repeat;

Скомпилировать:

background: url("images/banner.png") no-repeat;

(3) Избегайте компиляции

background: ~"red";

Скомпилировать:

background: red;

(4) Использование в макете rem мобильного терминала

@fullWidth: 750;
@toRem: unit(@fullWidth/10,rem);
header{
    height: 150/@toRem;
}

Скомпилировать:

header{
    height: 2rem;
}

5. Смешайте

(1) Наследование класса от другого класса

.class1{
    color: red;
}
.class2{
    background: green;
    .class1;
}

После компиляции:

.class1{
    color: red;
}
.class2{
    background: green;
    color: red;
}

(2) Замените текущий селектор на &

a{
    color: #000;
    &:hover{
        color: #f00;
    }
}

После компиляции:

a{
    color: #000;
}

a:hover{
    color: #f00;
}

(3) Вложение подклассов в родительские классы

.class1{
    p{
        span{
            a{ }
        }
        &:hover{  }
    }
    div{  }
}

После компиляции:

.class1{ }
.class1 p{ }
.class1 p span{
.class1 p span a{ }
.class1 p:hover{  }
.class1 div{  }

(4) смесь поясного женьшеня

.color(@color=red){
    color: @color;
}
.class1{
    .color(#0f0);
}
.class2{
    .color();
}

После компиляции:

.class1{
    color: #0f0;
}
.class2{
    color: red;
}

(5) Определение блока

@demo: {
	color: #f00;
}
body {
	@demo()
}

После компиляции:

body {
	color: #f00;
}

Разница между этим и наследованием класса заключается в том, что блок не отображается в скомпилированном CSS.

6. Функция

(1) Логическое управление

  • Формат: заявление, когда (условия), реквизит: если ((условия), значение);

  • Пример 1. Используйте имя класса с параметрами less для отображения треугольников чистого CSS в четырех направлениях: вверх, вниз, влево и вправо.

index.less

.base(){
    width: 0;
    height: 0;
}
@normal: 20px solid transparent;
@anger: 20px solid #f00;
.triangle(@val) when(@val=left){
    .base();
    border-left: none;
    border-right: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=right){
    .base();
    border-right: none;
    border-left: @anger;
    border-top: @normal;
    border-bottom: @normal;
}
.triangle(@val) when(@val=top){
    .base();
    border-left: @normal;
    border-right: @normal;
    border-top: none;
    border-bottom: @anger;
}
.triangle(@val) when(@val=bottom){
    .base();
    border-left: @normal;
    border-right: @normal;
    border-top: @anger;
    border-bottom: none;
}
.div1{
    .triangle(left);
}
.div2{
    .triangle(right);
}
.div3{
    .triangle(top);
}
.div4{
    .triangle(bottom);
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet/less" href="index.less">
        <script src="../less-1.3.3.min.js"></script>
    </head>

    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </body
</html>
  • Пример 2:
background: if( (true), #f00 );

(2) Цикл

Пример: последовательно изменить фон 8 tds на bg_1.png, bg_2.png, ..., bg_8.png

table td{
    width: 200px;
    height: 200px;
    .loop(@i) when(@i<9){
        &:nth-child(@{i}){
            background: url(~"../images/partner_@{i}.png") no-repeat;
        }
        .loop(@i+1);
    }
    .loop(1);
}

(3) Список

@backgroundlist: apple, pear, coconut, orange;

(4) меньше библиотеки функций

image-size(“bg.png”) //获取图片的Width和Height
image-width() //获取图片的Width和Height
image-height() //获取图片的Width和Height
convert(9s, ms) //转换9秒为毫秒
convert(14cm, mm) //转换14厘米为毫米

Дополнительные функции см. в официальной библиотеке функций, включая смешанные функции, математические функции, строковые функции, функции списка и т. д.

7. Используйте JS-выражения

  • Вы также можете ссылаться на js-выражения в less, но обычно не рекомендуется использовать этот метод, так как при использовании nodejs для компиляции css с less может появиться сообщение об ошибке.

  • Формат:`javascript`

  • Пример: установите высоту на текущую полученную высоту браузера

@fullHeight: unit(` window.screen.height `, px);
div{
    height: @fullHeight;
}
  • попробуй поставить@width: unit(` window.screen.width `, px)представлятьмакет фольксвагена? Не рекомендуется, не рекомендуется использовать less в формальной среде, при использовании LESS нужно вводить js в шапку, а когда js выполняется, это будет потреблять время, и меньше компиляции нужно выполнять после выполнения js , что в определенной степени повлияет на производительность.