中文官网:https://www.sass.hk
sass环境
1 自动化构建 (推荐)
2 命令行编译
(1).sass基于ruby 先下载ruby http://www.ruby-lang.org
(2).更换gem源
$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
(3).gem install sass //安装sass
3 vscode esay sass插件 是不需要装ruby环境的
参考文章https://www.cnblogs.com/yangkangkang/p/11010563.html
4 koala软件编译
变量
//sass变量以$符号开头 , 默认是最后的覆盖前面的变量, 如果加了!default, 这里结果则为200px
$baseWidth :200px;
$baseWidth :100px !default;
.box1{
width: $baseWidth;
}
// $定义的 选择器,属性名,url '字符串' 使用时必须 #{$xx}使用 .
$color:pink;
$selector:wrap;
$margin:margin;
// $background_url:abc;
$background_url:'http://xx.jpg';
.#{$selector}{
#{$margin}:20px;
color:$color;
// background-image: url('./img/'+$background_url+'.jpg');
background-image: url('#{$background_url}');
}
变量类型
//1.数字类型
100px , 2
//2.颜色
red, #fff
//3.字符串
$str :'abc.jpg';
//4.数组 下标从1开始算 , nth() 获取指定下标, index()根据内容返回对应下标
$list:(100px,200px,'abc.jpg',2);
.div{
width:nth($list,1);
height:nth($list,2);
background:url('images/'+nth($list,3));
z-index:index($list,'abc.jpg');
}
//5.map map-get()
$map :(top:10px,left:20px,right:30px,bottom:40px);
.div{
top: map-get($map,top); // top:10px;
}
//each 遍历 map
.div3{
@each $key ,$value in $map{
#{$key}:$value;
}
}
变量计算
//1.颜色运算
//案例 根据16进制获取rgb值 0-255
$color:#5e5e5e;
.div4{
color: red($color);//94
color: green($color);//94
color: blue($color);//94
color: rgb(red($color), green($color), blue($color));//#5e5e5e
}
文件引入
引入的文件如果是以 .css结尾 / http路径 / url()包裹 / media queries 则生成的文件是以原生css去引入
如果引入的文件和当前文件 有重名变量 , 然后文件引入的顺序又在当前文件的变量之后
可以在引入的文件变量使用 !default ,这样当前文件的变量就不会被覆盖了
@import 'index' 以scss/sass结尾的文件可以忽略后缀
mixin 混合, 就是将代码复制粘贴
//1. @mixin name {} 声明混合
@mixin helloMixin {
display: inline-block;
//相同前缀的属性名 可以简写成对象 ,最终生成 font-size,font-weight,甚至font-aa
font: {
size:20px ;
weight: 500 ;
aa:red;
};
color: red;
}
.div{
//使用时 以@include 混合名
@include helloMixin;
}
//2.带参数的mixin
@mixin mn2($w,$c) {
width: $w;
color: $c;
}
.div2{
@include mn2(20px,red );
}
//3.mixin嵌套
@mixin mn3 {
width: 10px;
}
@mixin mn4 {
width: 40px;
@include mn3;
height: 60px;
}
.div3{
background: red;
@include mn4;
}
//最终生成 , sass不会自动去掉重复的属性, css一般(!important除外)是使用最后一个声明的属性, 晓得伐?
.div3{
background:red;
width:40px;
width:10px;
height:60px
}
继承 , 生成分组选择器和less继承差不多 , 比混合能省去很多重复代码
//1.简单继承
.div1{
border: 1px solid #ccc;
}
.div2{
width: 20px;
@extend .div1;
}
//,最终生成
.div1,.div2{
border:1px solid #ccc
}
.div2{
width:20px
}
//2.关联继承 与.div1相关的也会被继承,
.div1.other{
color:red;
}
//最终生成
.div1,.div2{border:1px solid #ccc}.div2{width:20px}.div1.other,.other.div2{color:red}
//3.链式继承
.div3{
@extend .div2;
}
//最终生成
.div1,.div2,.div3{border:1px solid #ccc}.div2,.div3{width:20px}.div1.other,.other.div2,.other.div3{color:red}
//4.伪类继承
a:hover {
text-decoration: underline;
}
div:hover{
width: 10px;
}
.hoverlink{
color: red;
@extend :hover; //继承hover伪类
}
//生成的结果为 , 跟hover相关的选择器, 作为继承者最后生成 并且选择器的一部分
a:hover, a.hoverlink {
text-decoration: underline;
}
div:hover, div.hoverlink {
width: 10px;
}
.hoverlink {
color: red;
}
if逻辑判断
$type: '1';
p{
@if $type=='1' {
color:red;
} @else if $type == '2' {
color:yellow;
} @else if $type == '2' {
color:blue;
} @else {
color:green;
}
}
@if $type=='2' {
div{
color:red;
}
} @else {
div{
color:yellow;
}
}
//生成
p {
color: red;
}
div {
color: yellow;
}
for循环
//1.普通循环
// through和to的区别, through包含3, to不包含3
@for $i from 1 through 3 {
.item#{$i} {
width: 1px * $i;
}
}
@for $i from 1 to 3 {
.item#{$i} {
width: 1px * $i;
}
}
//生成
.item1 { width: 1px; }
.item2 { width: 2px; }
.item3 { width: 3px; }
.item1 { width: 1px; }
.item2 { width: 2px; }
//2.数组循环 , length 获取数组长度
$arr : (5,4,3,2,1);
@for $i from 1 through length($arr){
.item#{nth($arr,$i)}{
width: 2px * nth($arr,$i);
}
}
//生成
.item5 { width: 10px; }
.item4 { width: 8px; }
.item3 { width: 6px; }
.item2 { width: 4px; }
.item1 { width: 2px; }
while循环
$i: 6;
@while $i > 0 {
.item#{$i} {
width: 1px * $i;
}
$i: $i - 2;
}
.item6 { width: 6px; }
.item4 { width: 4px; }
.item2 { width: 2px; }
each 遍历map
$map:(top: 1px,left:2px,bottom: 3px,right: 4px);
.div {
@each $key , $value in $map {
#{$key}:$value;
}
}
//生成
.div { top: 1px; left: 2px; bottom: 3px; right: 4px; }
内置函数
@debug css调试 实时在控制台看到数据的结果 ,vscode暂时不会用
数学内置函数
percentage() 转成百分比, 就是加个%号
round() 四舍五入取整
ceil() 向上取整,小数舍去,整数加1
floor() 向下取整 小数舍去,整数不变
abs() 绝对值
min()/max() 取最小/最大值
random() 默认0-1
random(10) 0-10取整数
数组内置函数
length($list);//长度
nth($list, 2);//指定下标的元素
@debug set-nth($list, 1, "x"); 下标是1的元素替换成x
join($list, (6, 7, 8)); //拼接数组
append($list, '999'); //从数组尾部添加元素
index($list, "p"); //找到数组元素的位置
字符串内置函数
unquote（$string）:去除引号
quote（$string）：添加引号
str-length（$string）：获取字符串长度
str-insert（$string，$insert，$index）：在指定位置插入字符【$insert要插入的字符，$index要插入的位置】
str-index（$string，$substring）：返回指定字符在字符串中的位置。
to-upper-case（$string）：转换成大写
to-lower-case（$string）：转换成小写
map内置函数
map-get（$map,$key）：根据给定的key值，返回map中相关的值
map-merge（$map1，$map2）：将两个map合并成一个新的map
map-remove（$map，$key）：从map中删除一个key，返回一个新map,不更改原map数据
map-keys（$map）：以字符串形式返回map中所有的key
map-values（$map）：以字符串形式返回map中所有的value
map-has-key（$map，$key）：根据给定的key值判断map是否有对应的value值，如果有返回true，否则返回false
keywors（$args）：返回一个函数的参数，这个参数可以动态的设置key和value
@mixin foo($args...) {
@debug keywords($args); // 返回参数和参数值, 类型应该是一个map , ($arg1:'abc',$arg2:'efg')
}
@include foo($arg1:'abc',$arg2:'efg');
$numberPercent: 7;
div{
width:percentage( $numberPercent );//700%
}
$numberPercent: 0.7;
div{
width:percentage( $numberPercent );//700%
}
$number: 70;
$number2: 71;
div{
width:#{round(9.5)}px; //10px
width:ceil(8.1) ; //9
width: floor(7.8);//7
width: abs(-3.4);//3.4
width: min($number,$number2);//70
width: max($number,$number2);//71
}
自定义函数
//定义函数
@function px2rem($px){
$rem : 37.5px;
//renturn 返回
@return ($px / $rem) + rem;
}
.div2 {
width: px2rem(90px);
}