• 学习-【前端】-sass学习笔记


    后缀:

    sass有两种后缀文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。

     

    下面举出 后缀为sass文件写法:

    body

         background:#eee

         font-size:12px

    导入

    sass的导入(@import)规则和css的有所不同,编译时会将@import的scss文件合并进来只生成一个css

    @import "reset.scss"

    @import "a"

    p{

         background:#eee;

    }

    编译出来的文件

    @import "reset.css"

    body{

         background:#eee;

    }

    注释:

    sass两种注释,一种是标准css注释/** **/另一种则是//双斜杠单行注释

     

    /**

    *我是css标准注释

    **/

    body{

         padding:5px;

    }

    //我是双斜杠单行注释

    body{

         padding:5px;

    }

    变量:

    sass变量必须是$开头,后面紧跟变量名,而变量值和变量名之间需要:隔离。

    $fontSize:12px;

    body{

         font-size:$fontSize;

    }

    默认变量

    sass的默认变量仅需要在值后面加上!default

    $baseLineHeigh: 1.5!default;

     

     

    sass的默认变量一般是用来设置默认值,然后根据需求覆盖的,覆盖的方式就是在默认变量前写个相同的变量

    //

    //

    $baseHeight: 2;

    $baseHeight:1.5 !default;

    body{

         line-height:$baseHeight;

    }

    //

    body{

         line-height:2;

    }

     

     

    特殊变量

    一般我们定义的变量都为属性值,可以直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。

    $borderDirection: top !default;

    //应用于class和属性

    .border-#{$borderDirection) {

         border-#{$borderDirection):1px solid #ccc;

    }

    }

  • 相关阅读:
    QT删除QWidget或QLayout下的控件
    OSG HUD实现类似ArcGIS制图中图例效果(色块+标注)
    QT简易画板练习
    展望
    打字比赛日前
    学习的第一天
    SpringBoot之CommandLineRunner启动执行任务
    java根据ip获取城市
    springboot项目中, 同一浏览器JSESSIONID互相覆盖问题
    eclipse的spring项目中,alt+/无提示或按多次才正确提示
  • 原文地址:https://www.cnblogs.com/wq123/p/4396480.html
Copyright © 2020-2023  润新知