sass使用参考文档
内容提要
- 变量
- 嵌套
- 占位符选择器 %
- @mixin
- 运算
- @if
- @for
- @each
- @extend
- @import
正文
1、变量
//定义变量:声明变量以$开
$baseColor:#ff9000;
//使用变量
.box{
font-size:12px;
color:$baseColor;
}
//若变量需要镶嵌在字符串中,变量写在#{$el}中
//如:margin-#{$el}:10px; //.box#{$el} {...}
$bgURL:'../../../img/work/';
.box {
background-image: url(#{$bgURL}crumbs.png);
}
变量支持块级作用域
,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量
可以添加 !global
声明:
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width; //5em
}
可以在变量的结尾添加!default
给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
//编译为
#main {
content: "First content";
new-content: "First time reference"; }
2、嵌套
- 选择器嵌套
使用嵌套增强了结构性和可读性,可以用&
表示父选择器
(临近的最外层)。嵌套建议不超过3层以上;
.box{
color:red;
&:hover{ //相当于.box:hover{}
color:blue;
}
}
//& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器
#main {
color: black;
&-sidebar { //相当于 #main-sidebar {}
border: 1px solid;
}
}
- 属性嵌套
有些属性拥有同一个开始的单词,如:
.box{
border:{
color:red;
width:1px;
style:solid;
}
}
//编译为
.box{
border-color:red;
border-width:1px;
border-style:solid;
}
3、占位符选择器 %
与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。
优势:不调用时不会有多余的css文件。
%fl{
float:left;
}
.box{
@extend %fl;
}
4、@mixin
//定义
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
//使用
p { @include sexy-border(blue, 1px); }
//编译为
p {
border-color: blue;
border-width: 1px;
border-style: dashed; }
//也可使用参数个默认值
@mixin sexy-border($color, $width: 1px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2px); }
5、运算
- 数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。
- 字符串运算
+
可用于连接字符串
注意,如果有引号字符串(位于 + 左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 + 左侧)连接有引号字符串,运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
//编译为
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{} 插值语句将变量包裹。
6、@if
当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:
$type: 3;
p {
@if $type == 1 {
color: blue;
} @else if $type == 2 {
color: red;
} @else if $type == 3 {
color: green;
} @else {
color: black;
}
}
//结果
p { color: green; }
@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。
7、@for
@for 指令可以在限制的范围内重复输出格式
,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>
,或者 @for $var from <start> to <end>
,区别在于 through 与 to 的含义:当使用 through
时,条件范围包含 <start> 与 <end> 的值
,而使用 to
时条件范围只包含 <start> 的值不包含 <end> 的值
。另外,$var 可以是任何变量,比如 $i; 和 必须是整数值。
@for $i from 1 through 3 { //1-3
.item-#{$i} { width: 2em * $i; }
}
@for $i from 1 to 3 { //1-2
.item-#{$i} { width: 2em * $i; }
}
8、@each
@each 指令的格式是 $var in <list>
, $var 可以是任何变量名,比如 $length 或者 $name,而 是一连串的值,也就是值列表。
//数组 list类型
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
//对象 maps类型
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }
nth
函数可以直接访问数组中的某一项;join
函数可以将多个数组连接在一起;append
函数可以在数组中添加新值;
9、@extend
功能:将一个选择器下的所有样式继承给另一个选择器。
.fl{
float:left;
}
.box{
width:200px;
@extend .fl;
}
//编译为
.box{
width:200px;
}
.fl,.box{
float:left;
}
10、@import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常,@import 寻找 Sass 文件并将其导入,但在以下情况下,@import 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
- 文件拓展名是 .css;
- 文件名以 http:// 开头;
- 文件名是 url();
- @import 包含 media queries。
Sass 允许同时导入多个文件,例如同时导入base1 与 base2 两个文件:
@import "base1", "base2";
大多数情况下,一般在文件的最外层(不在嵌套规则内)使用 @import,其实,也可以将 @import 嵌套进 CSS 样式或者 @media 中,与平时的用法效果相同,只是这样导入的样式只能出现在嵌套的层中。
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
以上是对开发中常用sass的一些总结,更详细内容可移步 sass中文文档。
sass使用参考文档的更多相关文章
- redis参考文档
本文为之前整理的关于redis的文档,放到博客上一份,也方便我以后查阅. redis简介 Redis是一个开源的.高性能的.基于键值对的缓存与存储系统, 通过提供多种键值数据类型来适应不同场景下的缓存 ...
- 微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
微信小程序 不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 友情提示: 大家 ...
- Web Api 在线参考文档
参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API
- 让IE8兼容问题,参考文档bootstrap
问题:制作的页面基本没啥问题,只有IE8不好使 参考文档:bootstrap官网 方案一 方案二
- 教您怎么从spring 官网下载参考文档
假如您使用spring,那么本经验可能帮助到您. 假如您使用spring的过程中,需要查询一些文档,那么本经验可能帮助到您. 假如您对下载spring的文档有疑惑,那么本经验可能帮助到您. 教您怎么从 ...
- nexus 参考文档
参考文档: http://books.sonatype.com/nexus-book/reference/index.html E:\e\nexus\nexus-2.12.0-01\conf\nexu ...
- Oracle官网下载参考文档
最近有人问我有没有Oracle11g数据库官方参考文档,我就想,这不是在官网可以下载到的吗,疑惑,问了之后才知道,他官网找过,但时没有找到.不要笑,其实有很多人一样是找不到的,下面就一步一步操作下: ...
- Qt5.11参考文档
Qt5.11参考文档: http://www.bim-times.com/qt/Qt-5.11.1/qtdoc/index.html (来源于Qt官网)
- RxJava 参考文档
/*************************************************************** * RxJava 参考文档 * 说明: * 最近无意中发现RxJava ...
随机推荐
- 使用jQuery为博客生成目录
这段代码展示了如何为div#content中的内容生成目录,也无非是对h系列标记进行解析.当然,也早有一些人实现了.1. [代码][HTML]代码 <html> <h ...
- Mysql: 强制走索引:mysql between 日期索引 索引问题-日期索引使用
Mysql: mysql between 日期索引 索引问题-日期索引使用 表结构: dep_date dep arr 联合索引: ind_coll_date_route (dep_date ,de ...
- php版微信公众平台开发之验证步骤实例详解
本文实例讲述了php版微信公众平台开发之验证步骤.分享给大家供大家参考,具体如下: 微信公众平台开发我们现在做得比较多了,这里给各位介绍的是一个入门级别的微信公众平台验证基础知识了,有兴趣的和小编来看 ...
- Python入门经典练习题
[程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? num_list=[]cou=0for i in range(1,5): for j in range( ...
- 重拾安卓_01_安卓开发环境搭建(android studio)
一.下载安装SDK 参考:搭建Android开发环境——Eclipse 的安装SDK部分 二.安装android studio 参考: Android Studio 入门级教程(一) 三.andro ...
- Git_学习_06_ 放弃本地修改
一.未使用 git add 缓存代码时 git checkout -- filepathname // 放弃某个文件 git checkout . // 放弃所有文件 git checkout . 用 ...
- Java微信开发_Exception_03_非微信官方网页-invalid signature
由于natapp免费隧道的域名是系统随机分配的,老是在变.故昨天又换了内网映射工具,分别换了ngrok和花生壳,然而在做JSSDK网页开发时,按了微信的view菜单按钮进行页面跳转时,微信官方提示“非 ...
- bzoj 2631: tree link-cut-tree
题目: Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u ...
- 寻找总和为n的连续子数列之算法分析
看到有这么道算法题在博客园讨论,算法eaglet和邀月都已经设计出来了,花了点时间读了下,学到点东西顺便记录下来吧. 题目是从1...n的数列中,找出总和为n的连续子数列. 这里先设好算法中需要用到的 ...
- Git 系列之tag的用法---为你的代码标记版本号
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 本地仓库操作 远程仓库操作 其他 tag 操作 在做app开发的时候经常有版本的概念,比如v1.0.v1.1之类的,不同 ...