一般有两种后缀  .sass和.scss,推荐使用后者。

写下自己对sass的理解

1.变量

$border-color:#c66;

$border:1px solid $border-color;

变量中包括全局变量和局部变量。全局变量即使全局都可以引用的。局部变量定义在选择器内或mixin里的变量。只在固定作用于内有效。

局部变量加上!gloable可以转化为全局变量(自己的 理解);eg

 @mixin button-style {
$btn-bg-color: lightblue !global;
color: $btn-bg-color;
} button {
@include button-style;
} .wrap {
background: $btn-bg-color;
} css
.wrap{background:lightblue;}

!default变量的默认值;默认变量之前重新声明下变量,即可覆盖默认值。eg:

 $color:#333;
$color:#666!default;
.box{
color:$color;
} css
.box{color:#333;}

2.继承嵌套

分为选择器嵌套和属性嵌套

①选择器嵌套,eg:

 .box{
ul{
li{
float:left;
}
}
}

②属性嵌套,eg:

 p{
border:{
color:red;
}
}

border后要加冒号;

选择器继承:class2可以继承class1的样式;eg:

.class1{color:red;}
.class2{
@extend .class1;
}

3.定义函数

sass中有写好的函数可以拿来用。Mix(),RGBA(),Lighten(),darken()等;

4.Mixin

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。(参考http://www.w3cplus.com/sassguide/syntax.html)

5.占位

这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。

6.@extend调用占位符

@include继承@mixin的函数

7.语句  if else for @each学习中。。。

8,计算。学习中...

9.@at-root跳出嵌套,&引用父元素,这两个可以配合使用;eg: ???

.child{
@at-root .parent &{
color:#c66;
}
} .parent .child{color:#c66;}

10.判断变量是否存在

Sass提供了两个函数,用来测试一个变量是否存在。我们可以使用variable-existsglobal-variable-exists函数来检查我们的局部变量或全局变量是否分别存在。

@if(global-variable-exists(divBorder)) {
.save-cancel-btns{
border: $divBorder;
}
}

sass小总结的更多相关文章

  1. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...

  2. compass Sprites 雪碧图 小图片合成[Sass和compass学习笔记]

    demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...

  3. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  4. Sass使用小技巧

    1.任何可以用作css属性值的赋值都可以用作sass变量值.如果变量值与属性不匹配,sass会当作普通字符串来处理. $family: "microsoft yahei", Ari ...

  5. 初遇sass的两个小问题

    关于sass大家都知道是一种css的开发工具,原本的css没有变量 参数一类的东西,所以比较死 效率较慢. sass就是在css里面加入了一些编程的元素如变量等,让css能够更灵活,提高效率. 刚接触 ...

  6. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  7. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  8. 微信小程序首次官方分享的纪要

    先交代备注: 这次有关小程序的分享只有技术的 QA环节,其他如产品.入口.流量.与公众号的整合等等,回答都是暂时无法给出答案或不确定: 小程序最终发布时间官方也还未确定,不过说应该就是近期: 小程序的 ...

  9. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

随机推荐

  1. BZOJ 1855 股票交易(单调队列优化DP)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1855 题意:最近lxhgww又迷上了投资股票, 通过一段时间的观察和学习,他总结出了股票 ...

  2. js将数组元素随机排序的方法

    在群里看见的一个面试题,试了一下,还是可以做出来的,但是需要查资料,主要是岁一些方法了解的不清楚,可能这个跟我平时不太注重基础理论有关系,像什么构造函数啊,我根本就不关心什么叫构造函数,我一直都以为我 ...

  3. Mac功夫——OS X应用技巧

    看过不少文章说Mac是了不起的先进操作系统,爱折腾的我,经不住诱惑,也玩起了Mac,用惯了Windows,突然换到Mac下还真是十分不习惯,就连复制粘贴这种简单操作也觉得很是别扭. 用过一段时间才感觉 ...

  4. webAPI获得链接客户端IP地址

    public static class HttpRequestMessageExtensions { private const string HttpContext = "MS_HttpC ...

  5. Common Macros for Build Commands and Properties

    https://msdn.microsoft.com/en-us/library/c02as0cs.aspx $(ProjectDir)      The directory of the proje ...

  6. hihoCoder太阁最新面经算法竞赛17

    比赛链接:http://hihocoder.com/contest/hihointerview26 A.排序后枚举两个点,确定一个矩形后二分剩下两个点. #include <bits/stdc+ ...

  7. [HDOJ1231]最大连续子序列

    混了好几个地方的博客,还是觉得博客园比较靠谱,于是决定在这里安家落户了.本人本科生一个,希望各位巨巨多多指教~ Hello World! 单独一个象征性的问候实在是太low了,还是决定来点实质性的.. ...

  8. Hibernate 配置 转(http://blog.csdn.net/b671900/article/details/39156065)

    做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后还要再“自己”建立一变VO.意思是,在项目设计时,要么 ...

  9. FZU 2213 Common Tangents(公切线)

    Description 题目描述 Two different circles can have at most four common tangents. The picture below is a ...

  10. ubuntu14.04配置静态IP地址

    1. 找到文件并作如下修改:vim /etc/network/interfaces修改如下部分:# interfaces(5) file used by ifup(8) and ifdown(8)au ...