美文网首页
Less的学习

Less的学习

作者: 啥都有人取 | 来源:发表于2018-01-25 14:58 被阅读0次

Less 是一门 CSS 预处理语言,它有变量、混合、嵌套和运算等用法。使我们在写CSS时能更灵活。但Less需要编译成.css文件,编译的方法有多种,如webpack的less-loader和编辑器WebStorm的编译等。
我这里会介绍怎么使用 WebStorm监听less文件编译less的基础语法

1.WebStorm监听less文件

  1. 点击WebStorm左上角的File(文件)选项
  2. 再点击Setting(设置)选项
  3. 找到Tool(工具)下的File Watchers(文件监听),再点击右边的 + , 点击less,会弹出一个选框
  4. 然后直接点击apply(应用即可),下面三个选项:
    1 immediate file synchronization 是 less 和 css 实时编译,
    2 trigger watcher regardless of syntax errors 不考虑语法错误
    3 trigger watcher regardless of syntax errors 只跟踪根文件。
    自己可以按需勾选。

2. less的基本语法

  1. 注释
    less中有两种注释,分别是 ///**/
    // 这种注释是不会被编译在CSS中的;
    /**/ 这种注释会编译在CSS中,如果想CSS中有注释需要使用这种

  2. 变量
    变量的定义: @变量名: 值;
    变量的使用: CSS属性: @变量名;

@background-color: #e4393c;
body{
  background: @background-color;
}
  1. 混合
    混合是把一份CSS拷贝到另一份CSS里面,并不是继承关系。
    混合也分 不带参混合带参混合
不带参混合

定义的类如果不需要编译在CSS中,则需要在类名后加括号 ()。
.类名(){
  CSS样式
}

//定义
.position(){
  position: relative;
}
body{
  //使用
  .position();
}

定义的类如果需要编译在CSS中,则不需要在类名后加括号。

//定义
.position{
  position: relative;
}
body{
  //使用
  .position;
}
带参混合

带参混合又分为带默认值和不带默认值,可以理解为类名也是变量名的作用域。
带参混合不带默认值:
.类名(@变量名){
  //CSS样式
}

//定义
.border(@w){
  border: @w solid #333;
}
body{
  //使用
  .border(1px);
}

带参混合带默认值:
.类名(@变量名:值){
  //CSS样式
}

//定义
.border(@w:1px){
  border: @w solid #333;
}
body{
  //使用
  .border(); 或 .border(5px);
}
  1. 匹配模式
    匹配模式类似于JS里的if,但写法上有些偏差,写法和混合的带参不带默认值的写法很像。
    .类名(匹配规则){
      //CSS样式
    }
//定义
.position(r){
  position: relative;
}
.position(a){
  position: absolute;
}
body{
  //使用,匹配 r 的CSS类
  .position(r);
}
  1. 运算
    可以在数字类的值上使用加减乘除运算,可以不带单位
body{
  color: #eee + 10
}
  1. 嵌套
    可以在类里面嵌套着写CSS类,伪类选择器可以使用 &:伪类{},&代表上一层选择器
body{
  background: @background-color;
  a{
    color: #000;
    &:hover{
       color: red;
    }
  }
}
  1. @arguments 变量
    当一个类名里面有多个变量的时候,可以使用 @arguments 把变量全部取出来。
.common-border( @w:1px; @c:#ccc; @s:solid ){
  border: @arguments;
}
  1. 避免编译
    当有一些属性值需要保留原样的时候可以使用避免编译,用 属性名: ~'CSS样式';。
.count(){
  width: ~'calc(300px-30px)';
}
  1. !important
    可以给样式加最高权重,也可以给混合的类名加。
.common-border( @w:1px; @c:#ccc; @s:solid ){
  border: @arguments;
}
body{
    .common-border()!important;
}
  1. 引入less或CSS文件 @import
@import "文件路径";

更多的语法规则可以在 less中文官网 学习。

相关文章

  • less基础

    less less语法学习

  • less的配置安装及语法使用

    [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...

  • less使用

    LESS 的介绍 学习网站:快速入门 | Less.js 中文文档LESS « 一种动态样式语言 Less的安装 ...

  • Less的学习

    Less 是一门 CSS 预处理语言,它有变量、混合、嵌套和运算等用法。使我们在写CSS时能更灵活。但Less需要...

  • less的学习

    CSS作为一门标记性语言,语法简单,学习难度低但CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复...

  • Less学习

    Variables(变量) 概述变量通过为你提供一种在一个地方管理这些值的方法让你的代码变得更容易维护: 变量插值...

  • Less学习

    1.全局安装: npm install less -g 2.编写less文件(xx.less),定义变量 官网在介...

  • Less学习

    为什么使用less css已经有很多新的东西学习了,为什么要学习less的知识。Github上很多项目都已经在用,...

  • 学习LESS

    变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几...

  • Less学习

    What is Less *动态的样式语言,扩充了css Why use Less *增加了诸如变量、混合(mix...

网友评论

      本文标题:Less的学习

      本文链接:https://www.haomeiwen.com/subject/jjlvaxtx.html