scss

1.导入scss时可以不加后缀

在main.scss中导入header.scss和footer.scss的时候,如果不想让他生成header.css和footer.css可以将他们命名为"_header.scss" "_footer.scss",main中引用时可以不加下划线,如:

.main{@import  "header";@import  "footer"}

2.scss中 变量用$表示:如

$background:red;

.style{

color:$background;

}

3.注释

/**/  :这种注释方式会编译到css

//  这种注释方式不会被编译到css

$color: red!default;    静默注释 ;(当引入的外部scss文件没有变量,则使用本文件内部的变量;当外部有和本文件相同的变量则使用外部的变量)

4.混合器(mixin)(可以传递参数)

@mixin border-raduis{.......};;

  @mixin links-colors($normal){

color:$normal;

}

使用:

.style{

@include border-raduis;

@include links-colors(red)

}

5.继承extend(嵌套的子css不能继承)

.center{color:red;}

.style{

@extend .center;

}

6.占位符(继承会将原先的也会编译到css文件,占位符则不会)

%center{color:red;}

.style{

@extend  %center;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • SASS有两种后缀文件:一种后缀名为sass,不适用大括号和分号;另一种是scss文件,这种和我们平时写的css文...
    HappyAdu阅读 1,238评论 0 0
  • 1. CSS预处理器 定义了一种新的专门的编程语言,编译后成正常的CSS文件。为CSS增加一些编程的特性,无需考虑...
    恰皮阅读 106,222评论 20 105
  • "CSS预处理器"[http://www.catswhocode.com/blog/8-css-preproces...
    lovelydong阅读 523评论 0 1
  • 环境说明:本文仅针对SASS在Weex开发环境的使用 由来 总所周知,CSS不是一种编程语言,它可以开发网页的样式...
    聪明的笨白阅读 3,023评论 2 3
  • 无意选到了一部BBC的纪录片:雪宝,一个企鹅的传奇故事,又名帝企鹅日记。配音是凯特温斯莱特,标准的英音。竟然一口气...
    七月奶茶阅读 560评论 0 1