20200824-叶梦宇

学习总结

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里嵌套就可以转换了。函数部分有一点没听到,希望老师明天能小小的提一下。

标签

评论