1、变量声明

$nav-color: #F90;
nav {
//$width 变量的作用域仅限于{}内
$width: 100px;
width: $width;
color: $nav-color;
} .a {
//报错,$width未定义
width: $width;
}

2、父选择器&

scss代码:

article a {
color: blue;
&:hover { color: red }
}

编译后为:

article a {
color: blue;
} article a:hover {
color: red;
}

父选择器的另外一个用途,可以在父选择器之前添加选择器,如处理IE的hack,在html或者body上添加ie class。

示例代码:

#content aside {
color: red;
body.ie & { color: green }
}

编译后为:

#content aside {
color: red;
} body.ie #content aside {
color: green;
}

3、群组选择器

.container {
h1, h2, h3 {margin-bottom: .8em}
}

编译后:

.container h1,
.container h2,
.container h3 {
margin-bottom: .8em;
}

也可以这样:

nav, aside {
a {color: blue}
}

编译后:

nav a,
aside a {
color: blue;
}

4、>、+和~选择器

article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}

编译后为:

article ~ article {
border-top: 1px dashed #ccc;
} article > section {
background: #eee;
} article dl > dt {
color: #333;
} article dl > dd {
color: #555;
} nav + article {
margin-top:;
}

5、SCSS局文件

sass局部文件的文件名以下划线开头。

目的:

sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。

说明:

(1)使用sass@import规则并不需要指明被导入文件的全名。你可以省略.sass.scss文件后缀

(2)当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线

(3)不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略

6、混合器

混合器定义:

@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

使用混合器:

notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}

编译后为:

notice {
background-color: green;
border: 2px solid #00aa00;
border-radius: 5px;
}

2个关键字:@mixin和@include

混合器传参:

@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}

使用:

a {
@include link-colors(blue, red, green);
}

编译后为:

a {
color: blue;
} a:hover {
color: red;
} a:visited {
color: green;
}

混合器主要用于展示性样式的重用

7、选择器继承

.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

编译后为:

.error,
.seriousError {
border: 1px red;
background-color: #fdd;
} .seriousError {
border-width: 3px;
}

继承是建立在语义化的关联

Sass 允许延伸任何定义给单个元素的选择器:

.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}

编译后为:

.error,
.seriousError {
border: 1px #f00;
background-color: #fdd;
} .error.intrusion,
.intrusion.seriousError {
background-image: url("/image/hacked.png");
} .seriousError {
border-width: 3px;
}

8、@media 媒体查询

.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

编译后:

.sidebar {
width: 300px;
} @media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}

注意:@media 将被编译到文件的最外层。

SCSS 实用知识汇总的更多相关文章

  1. web前端project师知识汇总

    分类: Web开发应用  一.何为Web前端project师?           前端project师,也叫Web前端开发project师.他是随着web发展.细分出来的行业.Web前端开发proj ...

  2. Oracle手边常用70则脚本知识汇总

    Oracle手边常用70则脚本知识汇总 作者:白宁超 时间:2016年3月4日13:58:36 摘要: 日常使用oracle数据库过程中,常用脚本命令莫不是用户和密码.表空间.多表联合.执行语句等常规 ...

  3. Oracle 数据库知识汇总篇

    Oracle 数据库知识汇总篇(更新中..) 1.安装部署篇 2.管理维护篇 3.数据迁移篇 4.故障处理篇 5.性能调优篇 6.SQL PL/SQL篇 7.考试认证篇 8.原理体系篇 9.架构设计篇 ...

  4. Vertica 数据库知识汇总篇

    Vertica 数据库知识汇总篇(更新中..) 1.Vertica 集群软件部署,各节点硬件性能测试 2.Vertica 创建数据库,创建业务用户测试 3.Vertica 数据库参数调整,资源池分配 ...

  5. 【转】ACM博弈知识汇总

    博弈知识汇总 转自:http://www.cnblogs.com/kuangbin/archive/2011/08/28/2156426.html 有一种很有意思的游戏,就是有物体若干堆,可以是火柴棍 ...

  6. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  7. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  8. ACM博弈知识汇总(转)

    博弈知识汇总 有一种很有意思的游戏,就是有物体若干堆,可以是火柴棍或是围棋子等等均可.两个人轮流从堆中取物体若干,规定最后取光物体者取胜.这是我国民间很古老的一个游戏,别看这游戏极其简单,却蕴含着深刻 ...

  9. [转]【eoeAndroid索引】史上最牛最全android开发知识汇总

    一.开发环境搭建 (已完成) 负责人:kris 状态:已完成 所整理标签为:搭建 SDK JDK NDK Eclipse ADT 模拟器 AVD 调试器(DEBUG) DDMS 测试 日志 Logca ...

随机推荐

  1. Linux下生成随机密码(转)

    1.使用SHA算法来加密日期,并输出结果的前32个字符: date +%s |sha256sum |base64 |head -c 32 ;echo 生成结果如下: ZTNiMGM0NDI5OGZjM ...

  2. IntelliJ IDEA 学习(五)类注释和自定义方法注释

    intellj idea的强大之处就不多说了,相信每个用过它的人都会体会到,但是我们经常会感觉他很复杂,尤其刚从eclipse转过来的童鞋,相信刚开始的那段经历都是不堪回首的         如何实现 ...

  3. 服务器返回的“未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0提供程序””错误解决

    未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0提供程序”

  4. Python 必备神器

    1. pip 用来包管理 文档:https://pip.pypa.io/en/latest/installing.html # 安装,可指定版本号(sudo) pip install Django== ...

  5. windows tomcat nginx session(当一台tomcat关闭后)

    在windows下作nginx负载均衡测试. nginx的配置文件如下: worker_processes  1; events { worker_connections  1024; } http ...

  6. sql查询前后两位

    SQL排名的问题,A这个人在数据库里排第十,怎么查询一个他前面两位,后面两位,包括自己的五条数据,各位有啥高招? DECLARE @table TABLE ( id INT PRIMARY KEY , ...

  7. Android之多媒体扫描过程

    转自:http://blog.csdn.net/yan8024/article/details/6620359下面是系统图      MediaScannerReceiver会在任何的ACTION_B ...

  8. sqlalchemy批量删除数据、全量删除

    问题:sqlalchemy如何批量删除多条数据解决:使用参数synchronize_session=False,或for循环方法:        users = self.db.query(User) ...

  9. std::vector 两种操作的比较

    swap assign 这里只想说明这三种操作的用处和效率.swap和assign都可以用在将一个vector的内容全部复制给另外一个vector,区别是swap会改变源vector,而assign会 ...

  10. unity forward renderer的 base pass rt设置

    一般他都是用 RenderTexture::SetActive()来设置rt 但是 forward path 的opaque我跟了好久找不到这个setactive 在dorender之前有setupR ...