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;

    }

    }

  • 相关阅读:
    window.history.go()返回上页的同时刷新"上页"代码
    技术总监谈好的程序员如何写代码
    ASP长文章内容自动分页函数
    ie8下overflow:hidden 无效果
    EXCEL转数据到SQL(已有表结构)
    十六进制转十进制 这么简单 之前都不会
    获得表信息 字段名等
    aspjpeg 打水印
    《几何与代数导引》例2.9
    《几何与代数导引》例2.8
  • 原文地址:https://www.cnblogs.com/wq123/p/4396480.html
Copyright © 2011-2022 走看看