less入门

webstorm 与 less 环境配置

File Watchers配置

External Tools配置

配置完成后可自动生成 css

注释

/ 与 //

变量

  • 变量定义：@变量名:变量值
  • 变量使用 @变量名

拼合字符串(如选择器、URLs、导入路径、属性名)时 @{变量名}

@charset "UTF-8";
// variables
@my-selector: banner;

//import statements
@import " @{my-selector}/style.css";

//selector
.@{my-selector} {

  //property
  @{my-selector}: bold;
  line-height: 40px;
  margin: 0 auto;
  //url
  background:url("@{my-selector}/css/");

}

变量的变量

@charset "UTF-8";
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}

导入less的变量

// library
@charset "UTF-8";
@base-color: green;
@dark-color: darken(@base-color, 10%);

@charset "UTF-8";

// use of library
@import "library.less";

h1 {
  color: @base-color;
}

输出效果

@charset "UTF-8";
h1 {
  color: green;
}

混合 类似于函数的调用

普通混合

less源码

@charset "UTF-8";
.hFontFamily{
  font-family:"微软雅黑", "Mircsoft YaHei";
}
h1 {
  font-size: 28px;
  .hFontFamily;
}

h2 {
  font-size: 14px;
  .hFontFamily;
}

输出

@charset "UTF-8";
.hFontFamily {
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}

不带输出的普通混合 选择器后加()

其目的不让公共的混合元素进行输出

less源码

@charset "UTF-8";
.hFontFamily{
  font-family:"微软雅黑", "Mircsoft YaHei";
}
h1 {
  font-size: 28px;
  .hFontFamily;
}

h2{
  font-size: 14px;
  .hFontFamily;
}

输出

@charset "UTF-8";
.hFontFamily {
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}

带父选择器混合 & 代表父级

less源码

@charset "UTF-8";
.hFontFamily() {
  &:hover {
    border: solid 1px #000000;
  }
  font-family: "微软雅黑", "Mircsoft YaHei";
}

h1 {
  font-size: 28px;
  .hFontFamily;
}

h2 {
  font-size: 14px;
  .hFontFamily;
}

输出

@charset "UTF-8";
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
  border: solid 1px #000000;
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
  border: solid 1px #000000;
}

使用场景二

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

输出

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

&本质就是代表父类选择器 字符串进行拼接
一个&代表一个父选择器 两个&& 即 父选择器父选择器 例 :

@charset "UTF-8";

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

输出

@charset "UTF-8";
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link,
.linkish {
  color: cyan;
}

带参数的混合

less源码

@charset "UTF-8";
.hFontFamily(@color) {
  &:hover {
    border: solid 1px @color;
  }
  font-family: "微软雅黑", "Mircsoft YaHei";
}

h1 {
  font-size: 28px;
  .hFontFamily(red);
}

h2 {
  font-size: 14px;
  .hFontFamily(#000);
}

输出

@charset "UTF-8";
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
  border: solid 1px red;
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
  border: solid 1px #000;
}

带参数且有默认值的混合

less源码

@charset "UTF-8";
.hFontFamily(@color:red) {
  &:hover {
    border: solid 1px @color;
  }
  font-family: "微软雅黑", "Mircsoft YaHei";
}

h1 {
  font-size: 28px;
  .hFontFamily(); //读取默认值
}

h2 {
  font-size: 14px;
  .hFontFamily(#000);
}

输出

@charset "UTF-8";
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
  border: solid 1px red;
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
  border: solid 1px #000;
}

带多个参数的混合 使用分号;分隔 （不要使用逗号） 调用时必须按顺序

命名参数的混合 调用时不必按顺序

以上两种情况，调用时也需用分号分隔
以上两种状况，我们按正规的调用来，就要考虑那么多问题。其实程序产生的问题，就是不按规范来做，所以产生很多奇怪的问题。

@arguments 代表所有的参数

less源码

@charset "UTF-8";
.hFontFamily(@color:red;@borderStyle) {
  &:hover {
    border: 1px @arguments;
  }
  font-family: "微软雅黑", "Mircsoft YaHei";
}

h1 {
  font-size: 28px;
  .hFontFamily(@color:red;dashed);
}

h2 {
  font-size: 14px;
  .hFontFamily(#000,solid);
}

输出

@charset "UTF-8";
h1 {
  font-size: 28px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
  border: 1px red dashed;
}
h2 {
  font-size: 14px;
  font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
  border: 1px #000 solid;
}

匹配模式 类似于同名方法

less源码

@charset "UTF-8";
.border(all,@w: 5px){
  border-radius: @w;
}
.border(t_l,@w:5px){
  border-top-left-radius: @w;
}
.border(t_r,@w:5px){
  border-top-right-radius: @w;
}
.border(b-l,@w:5px){
  border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
  border-bottom-right-radius: @w;
}

footer{
  .border(t_l,10px);
  .border(b-r,10px);
  background: #33acfe;
}

输出

@charset "UTF-8";
footer {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #33acfe;
}

混合的返回值

less源码

@charset "UTF-8";
.average(@x, @y) {
  @average: ((@x + @y) / 2);
  @he:(@x + @y);
}

div {
  .average(16px, 50px);
  padding: @average;
  margin: @he;
}

输出

@charset "UTF-8";
div {
  padding: 33px;
  margin: 66px;
}

嵌套规则

  • 模拟HTML结构
  • 父元素选择器 &:伪类名称

运算

  • 数值
  • 颜色

命名空间 Namespaces

less源码

@charset "UTF-8";
#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
}

#header a {
  color: orange;
  #bundle.button();
}

输出

@charset "UTF-8";
#header a {
  color: orange;
}
#header a .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a .button:hover {
  background-color: white;
}

Maps

less源码

@charset "UTF-8";
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

输出

@charset "UTF-8";
.button {
  color: blue;
  border: 1px solid green;
}

作用域

Less中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推

less源码

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

继承

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • less的配置安装及语法使用
    [目录] Less为什么会出现？ 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...
    顽皮的雪狐七七阅读 15,678评论 5赞 42
  • less入门笔记
    在这之前，补下一个东西，就是在上篇的笔记当中有关于favicon的东西还没有测试 我在自己的电脑的goole、op...
    南蓝NL阅读 3,921评论 0赞 1
  • 「LESS」详解 - 入门到精通
    # 前言   学习less之前，个人并不是很喜欢用预编译语言，自认为CSS功底够扎实。无奈在这里自己碰了次壁，某类...
    果汁凉茶丶阅读 7,616评论 0赞 10
  • Vue.js配置less
    简述 由于Vue版本的更新，在开发Vue项目过程中，出现了一些问题；其中就有less配置的问题；下面我们来聊聊，v...
    hawkzz阅读 11,088评论 0赞 2
  • LESS CSS 框架简介
    简介 CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide...
    老夫的天阅读 5,998评论 1赞 29

友情链接更多精彩内容