Wscats/less-demo

less

Wscats opened this issue · 13 comments

Wscats commented

环境配置，下载客户端所需要的less.js
注意吧rel属性改为stylesheet/less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
然后下面再引入，注意顺序不能反了
<script src="less.js" type="text/javascript"></script>
写完上面的代码后面，页面应该如下面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>wsscat less demo</title>
    </head>
    <link rel="stylesheet/less" type="text/css" href="styles.less"/>
    <script type="text/javascript" src="less.js" ></script>
    <body>
    </body>
</html>

注意less文件里面要有内容，不然会报以下错误
这里写图片描述

node环境下安装
Win：npm install -g less
Mac或者linux：sudo npm install -g less注意带sudo不然没有安装权限
这里写图片描述
下面这句话我们就可以把styles.less转化为styles.css
lessc styles.less styles.css
less官方帮助
语法参考

Wscats commented

定义变量
变量的作用就是定义一个值之后，在任何地方都能重复使用，这样代码更易维护，方便同时更改相同地方的变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@font-size: 18px;
#header {
  color: @light-blue;
  font-size: @font-size;
}

上面代码会转换为下面代码

#header {
    color: #6c94be;
    font-size: 18px;
}
Wscats commented

运算
在less.js里面任何数字、颜色代码或者变量相互之间都能运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
#header2 {
    color: #888 / 4;//#@222
    background-color: @nice-blue + #111;
    height: 100% / 2 + @filler;//50%+10%
    width: @other;
}

注意颜色的#5B83AD＋#111111 ＝ #6c94be

@size: 10px+10;
@color: #666 + 111;
#header2 {
    color: @color;
    font-size: @size;
}

less将会使用出现的单位，所以这个例子中，最终会输出是

color: #d5d5d5;
font-size: 20px;
Wscats commented

函数
less自定义了部分常用的函数，例如百分比转换，颜色变化等等

@height: 0.5;
@size: 10px+10;
@color: #666 + 111;
#header2 {
    color: @color;
    height: percentage(@height);//0.5->50%
    font-size: saturate(@size,10%);//增加10%饱和度
    background-color: spin(lighten(@color, 25%), 10);//颜色亮度降低25%,并且色相值增加10 
}

函数参考手册

特别说明一个default函数

// bigCat
.cat(@size) when (@size <= 19) and (@size >=13) {
    height: @size * 10px;
}
// smallCat
.cat(@size) when (@size <13) {
    height: @size * 5px;
}
// wssCat
.cat(@size) when (default()) {
    height: 666px;
}
.smallCat {
    .cat(10);
}
.bigCat {
    .cat(18);
}
.wssCat {
    .cat(26);
}

default相当于switch语句中default的词法
在这里它的作用就是当都不满足其他when里面的条件时，它就执行
注意default一定要配合when来使用

Wscats commented

混合
混合就是可以预先定义好一个样式，然后用它放到我们想去使用该样式的大括号内触发
这样就可以轻松实现继承
注意my-other-mixin()不带参数的Mixin

.my-mixin {
  color: black;
}
//定义一个混合方法，想使用的时候再去触发
.my-other-mixin() {
  background: white;
}
.my-font-mixin {
  font-size: 20px;
}

.cat, #wscat{
    background-color: aquamarine;
}
#header3 {
  .my-mixin;
  .my-other-mixin;//可以省略括号
  //.my-other-mixin()//当然也可以这样
  .my-font-mixin();
  #wscat;
  //.cat()//上下两种方法都可以
}

上面代码就会转化为下面的形式

#header3 {
    color: black;
    background: white;
    font-size: 20px;
    background-color: aquamarine;
}
Wscats commented

嵌套规则
css一些基于父元素寻找子节点添加样式的写法，我们可以用less来简化

<header id="header4">
            <p id="header4-wsscat">text</p>
            <p class="navigation"> Nav</p>
            <p class="logo"> Logo</p>
        </header>

#header4 {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
  &:before{
      content: "你好";
  }
  &-wsscat{
      background-color: bisque;
  }
}

在嵌套里面写就会变成
#header4 .logo
如果是用了**&**就是连接，就变成了下面那样，注意伪类中间不允许有空格的
#header4:before
#header4:wsscat

Wscats commented

作用域
@var会在作用域范围内一个一个往外找，知道找到最接近的那个变量定义作为值

<header id="header5">
            <p id="logo">logo</p>
        </header>

@var: white;
#header5 {
  @var: red;
  #logo {
    color: @var; // red
  }
}
Wscats commented

选择器
把变量作为CSS类名或者ID名

@bg: background;
.@{bg} {
    background-color: black;
}

上面这一句将转化为下面这一句，注意一定要这样写.@{bg}不能漏掉{}

.background {
    background-color: black;
}
Wscats commented

带参数的Mixin（混入）

<header class="background">
            <p id="logo">logo</p>
        </header>

注意定义好的.bg(...){...}一定要放在正常的css选择器里面去触发

.bg(@color:#555555, @size:16px) {
    background-color: @color;
    font-size: @size;
}

.background{
    .bg
}

当然我们也可以把他当函数传参数来使用，例如改成下面这个样子

.bg(@color, @size) {
    background-color: @color;
    font-size: @size;
}

.background{
    .bg(#555555,16px)
}
Wscats commented

命名空间
#wsscat和#wsa两个不同的命名空间，如果两者之间要通信可以这样

#wsscat > .home;
#wsscat > .logo

#wsscat{
    @bg:#000000;
    @width:100px;
    .home{
        background-color: @bg;
    }

    .logo{
        width:@width;
        &:hover{
            color: #7FFFD4+@bg;
        }
    }
}


#wsa{
    .home{
        #wsscat > .home;
    }
    .logo {
        #wsscat > .logo
    }
}
Wscats commented

注释

// 单行注释，编译后不会输出
/* 
    多行注释，用原生CSS的/*注释....*/形式，经过编译后会输出
 */

//Wsscat
/*
 *Wsscat
 * */

所以上面这代码，第一行转化为css的时候不输出，第二行则输出

Wscats commented

导入
less样式文件可以用@import '文件路径'来引入我们外面写好的另一份less文件
@import 'styles.less';
如果我们不带扩展名或者带非.less的扩展名编译的时候都会被认为是less文件
@import 'styles';
@import能放在less文件的任何位置，区别于css的@import，它只能放在文件首行
还有@import还提供了六个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性，语法为：
@import (配置项) '文件路径';
具体如下：

  1. @import (reference) "文件路径";
    将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
  2. @import (inline) "文件路径";
    用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式
  3. @import (less) "文件路径";
    默认使用该配置项，表示引入的文件为less文件。
  4. @import (css) "文件路径";
    表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件
  5. @import (once) "文件路径";
    默认使用该配置项，表示对同一个资源仅引入一次。
  6. @import (multiple) "文件路径";
    表示对同一资源可引入多次。
CZLHCZ commented

66 你太帅了

Wscats commented

谢谢~