最近更新
阅读排行
关注本站

浅析sass(一)

阅读:4012 次   编辑日期:2015-08-16

目录:

概述:

由于最近工作交接,之前的代码有一些是sass写的,所以这几天看了看sass,最近几次简单的分享一下,希望对大家有帮助。

sass文件后缀名:

sass有两种后缀名文件,一种是后缀名为sass的,在这类型的文件中,不适使用大括号和分号,如下。
   //文件后缀名为sass的语法
    body
      background: #eee
      font-size:12px
    p
      background: #0982c1
另一种是后缀名为scss的,在这类型的文件中,使用大括号和分号,跟我们平时写的CSS基本一样,如下。
    //文件后缀名为scss的语法
    body {
      background: #eee;
      font-size:12px;
    }
    p{
      background: #0982c1;
    }

导入:

sass使用@import来导入,编译的时候会最后生成一个css文件,但是你导入的是css文件的话,那么这个css文件的内容不会生成在最后编译出来的css文件中。
在导入sass文件的时候可以不写.scss的后缀名,一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"。
   //a.scss
    //-------------------------------
    body {
      background: #eee;
    }
    @import "reset.css";
    @import "a";
    p{
      background: #0982c1;
    }
    @import "reset.css";
    body {
      background: #eee;
    }
    p{
      background: #0982c1;
    }
从结果看出,要是导入css文件,最后生成的文件还是有@import "reset.css";,导入的sass文件就会生成css。

注释:

分多行注释/**/,跟单行注释//,注释不会出现在最后生成的文件内。
将本篇文章分享到:
top