CSS 预处理器—sass

一、sass环境的安装:https://blog.csdn.net/Ed7zgeE9X/article/details/123058868

重点:sass是分了3个版本的,都是用来将sass编译成css的工具。一个是node-sass,另一个是dart-sass。

  • Ruby Sass:是最初的Sass实现,但是2019年3月26日被停止了,以后也不会再支持,使用者需要迁移到别的实现上。
  • node-sass:以前是用这个的,但是这个在安装时有各种问题。偏偏以前有很多项目是用node-sass来处理scss的。【官方已经弃用
    • 需要 安装一个二进制程序(放在github上),没有的话就需要用python进行编译。在linux系统编译时也是出现各种问题。
    • node-sass 与 node.js 版本相关联,这就导致,一旦本地 node.js 升级,就会出现 node-sass 无法工作的情况。(很容易因为版本出现问题)
  •  dart-sass:【官方使用的】
    • dart-sass 是用 drat VM 来编译 sass。不依赖二进制文件就可以安装(drat VM 本身就是 纯 JS实现的),直接npm包下载下来就可以了。
    • 官方已经放弃 node-sass,使用dart-sass直接更名为sass了,在npm下载的包名就是sass。

node-sass 转换成 dart-sass:https://juejin.cn/post/7327094228350500914 
  说明:切换很简单不需要配置,只要把node-sass卸载,安装上sass就可以了。其它的就是一点语法的调整(sass官方也提供了调整的工具sass-migrator)。

  • 卸载node-sass安装dart-sass:
    # 卸载node-sass
    npm uninstall node-sass
    # 安装dart-sass
    npm install sass 
  • 深度选择器 /deep/ 的修改:
    • sass 只支持 ::v-deep         【sass就是dart-sass】

二、sass和less的比较 https://juejin.cn/post/6844904169313140749 

  在线 sass 编译 网站:

  1. 计算功能(操作符):使用计算功能的好处就是,直接把计算过程写在这里了。后面要调整只要调整 算式的关键部分,而且不用我们直接计算出结果。
    说明
    • 原生css也有 计算功能cacl(),但过多地使用calc()函数可能会导致CSS文件的体积增加,从而增加页面的加载时间。预处理的计算编译成css就是确定的值。
      所以原生cacl()函数,只用在相对单位的计算上,如百分比。预处理器的 计算 可以随意使用,不会对css有任何影响。
    • 有些计算结果可能是无限小数的,sass也提供了内置的函数处理的。再不济也可以自定义函数实现的。
  2. 变量:

    • 属性值变量:
      /*  sass */
      $nav-color: #F90;  /*  外部定义  */
      nav {
        $width: 100px;  /*  内部定义  */
        width: $width;
        color: $nav-color;
      }
      /*  less  */
      @width: 10px;
      @height: @width + 10px;
      
      #header {
        width: @width;
        height: @height;
      }
    • 插值变量:实现  选择器变量属性名变量url变量(可以变量插值) 等

      sass中用 #{}插值;less中用 @{} 插值。

      $name: foo;
      p.#{$name} {
        border-color: blue;
      }
  3. 嵌套:
    • 嵌套选择器:sass 和 less 基本一样
    • 嵌套属性:less 没有这个
      nav {
        border: {
          style: solid;
          width: 1px;
          color: #ccc;
        }
      }
    • 父选择器&:
      .container {
          a {
              color: #333;
              &:hover {
                   text-decoration: underline;
                   color: #f00;
              }
          }
      }

      换个思路,也可以使用&进行选择器名称拼接。

      .main {
          color: black;
          &-sidebar { border: 1px solid; }
      }
  4. 混合:复用一组样式
    • 无参数:
      /*  sass  */
      @mixin rounded-corners {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
      notice {
        background-color: green;
        border: 2px solid #00aa00;
        @include rounded-corners;
      }
      /*  less  【less混入非函数写法,混入对象也会存在编译后的代码中】*/
      .bordered {
        border-top: dotted 1px black;
        border-bottom: solid 2px black;
      }
      
      a {
        color: #111;
        .bordered();
      }
    • 有参数:
  5. 继承:一个选择器下的所有样式继承给另一个选择器。
    sass 有单独的 继承关键字,less的继承和混入很像(无函数写法)。
    • 单个选择器样式的继承
      /*  sass  */
      .error {
        border: 1px #f00;
        background-color: #fdd;
      }
      .seriousError {
        @extend .error;
        border-width: 3px;
      }
      /*  less   */
      .borde_style {
           border-top: solid 1px #595959;
           border-bottom: solid 2px #595959;
      }
      #header span {
           height: 16px;
           .borde_style;
      }

      总结:继承和混入功能上差不多。一组样式本身有用那就是继承它;本身没有(不编译)就是混入。(在less中就没有把继承单独列出来合在混入介绍的)

    • 复杂选择器样式的继承:
    • 占位符选择器(%foo):不仅继承了css属性,可以说,连选择器都继承了。
      占位符选择器%所属的样式未使用时,不会被编译到css文件中,算是一个小优化吧。
      .button %base {
          display: inline-block;
          margin-bottom: 0;
          font-weight: normal;
          text-align: center;
          white-space: nowrap;
          vertical-align: middle;
          cursor: pointer;
          background-image: none;
          border: 1px solid transparent;
          padding: 6px 12px;
          font-size: 14px;
          line-height: 1.42857143;
          border-radius: 4px;
          user-select: none;
      }
              
      .btn-default {
          @extend %base;
          color: #333;
          background-color: #fff;
          border-color: #ccc;
      }
  6. 模块化:基本和less一样

    sass的导入和原生的语法一样,它不会和原生css冲突。因为,文件后缀名是.css的话,就会把它当css语句。如果sass文件就会以sass导入的语句执行。

    /*  sass  */
    @import "foo.scss";  
  7. 函数:一般直接使用内置函数就够了
    • 颜色函数:
    • 数字函数:
  8. sass 额外提供其它一些功能
    •  

 

posted @ 2024-07-10 16:30  吴飞ff  阅读(22)  评论(0编辑  收藏  举报