scss的快速使用指南-基本同less

Less 的语法和 Sass 有不少相同之处,包括”嵌套”,”Mixin”,”变量”等

  1. 安装

    # npm全局安装sass, 这样在其他项目里,也能直接调用,不需要重新安装
    npm install -g sass
    
    # 查看版本,确定安装成功
    sass --version
    
    # 基本使用
    # 保存main.scss,将其编译为普通样式
    
    sass ./src/css/main.scss ./src/css/main.css
  2. 变量

    /* 语法是"$+变量名" */
    /* 定义了themeColor变量 */
    $themeColor: #ff5100;
    
    /* 使用 */
    .tutor {
        background-color: $themeColor;
    }
    
    /* 对比less:*/
    @themeColor: #ff5100;
    /* 使用 */
    .tutor {
        background-color: @themeColor;
    }
  3. 嵌套

    同html的标签嵌套那样:

    .app-container {
      width: 37.5rem;
        /* & 表示当前父级,类似于JS的this:.app-container */
      & > header {
        height: 5rem;
        opacity: 0.8;
        }
        .logo {
          width: 5rem;
          height: 1.38rem;
        }
    }
    
    /*对比less:相同 */
  4. 混入(mixin

    即相当于是JS的函数。

    将公共的样式抽离出来变成一个mixin,然后使用@usemixin

    第一步,定义mixin:

    /* 定义mixin ; 比如要将绝对定位的代码抽离出来 */
    /* 其中参数是变量,可以设置默认值 */
    @mixin absolutePosition($top:1rem, $right) {
      position: absolute;
      top: $top;
      right: $right;
    }
    
    /* 对比less:*/
    rounded-corners (@radius: 5px) {
        border-radius: @radius;
    }
    

    第二步:在的样式中,通过@include来使用mixin:

    span {
      display: inline-block;
      z-index: 2;
      /* 使用absolutePosition,传入实际参数 */
      @include absolutePosition(-3.2rem, 0);
    }
    
    /* 对比less: */
    #header {
        rounded-corners(10px);
    }
  5. 继承(@extend

    可以通过@extend直接继承。

    第一步:比如有如下样式需要被继承,而不是单独复制一遍到需要的地方:

    .tutor {
        background-color: red;
    }

    第二步:使用,哪里要用,就在哪里通过@extend继承

    .order {
        /*继承 */
        @extend .tutor;
         /*下面是.order中自己的样式*/
         color: #111111;
    }
  6. 模块

    相当于是css的import语法,即在A.scss中导入B.scss.因为容易与css的@import混淆,所以才用use语法。

    main.scss中引入base.scss,语法为@use

    第一步:在main.scss中通过命名空间导入或整体导入

    // 把变量和@mixin, header样式等抽离; 模块化引入
    @use "base"; // 创建一个 base 命名空间
    
    @use "../../node_modules/reset-css/sass/reset"; // 整体引入reset,初始化样式

    第二步:使用命名空间.属性名来使用

    .banner-container {
        background-color: #242345;
        border-top: 2px solid base.$themeColor; //使用base中的变量:$themeColor
    }
    
    h1 {
          @include base.fontSet(2.4rem, 600); //使用base中的mixin
    }
  7. 注释

    标准的 CSS 注释 / comment / ,会保留到编译后的文件
    单行注释 // comment,只保留在 scss 文件中,编译到 css 文件后,会被省略
    重要注释:在/后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注

    */**!
        这是重要注释!即使压缩了样式,也会保留
    */
  8. 计算

    在 css 样式文件里,我们可以直接进行某些样式值的计算

    @use "sass:math"; // 引入sass内置的math模块
    
    width: math.div(600, 960) * 100%;

    还原设计稿的时候,有些计算起来比较麻烦的值,就不用自己先计算出来了

  9. 其他 Sass 特性
    Sass 还有很多其他的功能,包括丰富的内置函数(颜色函数等)、允许用户自定义函数等,感兴趣的自己拓展.

相关资源:Sass官网

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 1,999
(3)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top