Sass学习笔记
声明默认变量
$swap: 3;
$swap: 2 !default;
在变量后加一个 !default
混合宏
我们可以通过在参数中传默认值
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
在 Sass 中通过 @mixin 关键词声明了一个混合宏,那么在实际调用中,其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”
button {
@include border-radius(4px);
}
我们可以给参数传值
继承
在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。
//SCSS
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
占位符
Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能.他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
//SCSS
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}
当我们不继承 %mt5 %pt5 时,那么这两个代码块不会编译到css中,只有@extend调用才会产生代码
插值#{}
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);
使用 #{} 来拼接
@if…@else
//SCSS
@mixin blockOrHidden($boolean:true) {
@if $boolean {
@debug "$boolean is #{$boolean}";
display: block;
}
@else {
@debug "$boolean is #{$boolean}";
display: none;
}
}
.block {
@include blockOrHidden;
}
.hidden{
@include blockOrHidden(false);
}
@debug:如果你在命令行中使用命令生成css文件,命令行中就会打印debug的信息
@for循环
在制作网格系统的时候,大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写,但在 Sass 中,可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式:
@for $i from <start> through <end>
@for $i from <start> to <end>
- $i 表示变量
- start 表示起始值
- end 表示结束值
这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。
看如下代码
//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;
%grid {
float: left;
margin-left: $grid-gutter / 2;
margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 { //插值表达式
.#{$grid-prefix}#{$i}{
width: $grid-width * $i + $grid-gutter * ($i - 1);
@extend %grid;
}
}
@while循环
//SCSS
$types: 4;
$type-width: 20px;
@while $types > 0 {
.while-#{$types} {
width: $type-width + $types;
}
$types: $types - 1;
}
@each循环 (遍历)
遍历列表
@each $var in <list>
$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.author-bio {
@include author-images;
}
字符串函数
unquote()函数
unquote() 函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串。
quote()函数
quote() 函数刚好与 unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号会统一换成双引号 “”
To-upper-case()
To-upper-case() 函数将字符串小写字母转换成大写字母
To-lower-case()
To-lower-case() 函数 与 To-upper-case() 刚好相反,将字符串转换成小写字母
数字函数
- percentage($value):将一个不带单位的数转换成百分比值;
- round($value):将数值四舍五入,转换成一个最接近的整数;
- ceil($value):将大于自己的小数转换成下一位整数;
- floor($value):将一个数去除他的小数部分;
- abs($value):返回一个数的绝对值;
- min($numbers…):找出几个数值之间的最小值;
- max($numbers…):找出几个数值之间的最大值;
- random(): 获取随机数
列表函数
- length($list):返回一个列表的长度值; 以空格为一个元素
- nth($list, $n):返回一个列表中指定的某个标签值
- join($list1, l i s t 2 , [ list2, [ list2,[separator]):将两个列给连接在一起,变成一个列表;
- append($list1, v a l , [ val, [ val,[separator]):将某个值放在列表的最后;
- zip($lists…):将几个列表结合成一个多维的列表;
- index($list, $value):返回一个值在列表中的位置值。
Introspection函数
- type-of($value):返回一个值的类型
- unit($number):返回一个值的单位
- unitless($number):判断一个值是否带有单位
- comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true
Miscellaneous函数(三元表达式)
if($condition,$if-true,$if-false)
Map
基本使用
$map: (
$key1: value1,
$key2: value2,
$key3: value3
)
可嵌套
$default-color: #fff !default;
$primary-color: #22ae39 !default;
$color: (
default: #fff,
primary: #22ae39,
negative: #d9534f
);
进阶技巧,背景主题
$theme-color: (
default: (
bgcolor: #fff,
text-color: #444,
link-color: #39f
),
primary:(
bgcolor: #000,
text-color:#fff,
link-color: #93f
),
negative: (
bgcolor: #f36,
text-color: #fefefe,
link-color: #d4e
)
);
- map-get( m a p , map, map,key):根据给定的 key 值,返回 map 中相关的值。
- map-merge( m a p 1 , map1, map1,map2):将两个 map 合并成一个新的 map。
- map-remove( m a p , map, map,key):从 map 中删除一个 key,返回一个新 map。
- map-keys($map):返回 map 中所有的 key。
- map-values($map):返回 map 中所有的 value。
- map-has-key( m a p , map, map,key):根据给定的 key 值判断 map 是否有对应的 value 值,如果有返回 true,否则返回 false。
- keywords($args):返回一个函数的参数,这个参数可以动态的设置 key 和 value。
RGB颜色函数
- rgb( r e d , red, red,green,$blue):根据红、绿、蓝三个值创建一个颜色;
- rgba( r e d , red, red,green, b l u e , blue, blue,alpha):根据红、绿、蓝和透明度值创建一个颜色;
- red($color):从一个颜色中获取其中红色值;
- green($color):从一个颜色中获取其中绿色值;
- blue($color):从一个颜色中获取其中蓝色值;
- mix( c o l o r − 1 , color-1, color−1,color-2,[$weight]):把两种颜色混合在一起。
HSL函数 (还是颜色)
- hsl( h u e , hue, hue,saturation,$lightness):通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
- hsla( h u e , hue, hue,saturation, l i g h t n e s s , lightness, lightness,alpha):通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
- hue($color):从一个颜色中获取色相(hue)值;
- saturation($color):从一个颜色中获取饱和度(saturation)值;
- lightness($color):从一个颜色中获取亮度(lightness)值;
- adjust-hue( c o l o r , color, color,degrees):通过改变一个颜色的色相值,创建一个新的颜色;
- lighten( c o l o r , color, color,amount):通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
- darken( c o l o r , color, color,amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
- saturate( c o l o r , color, color,amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
- desaturate( c o l o r , color, color,amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
- grayscale( c o l o r ) : 将 一 个 颜 色 变 成 灰 色 , 相 当 于 d e s a t u r a t e ( color):将一个颜色变成灰色,相当于desaturate( color):将一个颜色变成灰色,相当于desaturate(color,100%);
- complement( c o l o r ) : 返 回 一 个 补 充 色 , 相 当 于 a d j u s t − h u e ( color):返回一个补充色,相当于adjust-hue( color):返回一个补充色,相当于adjust−hue(color,180deg);
- invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
Opacity函数
- alpha( c o l o r ) / o p a c i t y ( color) /opacity( color)/opacity(color):获取颜色透明度值;
>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8
- rgba($color, $alpha):改变颜色的透明度值;
- opacify($color, a m o u n t ) / f a d e − i n ( amount) / fade-in( amount)/fade−in(color, $amount):使颜色更不透明;
- transparentize($color, a m o u n t ) / f a d e − o u t ( amount) / fade-out( amount)/fade−out(color, $amount):使颜色更加透明。