学习总结

sass

scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合 、导入、函数等高级功能，这些拓展令 CSS 更加强大与优雅，scss有点类似css和JavaScript的结合体

大部分停止运行是ctrl+c

注释

/多行注释，会被转换到生成的.css文件中/

// 单行注释，不会被转换到生成的.css文件中

变量

使用$声明变量，使用 : 赋值。可以将需要多次使用的数据声明为一个变量，反复使用

全局作用域：可以在sass文件二点任何位置调用

局部作用域：只能在当前的{}内使用

默认情况下，后写的覆盖先写的。但是可以通过在结尾处添加!default，让之前的变量值有效

取消当前变量名的权值，

使用sass必须要有解析器

嵌套

结构嵌套
scss
#content{
color:red;
.top{color:red;
a{colore:red;}
}
}
css
#content{color:red;}

content .top{color:red;}

content .top a{color:red;}

属性嵌套

scss
div{
border:{style:solid;color:#fff;width:1px;};
}

css
div {
border-style: solid;
border-color: #fff;
border-width: 1px;
}

群组嵌套

content,div,.top,.bottom{

  a{color:red;
        &:hover{color:blue;}
   }

};

content a, div a, .top a, .bottom a {

color: red; }
#content a:hover, div a:hover, .top a:hover, .bottom a:hover {
color: blue; }

导入

1. 局部scss文件：文件名称以_开头，就是局部scss文件。局部scss文件不会被转换成css文件。可以在一个全局scss文件中，导入多个局部scss文件，最后生一个css文件
   _sass 文件名

2. 全局scss文件 不以_开头的scss文件，可以导入其他全局文件和局部文件

   语法；@import "demo";局部和全局是一个样的

   混合器

   mixin混合器 @mixin 混合器名称{
   样式申明
   }
   @mixin pStyle {
   color: red;
   background-color: green;
   }

   调用混合器
   @include 混合器名称
   #text{
   @include pStyle;
   }

继承

d1{

 border:2px solid #f00;
 box-shadow:1px 1px ;

}

d2{

 color:#222;
 @extend #d1;

}

运算

1，加，字符串拼接

p::before{
content:"欣欣"+为国争光;
font-family:黑+"体";
}
2，减法 乘法，除法

\(my-width:100px;
\)my:50px;
div{
width:\(my-width - \)my;
}
减号前后要加空格

3，插值操作

p::after{
content:"xinxin is #{200+90} ...";
}
使用#{}做插值

4，颜色的运算

div{
color:rgba(01,02,03,0.4)+rgba(01,02,03,0.4);
}
p{
color:#112233+#112233;
background:rgb(255,02,03)+rgb(01,02,03);
}
1. 颜色需要分段运算，红+红 绿+绿 蓝+蓝
2. 分段运算之后，结果超过255，就取值255
3. rgba的运算，要求alpha值相同才可以计算

学习心得

今天学完了sass，感觉他的样式我有点用不习惯，不过嵌套和变量还是挺方便的，不用自己在手写一大堆的重复类名，只需要在sass里嵌套就可以转换了。函数部分有一点没听到，希望老师明天能小小的提一下。