一、基本语法
- 选择器嵌套
#app{ color:while; .content{ color:red; } } - 父级选择器 &
#app{ color:while; &.chird{ background:#f0f0f0; } } - 属性嵌套
#app{ color:while; &.chird{ font:{ family:test; size:30px; weight:bold; } } }
二、注释
/*
多行注释
*/
//单行注释
三、变量声明
$var : 16px;
.fontSize {
font-size: $var;
}
三、数据类型
- 数字：1、 2、 13、 10px
abs()：返回一个数值的绝对值 ceil()：向上取整 floor()：向下取整 comparable()：返回一个布尔值，判断两个参数是否可以比较 max()：返回最大值 min()：返回最小值 percentage()：将数字转化为百分比的表达形式 random()：返回 0-1 区间内的小数 round()：返回最接近该数的一个整数，四舍五入 - 字符串，有引号字符串与无引号字符串：“foo”、‘bar’、 baz
quote(string)：给字符串添加引号 unquote(string)：移除字符串的引号 str-index(string, substring)：返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。 str-insert(string, insert, index)：在字符串 string 中 index 位置插入 insert str-length(string)：返回字符串的长度。 str-slice(string, start, end)：从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾 to-lower-case(string)：将字符串转成小写 to-upper-case(string)：将字符串转成大写 unique-id()：返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。 - 颜色：blue、 #04a3f9、 rgba(255,0,0,0.5)
rgb($red, $green, $blue)：创建一个rgb色 rgba($red, $green, $blue, $alpha)：创建一个rgba色 hsl(hue, saturation, lightness): 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。 hsla(hue, saturation, lightness, alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。 grayscale(color)：将一个颜色变成灰色，desaturate( color,100%) complement(color)：返回一个补充色，adjust-hue($color,180deg) invert(color, weight)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变 red($color)：从一个颜色中获取其中红色值（0-255） green($color)：从一个颜色中获取其中绿色值（0-255） blue($color)：从一个颜色中获取其中蓝色值（0-255） hue(color)：返回颜色在 HSL 色值中的角度值 (0deg - 255deg) saturation(color)：获取一个颜色的饱和度值(0% - 100%) lightness(color)：获取一个颜色的亮度值(0% - 100%) alpha(color)：获取一个颜色是否是透明 opacity(color)：获取颜色透明度值(0-1) mix($color1, $color2, [$weight])：把两种颜色混合起来。 weight 参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。 adjust-hue(color, degrees)：通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。 adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)：这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。 change-color(color, red, green, blue, hue, saturation, lightness, alpha)：跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。 scale-color(color, red, green, blue, saturation, lightness, alpha)：另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。 rgba(color, alpha)：根据红、绿、蓝和透明度值创建一个颜色。 lighten(color, amount)：通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。 darken(color, amount)：通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。 saturate(color, amount)：提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount) desaturate(color, amount)：调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount) opacify(color, amount)：降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount) fade-in(color, amount)：降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount) transparentize(color, amount)：提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount) fade-out(color, amount)：提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount) - 布尔型：true、false
- 空值：null
- 数组 (list)，用空格或逗号作分隔符：1.5em 1em、0 2em, Helvetica, Arial, sans-serif
$list: #fff 42 "awesome"; $list: #fff,42,"awesome"; $list:(#b4d455,42,"awesome"); $list: ( ("item-1.1", "item-1.2", "item-1.3"), ("item-2.1", "item-2.2", "item-2.3"), ("item-3.1", "item-3.2", "item-3.3")); $list: "item-1.1" "item-1.2" "item-1.3","item-2.1" "item-2.2" "item-2.3", "item-3.1" "item-3.2" "item-3.3"; length($list)：返回$list长度（如果不是list,返回1） nth($list,$index)：返回$list中第$index列表项值（如果索引值不在列表范围内，将会报错） index($list,$value)：返回$value在$list中的位置 append($list,$value[,$separator])：使用$separator分隔符将$value列表项添加到$list最后（如果没有显式指定$separator分隔符，会以当前分隔符分隔） join($list-1,$list-2[,$separator]):使用$separator分隔符将$list-2附加到$list-1（如果没有显式指定分隔符，将对$list-1中的分隔符） zip(*$lists):将多个$list组合在一起成为一个多维列表。如果列表源长度并不是所有都相同，结果列表长度将以最短的一个为准 reject($list,$value)：这是Compass中的一个函数，将$value值从$list中删除 compact(*$args)：Compass函数，返回一个删除非真值的新列表 list-separator($list)：返回 $list 中的分隔符。 - maps：相当于 (key1: value1, key2: value2)
map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。 map-merge($map1,$map2)：将两个 map 合并成一个新的 map。 map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。 map-keys($map)：返回 map 中所有的 key。 map-values($map)：返回 map 中所有的 value。 map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。 keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
四、运算
- 数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。 关系运算 <, >, <=, >= 也可用于数字运算$number : 12px; p{ width: $number * 2 ; } p{ width: $number / 2 ; } p{ width: calc($number / 2); } - 颜色值运算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。例如 #010203 + #040506，则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，结果为#050709.color1{ color: #010120 + #234234; } .color2{ color: #010120 * 2; } .color3{ color: rgba(250, 0, 0, 0.75) + rgba(5, 255, 0, 0.75); } - 字符串运算
.string1:before{ font-family: icon + font ; content: "带引号字符串" + 不带引号字符串; } .string2:before{ font-family: icon + font ; content: 不带引号字符串 + "带引号字符串"; } - 布尔运算：and、or、not
.bool1:before{ content: $bool and false; } .bool2:before{ content: $bool or false; } .bool3:before{ content: not $bool; } - 圆括号
p{ width:12px * (4 - 2); }
五、函数
- 内置函数
unit($number)：返回 $number 所使用的单位。
unitless($number)：返回 $number 是否带有单位；如果不带单位返回值为 true，带单位返回值为 false。
type-of($list)：//检测类型
- 自定义函数：@function
Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用，与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果$width : 400; $multiple: 2; @function app_width($width,$multiple){ @return $width * $multiple px; } #app{ width: app_width($width,$multiple); }
六、控制语句
- @if
p{ $num : 3; @if $num == 1 { color:red; } @else if $num == 2 { background:red; } @else{ border:red; } } if($condition, $if-true, $if-false) 三元运算符 - @for
//从<start>开始循环，到<end>结束 @for $var from <start> through <end> //循环从<start>开始，一直遍历循环到<end>结束。这种形式的循环只要碰到<end>就会停止循环 @for $var from <start> to <end> @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } - @each
$list : ['one','two','there','four']; @each $i in $list { .item-#{$i}:before { content: $i; } } - @while
$i : 4; @while $i>0 { .while_#{$i}{ width: 1em * $i; $i: $i - 1; } }
七、插值语句 #{}
通过 #{} 插值语句可以在选择器、属性名或属性值中使用变量
$selectName:'.foo';
$attrName:'width';
$content: "content内容";
#{$selectName}:before {
#{$attrName}:12px;
content: "#{$content}";
}
八、!default 可以在变量的结尾添加
!default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
// !default
$content1:'初始赋值';
$content1: "!default 赋值" !default;
.content_value1:before{
content: $content1;
}
$content2:null;//null 将会被视为未赋值,从而!default为其赋值
$content2: "!default 赋值" !default;
.content_value2:before{
content: $content2;
}
//编译结果
.content_value1:before {
content: "初始赋值";
}
.content_value2:before {
content: "!default 赋值";
}
九、其他指令
- @import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
（1）文件拓展名是 .css；
（2）文件名以 http:// 开头；
（3）文件名是 url()；
（4）@import 包含 media queries//@import 语法 @import "test2.scss"; // 导入多文件 @import "test2.scss", "test3.scss"; //导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式： $family: unquote("Droid+Sans"); @import url("http://fonts.googleapis.com/css?family=\#{$family}"); //如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。 @import "colors"; // 嵌套导入 #main { @import "test2.scss"; } - @media
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。.sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } - @extend 样式继承
.item{ width:100%; background:#ffffff; line-height:40px; } .light_item{ //继承上面.item的样式 @extend .item; //其他样式 background:#f0f0f0; } - @extend-Only
定义一套样式并不是给某个元素用,当它们单独使用时，不会被编译到 CSS 文件中,使用 % 声明// ％占位符 #content a%extreme {//%占位符选择器将不会被编译，只接受 extend color:bule; font-size:16px; } .notice{ @extend %extreme; } - mixin 混合指令
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式//声明 @mixin big_text{ font:{ size:22px; weight:bold; } &:hover{ color:red } } //引用 @include big_text; .block{ @include big_text; } //带参数 @mixin big_text2($size:20px,$weight){ font:{ size:$size; weight:$weight; } color:#555; } .p_big_text2{ @include big_text2($size:24px,bold) } //不定长参数 @mixin big_text4($font...){ font: $font; color:#555; } .p_big_text4{ @include big_text4(20px 400) } //向混合样式中导入内容 @mixin apply(){ #app{ color:red; @content; } } #page{ @include apply{ .container{ width:100%; } } } - @debug 将SassScript表达式的值打印到标准错误输出流。它对于调试有复杂SassScript的Sass文件非常有用
@debug 10em + 12em; - @warn 指令将SassScript表达式的值打印到标准错误输出流。对于那些需要警告用户已弃用或存在的小错误。可以使用——quiet命令行选项或:quiet Sass选项关闭警告
@mixin adjust-location($x, $y) { @if unitless($x) { @warn "Assuming #{$x} to be in pixels"; $x: 1px * $x; } @if unitless($y) { @warn "Assuming #{$y} to be in pixels"; $y: 1px * $y; } position: relative; left: $x; top: $y; } - @error 指令将SassScript表达式的值作为致命错误抛出，包括一个nice的堆栈跟踪。它对于验证mixin和函数的参数很有用
@mixin adjust-location($x, $y) { @if unitless($x) { @error "$x may not be unitless, was #{$x}."; } @if unitless($y) { @error "$y may not be unitless, was #{$y}."; } position: relative; left: $x; top: $y; } - @at-root 指令用来放弃当前的嵌套层级，让其内部的CSS规则到根部
// at-root 指令 .parent:before{ content:"parent 内容"; @at-root .chird:before{ content:"chird 内容"; } } //编译后 .parent:before { content: "parent 内容"; } .chird:before { content: "chird 内容"; } - @at-root (without: …) and @at-root (with: …)
@media print { .page { width: 8in; @at-root (without: media) { color: red; } } } //编译后 @media print { .page { width: 8in; } } .page { color: red; }
十、导出变量
:export {
colorPrimary: map_get($ant_them,'colorPrimary');
borderRadius: map_get($ant_them,'borderRadius')
}
说明：变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明
1389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
