less常用语法总结

CSS预处理器

原文链接
CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

所以这就决定了 CSS 预处理器的主要目标：
提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。

Less简介

官网
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

Less安装

安装`lessc`供全局使用

// 安装
npm install less -g
// 查看less版本号
lessc -v
// 将.less文件转换成.css文件
lessc xxx.less xxx.css

node环境安装

less-loader的配置详见

npm i less less-loader --save-dev

Less语法

Variables变量

1. 变量定义

变量可定义在使用前和使用后均可，变量申明可提升。但我们建议是写在less文件所有样式的最前面，便于变量的统一管理

// Variables
@color: red;
// Usage
a {
  color: @color;
}

2. url中使用变量

可定义引用文件、图片等的url前缀，使用时在""引号内通过@{}去使用变量

// Variables
@images: "../img";

// Usage
.less-demo {
  background: url("@{images}/bg.png");
}

3. 选择器可变插值

定义变量可用于选择器和样式属性中，通过@{}的方式使用。可通过更改不同的less变量前缀，达到换肤的目的。

// 定义前缀
@prefix: less;
// 使用
.@{prefix}-demo {
    .@{prefix}-left {}
    .@{prefix}-right {}
}
// 选择器
@selector: test;
.@{selector} {
    color: red;
}
// 属性
@property: color;
.top {
  @{property}: red;
  background-@{property}: gray;
}

4. 变量名

在变量中引用变量，通过~"@{变量名}-属性值"的方式实现。可用于mixins函数中，通过传递不同的参数，实现不同的样式，减少重复代码。

// 基础变量定义
@prefix：less;
@left-width: 40%;
@left-color: blue;
@right-color: red;
@right-width: 60%;
// usage
.content-color(left);
.content-color(right);
// function
.content-color(@content) {
    .@{prefix}-@{content} {
        // 变量定义，值根据类型有关
        @content-font-color: ~"@{content}-color";
        @content-width: ~"@{content}-width";
        color: @@content-font-color;
        width: @@content-width;
        .bordered;
    }
}

编译后

.less-left {
  color: blue;
  width: 40%;
  border: 1px solid #333;
}
.less-right {
  color: red;
  width: 60%;
  border: 1px solid #333;
}

Extend扩展

1. 扩展

A选择器想要拥有B选择器的样式，可通过&:extend(B选择器的名称)来实现

// h1标签扩展拥有h2标签的样式属性
h1 {
    &:extend(h2);
    font-size: 16px;
}
h2 {
    color: #333;
}

编译后

h1 {
    font-size: 16px;
}
h1, h2 {
    color: #333;
}

2. 扩展all

B选择器有多个样式，想要A选择器拥有B选择器所有的样式，可通过:extend(B选择器 all)来实现

h2, .test-extend {
    color: #333;
}
.test-extend {
    font-size: 14px;
}
// 扩展某一选择器全部的样式属性
.test-expand-content:extend(.test-extend all) {
    text-decoration: underline;
}

编译后

h2, .test-extend, .test-expand-content {
    color: #333;
}
.test-extend, .test-expand-content {
    font-size: 14px;
}
.test-expand-content {
    text-decoration: underline;
}

Mixins混合

1. 选择器混合

定义class样式，可在其他样式用直接使用该样式。这种方式需要注意的是定义class样式会被输出，如果没有用到该样式，则建议不要使用定义样式的方式，生成多余的css代码。

// 会输出样式
.bordered {
    border: 1px solid #333;
}
.demo {
    .left {
        width: 40%;
        .bordered;
    }
    .right {
        width: 60%;
        .bordered;
    }
}

编译后

// 如果用不到bordered这个class则会出现多余的css样式
.bordered {
    border: 1px solid #333;
}
.demo .left {
    width: 40%;
    border: 1px solid #333;
}
.demo .right {
    width: 60%;
    border: 1px solid #333;
}

2. 命名空间

通过#id名嵌套mixin，用于区分不同库，避免多库使用时的冲突问题

#my-library {
  .my-mixin() {
    color: black;
  }
}
// which can be used like this
.class {
  #my-library > .my-mixin();
}

编译后

.class {
  color: black;
}

3. 参数化混合

多参数传入时，参数可设置默认值，参数与参数直接用;分隔

// 不会输出样式
.color(@bg: f5f5f5; @color: #333) {
  background-color: @bg;
  color: @color;
}
.left {
  .color();
}
.right {
  .color(#f0f0f0; #666);
}

4. @arguments变量

可使用@arguments获取传入的所有参数

// 获取所有参数
.box-shadow(@x: 0; @y: 0; @blur: 5px; @color: rgba(0, 0, 0, 0.2)) {
-webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
        box-shadow: @arguments;
}
.demo{
  .box-shadow(2px; 5px);
}

5. rest参数

... 代表可变个数（0-N）的参数，@rest表示指定参数之外的剩余所有参数

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments
.mixin(@a; @rest...) {
   // @rest is bound to arguments after @a
   // @arguments is bound to all arguments
}

6. !important关键词

在mixin混合后用!important，则mixin内部的所有属性都会继承，加上!important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

编译后

.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

Mixin Guards防卫

通过关键字when,来实现有条件的执行,依据@media执行规范。when中的条件判断：比较运算符：>, >=, =, =<, <，true是唯一得“真”值。参数之间也可以进行比较。逻辑运算符：'and' ,','(相当于or),'not'。类型校验函数：iscolor，isnumber，isstring，iskeyword，isurl。是否包含单位函数：ispixel，ispercentage，isem，isunit。

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

detached ruleset 分离规则集

通过@符定义，分离规则集是一个css属性、嵌套规则集、媒体声明等的样式集合。

// declare detached ruleset
@detached-ruleset: { background: red; };

// use detached ruleset
.top {
    @detached-ruleset(); 
}
// 函数
.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200) { @rules(); }
  html.lt-ie9 &                       { @rules(); }
}

header {
  background-color: blue;

  .desktop-and-old-ie({
    background-color: red;
  });
}
// scope
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

Loops循环

通过when判断可在函数内循环调用某一函数，直到不符合条件截止

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

输出：

.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

Merge合并属性

通过+和+_进行样式合并，前者用逗号隔开，后者用空格隔开

// merge需要配置+和+_实现
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
.mixin() {
  transform+_: scale(2);
}

.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

输出：

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

.myclass {
  transform: scale(2) rotate(15deg);
}

Parent Selectors父选择器&

.header {
    & &-title {
    }
    &-title {
    }
    &:first-child {
    }
    .less & {
    }
    & & {
    }
}

编译后

.header .header-title {
}
.header-title {
}
.header:first-child {
}
.less .header {
}
.header .header {
}

@plugin插件

@plugin "my-plugin";定义一个插件JS文件，返回一个Less节点。可定义不同文件得重名得函数，在插件引用作用域中用。return false可调用该函数但不返回任意值。3.0版本之后，函数可返回任意类型。

// function.js
module.exports = {
    install(less, pluginManager, functions) {
       // 将传入的参数以,分割返回
        functions.add('args', node => {
            if (typeof node.value === 'string') {
                return node.value;
            }
            let result = [];
            for (let i = 0; i < node.value.length; i++) {
                result.push(node.value[i].value);
            }
            return result.join(', ');
        });
    }
};
// usage
@plugin "./functions";
.transition(...) {
  transition-property: args(@arguments);
  transition-duration: 0.2s;
}

Less常用的语法就总结到这里啦！哪里不对的欢迎指出哦~~
又是有收获的一天！🆙

参考文章：

最后编辑于：2020.11.27 17:39:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342