zoukankan      html  css  js  c++  java
  • 学习-【前端】-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;

    }

    }

  • 相关阅读:
    Android设计模式(三)--装饰模式
    kmp算法总结
    SDWebImage源代码解析(二)
    关于C++构造函数一二
    逆向随笔
    iOS中的crash防护(二)KVC造成的crash
    git-osc自己定义控件之:CircleImageView
    java中继承关系学习小结
    openwrt针对RT5350代码下载,配置和编译
    MySQL监控
  • 原文地址:https://www.cnblogs.com/wq123/p/4396480.html
Copyright © 2011-2022 走看看