一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus

文章目录

• 一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus
• [1. 为啥会出现CSS预编译语言](#1. 为啥会出现CSS预编译语言)
• [2. 啥是CSS预编译语言](#2. 啥是CSS预编译语言)
• 3.常用的CSS预编译语言
• 4.各类预编译语言的区别
• • [4.1 变量variable](#4.1 变量variable)
  • [4.2 作用域](#4.2 作用域)
  • [4.3 代码混入mixins](#4.3 代码混入mixins)
  • [4.4 模块化](#4.4 模块化)

一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus

1. 为啥会出现CSS预编译语言

• 我们先来看一个代码

 <style>
  .div1{
    width: 200px;
    height: 200px;
    border: 1px dashed green;

    padding: 2px 5px 4px 8px;
    background-color: red;
    border-radius: 10px;
  }
  .div2{
    width: 200px;
    height: 200px;
    border: 1px dashed green;

    padding: 3px 6px 5px 9px;
    background-color: green;
    border-radius: 15px;
  }
</style>

• 发现设问题没有，两个类，最开始的三行是一样的，这还是两个类，如果是100个呢，那是不是相当于写了100x3行的重复代码
• 而且，如果突然要对这100个类改变尺寸，比如width改成300px，那是不是就得改100处代码
• 这很繁琐，很不好
• 那有没有可能我们把这个三行代码单独拿出来，然后在需要的地方引入，这样即使改，也只改一处，其他的引用会跟着变
• 上代码

<style>
    .basediv{
        width: 200px;
        height: 200px;
        border: 1px dashed green;
    }
    .div1{
        .basediv;
        padding: 2px 5px 4px 8px;
        background-color: red;
        border-radius: 10px;
    }
    .div2{
        .basediv;
        padding: 3px 6px 5px 9px;
        background-color: green;
        border-radius: 15px;
    }
</style>

• 这样一来，首先，不要下100xN的重复代码了,其次，如果要对这个100个div修改尺寸width=300px，只修改basediv的width=300就行
• 这样既好些，又好维护
• 这就是CSS预编译产生的内在需求

2. 啥是CSS预编译语言

• 我们上面举得这个basediv的例子就是预编译语言的一个功能mixin，也叫混入。
• 简单来说，CSS预编译语言就是允许像javascript那样，使用变量，嵌套规则，混合，函数等特性，编写更易于维护和理解的CSS代码。
• 当然，之所以叫预编译，是因为这些代码在执行前还要编译为原始CSS代码，所以叫预编译
• 所有的css预编译余元主要都包含以下内容
  • 变量-variable
  • 作用域-scope
  • 代码混入-mixins
  • 嵌套-nested rules
  • 代码模块化-modules

3.常用的CSS预编译语言

1. Sass & Scss

• 不说起源啥的废话，直接上干货，就是SASS后来升级了，叫Scss,他两就是版本不一样，Scss对CSS的兼容性更好

2. less

• 主要特点是使用CSS语法，容易上手

3. styLus

• 主要用来给node项目进行CSS预处理支持

4.各类预编译语言的区别

4.1 变量variable

<style>
    /*scss定义变量用"$"符号*/
    $color:red;
    .div1{
        background-color: $color;
    }
    /*less定义变量用"@"符号*/
    @width:200px;
    .div2{
        width:@width;
    }
    /*stylus变量的生命不需要特殊符号，但是变量的赋值必须要"="等号*/
    
    borderRaduis=20px;
    .div3{
        border-radius: borderRadius;
    }
</style>

4.2 作用域

• 啥叫作用域javascript选手应该都知道吧，不知道的看我这篇文章 https://blog.csdn.net/xiaobangkeji/article/details/144676245
• css的作用也是一样，从下往上找，直到找到或者找不到

<style>
    /*scss定义变量用"$"符号*/
    $color:red;
    $fontSize:16px;
    .div1{
        $width:200px;
        width: $width;
        background-color: $color;
        .font{
            color:$color;
            font-size: $fontSize;
        }
    }
    
</style>

• .font里面应用#fontSize时，现在本级找，没有，再往上，在.div1里面找，没有，在往上，在style里面找，找到了

4.3 代码混入mixins

• 代码混入就是把一部分常用代码抽离出来，定义成单独的模块，在需要的时候直接引入就行，
• 这个例子咱们在最开始已经讲过了，再写一下

<style>
    /*less中，混合的用法是将一个写好的class引入另一个class，也能使用参数@*/
    .first{
        font-size: 16px;
    }
    .mark(@color:red){
        font-weight:500;
        color:@color
    }
    .div1{
        .firsst;
        .mark(red)
    }
    /*scss声明mixins时需要使用@mixin的名，也可以使用参数，参数用$*/
    @mixin second{
        font-size: 18px;
    }
    @mixin highshow($color:green){
      font-weight: 800;
      color: $color;
    }
    .div2{
      @include second;
      @include highshow(green)
    }
    /*stylus混合可以直接像写函数那样，直接定义，然后引用*/
    third(color=yellow){
     color:color ; 
    }
    .div3{
      third(yellow)
    }
</style>

4.4 模块化

• 模块化就是把CSS代码封装成一个个模块，然后使用的时候进行导入

@import './xds'