Scss&Less初探，学会基本的使用方式

---

简介

Scss和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数、继承等概念。将css作为目标生成文件，然后开发者就只要使用这种语言进行CSS编码工作。

Less&Scss

注释

两者注释都是单行注释编译后不显示，多行注释显示。

变量定义

less采用@

@number : 123px;

.box {
    width: @number;
    height: @number;
}

scss采用$

$number : 123px;

.box2 {
    width: $number;
    height: $number;
}

插值

less:

@number : 123px;
@i : 2;
@wd : width;

.box@{i} {
    @{wd} : @number;
    height: @number;
}

scss:

$number : 123px;
$i : 2;
$wd : width;

.box#{$i} {
    #{$wd}: $number;
    height: $number;
}

作用域

less:

@number : 123px;

.box2 {
    height: @number;
    @number : 200px;
}

.box2内有number变量就用自己的，可以写在任意顺序。

scss:

$number : 123px;

.box2 {
    $number : 200px;
    height: $number;
}

scss在内部定义一个变量时，在定义该变量之前不能使用该变量。

选择器嵌套、伪类嵌套、属性嵌套(Scss)

• 选择器嵌套

  scss和less都可以实现选择器嵌套，并且用法相同

  .box2 {
      width: 100px;
      .box3 {
          height: 100px;
          li {
              list-style: none;
          }
      }
  }
  

• 伪类嵌套

  拿:hover举例

  .box2 {
      width: 100px;
      &:hover {
          width: 200px;
      }
  }
  

  在:hover前加一个&用来连接

• 属性嵌套

  属性嵌套只有scss拥有,less没有

  .box {
      margin: {
          top: 10px;
          bottom: 20px;
          left: 10px;
          right: 20px;
      };
  }
  

运算

less中的运算

@sum : 10px;
.box {
    width: @sum + 10px;
    height: 10em + @sum;
    border: @sum - 2px;
    margin-top: 10px * 2;
    padding: 20px / 10px;
    margin: ~"20px / 10px";
}

在less中加法运算的时候如果两个单位不同则取第一个数的单位

scss中的运算

$sum : 10px;
.box {
    width: $sum + 10px;
    border: $sum - 2px;
    margin-top: 10px * 2;
    padding: 20px / 10px;
    margin: (20px / 10px);
}

scss中两个数进行运算必须单位相同

函数

scss和less拥有内置函数，同时scss可自定义函数

两者的内置函数具体查官方文档：

less:http://lesscss.cn/functions/

scss:https://sass-lang.com/documentation/modules

scss自定义函数

@function sum($a,$b) {
    @return $a + $b;
}

.box {
    width: sum(100px,200px);
}

混入

less：

.hide {
    display: none;
}
.box4{
    width: 100px;
    .hide;
}

也可以传参

.hide(@color) {
    display: none;
    color: @color;
}
.box4{
    width: 100px;
    .hide(blue);
}

scss:

@mixin show {
    display: block;
}

.box {
    width: 100px;
    @include show;
}

也可以进行传参

@mixin show {
    display: block;
}
@mixin color($color) {
    color: $color;
}
.box {
    width: 100px;
    @include show;
    @include color(red);
}

命名空间

less:

#mm() {
    .hide{
        display: none;
    }
    .color{
        color: red;
    }
}

.box {
    #mm.hide;
    #mm.color;
}

结果：

.box {
  display: none;
  color: red;
}

继承

less:

.show {
    display: block;
    color: red;
}

.box {
    &:extend(.show);
}
.box2 {
    &:extend(.show);
}

结果：

.show,
.box,
.box2 {
  display: block;
  color: red;
}

scss:

%show {
    display: block;
    color: red;
}

.box6 {
    @extend %show;
}
.box7 {
    @extend %show;
}

结果：

.box7, .box6 {
  display: block;
  color: red;
}

合并

less:

+是用,相互隔开，+_是用空格隔开

.box9 {
    background+: url(a.png);
    background+: url(b.png);
    transform+_: scale(2);
    transform+_: rotate(30deg);
}

scss:

$background : (
    a : url(a.png),
    b : url(b.png)
);

$transform : (
    a : scale(2),
    b : rotate(30deg)
);
.box9 {
    background: map-values($background);
    transform: zip(map-values($transform)...);
}

结果：

.box9 {
  background: url(a.png), url(b.png);
  transform: scale(2) rotate(30deg);
}

媒体查询

less和scss媒体查询基本相同:

.box10 {
    width: 100px;
    @media screen and (min-width:200px) {
        width: 50px;
    }
}

结果：

.box10 {
  width: 100px;
}
@media screen and (min-width: 200px) {
  .box10 {
    width: 50px;
  }
}

条件语句

less:

@count : 3;
.get(@cn) when (@cn > 4) {
    width: 100px + @cn;
}
.get(@cn) when (@cn < 4) {
    width: 10px + @cn;
}
.box11{
    .get(@count);
}

when就相当于if，对括号里面的内容进行判断

结果：

.box11 {
  width: 13px;
}

scss:

scss的条件语句相比less简单一些，直接在if,else前加一个@,也可以写else if

$count : 5;
.box11 {
    @if ($count > 4) {
        width: 100px + $count;
    }
    @else{
        width: 10px + $count;
    }
}

结果：

.box11 {
  width: 105px;
}

循环语句

less的循环采用的是递归的思想，通过调用自己来完成循环

@number1 : 0;
.get2(@cn) when (@cn < 3) {
    .box-@{cn}{
        width: 100px + @cn;
    }
    .get2(@cn + 1);
}
.get2(@number1);

生成的css:

.box-0 {
  width: 100px;
}
.box-1 {
  width: 101px;
}
.box-2 {
  width: 102px;
}

总共有三个样式，相当于@cn从0开始，到2结束调用

scss的循环支持for循环，while循环等，用法也很简单

@for $i from 0 through 2 {
    .box#{$i}{
        width: 100px + $i;
    }
}

结果：

.box0 {
  width: 100px;
}

.box1 {
  width: 101px;
}

.box2 {
  width: 102px;
}

引入

less和scss都可以通过@import “”;来实现文件的引入，从而实现模块化。

新建一个reset.less文件，其内容如下

* {
    margin: 0;
    padding: 0;
}

在style.less文件中引入

@import "reset.less";

最后在style.css文件中

* {
  margin: 0;
  padding: 0;
}