内容提要
变量
嵌套
占位符选择器 %
@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); }
为便于书写,@mixin 可以用 = 表示, 而 @include 可以用 + 表示
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 中文文档 https://www.sass.hk/docs/ .
来源: http://www.bubuko.com/infodetail-2562481.html