[北京|]JS-|2019年07月03日的日报-技能树.IT修真院

发表于： 2019-07-03 22:41:34

1 738

今天完成的事情：完成了任务11、初步了解sass

明天计划的事情：深度了解sass、开始接下来的任务

遇到的问题：安装sass

安装sass需要先安装ruby，安装ruby时候好像是淘宝的镜像包也停用了，最后一通折腾搞好了步骤也没记

收获：学习了sass

sass
1、变量 
正常变量
定值：$名字:值
引用：$名字
特殊变量：嵌套在字符串中的
定值：$名字:值；
引用：{margin-#(名字):10px }
默认变量：值后面加入!default，默认变量设置默认值，该变量出现另外一个值时覆盖默认值
定值：$color:red !default;
    $color:green;
引用：color:$color; 现在的值为green
多值变量：
list：通过空格，逗号或小括号分割多个值，使用nth($变量名 , $索引)取值。
一维数据：
$名: 5px 10px 15px;
二维数据：
$名: 5px 10px , 20px 30px;
$名: (5px 10px) (20px 30px);
例子：
$名: 10px 20px;
div{
margin:nth($名,1) 0 0 nth($名,2 ) margin: 10px 0 0 20px;
}
map：
2、嵌套 （&应用于父级） 
标签嵌套
//scss样式
 div{
color:#999;
p{
color:#555
}
&:hover{
color:#111;
}
//编译后css
div{color:999}
div p{color:#555}
div:hover{color:#111;}
属性嵌套
div{
border:{
style:solid;
left:{
width:3px;
color:#888;
}
}
}
div{
border-style:solid;
border-left-width:3px;
border-left-color:#888;
}
3、注释
标准css注释：/*注释*/，会保留到编译后的文件中，压缩则删除
单行注释：//注释
重要注释：/*!注释 */，压缩也会保留，经常用于版权声明
4、继承
sass样式
h1{font-size:20px;}
div{@extend h1;
color:red; }
编译后
h1{font-size:20px;}
div{font-size:20px;
color:red; }
占位符选择器%：不调用不会有多余的css文件